Prettier with React & Typescript

[thecodeclimber]

I am trying to setup eslint to work with Prettier, React & Typescript. I am wondering, is this the right way to do it:

extends: [
    ...
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
    'plugin:prettier/react',
    'plugin:prettier/@typescript-eslint',
    ]

Note: these are the final four extensions in the extends array.

[lydell]

Hi!

Assuming you use eslint-config-prettier 8.0.0 or late, it should look like this:

extends: [
    ...
    'plugin:prettier/recommended'
    ]

https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

(See also the downsides of eslint-plugin-prettier: https://prettier.io/docs/en/integrating-with-linters.html#notes)

[Shinigami92]

Hey @lydell o/

I'm also a bit confused :confused:

so I have this

  extends: [
    'plugin:vue/essential',
    '@vue/prettier',
    '@vue/typescript',
    'prettier',
    'plugin:prettier/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:jsdoc/recommended'
  ]

What of these can be removed and can I remove also devDependenies from my package.json or will they just picked up magically by eslint-config-prettier if they exists?

[lydell]

@Shinigami92 I think it should look like this (I’m not sure what @vue/prettier does, though):

  extends: [
    'plugin:vue/essential',
    '@vue/prettier',
    '@vue/typescript',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:jsdoc/recommended',
    'plugin:prettier/recommended'
  ]

• Move "plugin:prettier/recommended" last, so it’s gets a chance to override everything else.
• Remove "prettier". It doesn’t hurt, but it’s already included by "plugin:prettier/recommended".

All of that is already documented: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

Do you have suggestions on how to make the docs understandable?

can I remove also devDependenies from my package.json or will they just picked up magically by eslint-config-prettier if they exists?

What do you mean?

[Shinigami92]

So I saw that something like prettier/vue can be omitted with v8.0.0+ and I have @vue/prettier in my setup. But it seems that these both have nothing to do with each other so I need to have it there as is.

I have eslint-plugin-vue in my devDependencies but also this es associated to eslint and not prettier, so also my mistake here.

The link to the recommended configuration was really helpful to read. In the changelog there is

But I didn't clicked on the link because I did not assume that it would navigate me to the readme/docs :thinking:
That's only one really minor UX thingy :sweat_smile:

All questions are answered on my side, thank you very much @lydell :heart:

[thecodeclimber]

Thanks again for your replies.

I would like to explian my particular confusion with that hope that it may be of benefit to other people.

When I look at various tutorials online on how to use eslint with prettier and react/typescript, I often times find specific recommendations (that is, indeed, where I got the setup that I noted above in my original question).

On the other hand, when I read your instructions I find a general explanation of how to use eslint-plugin-prettier, but no specifics on how to deal with common situations (such as react or typescript).

As such, I am left to wonder -- does the recommended configuration take into consideration using react, typescript or some other popular library or is it only considering the more limited case of eslint and prettier. For me personally, it is not clear.

What I gather now is that in terms of eslint-plugin-prettier it makes no difference what other libary I am using, I only need to add eslint-plugin-prettier to the end of the extends array.

I would like to recommend, though, that you note that in your documentation -- perhaps with a particular example. I imagine that not only would it directly help people like myself, but it would also lead to better online tutorials and perhaps even less github issues created as a result of those tutorials.

If you are interested, I would even be happy to help write the clarification.

Either way, thanks for your help.

[lydell]

If you are interested, I would even be happy to help write the clarification.

Please do! I think I know how this stuff works too well to be able to understand what people find confusing.

[thecodeclimber]

Sounds good. I come from the perspective of someone who literally yesterday decided to try and figure out how this eslint "thing" actually works. So I definitely have a good sense of being confused :).

I'll work on writing something up and then you guys can fix any errors that I have.

[thorn0]

@thecodeclimber

As such, I am left to wonder -- does the recommended configuration

eslint-config-prettier and eslint-plugin-prettier are two different ways to integrate Prettier and ESLint. The generally recommended configuration (e.g. in Prettier's docs) involves only eslint-config-prettier (this repo), not eslint-plugin-prettier. However, if you do decide to use eslint-plugin-prettier, it has its own recommended configuration, which also involves eslint-config-prettier. That's why mentioning "the recommended configuration", it makes sense to clarify which of the two we are talking about.

Probably this was already mostly clear to you. I just thought making sure everyone is on the same page won't hurt.

does the recommended configuration take into consideration using react, typescript or some other

Yes, it does. For both eslint-config-prettier and eslint-plugin-prettier.

What I gather now is that in terms of eslint-plugin-prettier it makes no difference what other libary I am using

Right.

I only need to add eslint-plugin-prettier to the end of the extends array.

"plugin:prettier/recommended"

Or, if you use only eslint-config-prettier, then the last extends entry should be "prettier".

[lydell]

As far as I can tell, this is being done in https://github.com/prettier/eslint-plugin-prettier/pull/391