Confused as to What to Extend

[thecodeclimber]

I am trying to figure out how to get eslint, prettier, react and typescript to all work together. I have gone through a number of tutorials as well as the documentation for various different eslint configuration packages and plugins. So far, this is what I have come up with:

  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier',
  ],
  plugins: ['@typescript-eslint'],

However, I do not know if I am doing this properly. Do I need both 'plugin:prettier/recommended' and 'prettier' or do I just need prettier?

[zimme]

If you use eslint-plugin-prettier you just need to extend plugin:prettier/recommended. If you don't use eslint-plugin-prettier and just eslint-config-prettier you'll just need to extend prettier.

[thecodeclimber]

First of all, thanks for the extremely quick response :).

Secondly, I am wondering (based on your answer) -- if I only use eslint-config-prettier and extend prettier will that automatically add eslint-plugin-prettier and plugin:prettier/recommended?

A related question is whether or not there is anything that adding eslint-plugin-prettier will allow me to do that I can't do simply by adding eslint-config-prettier with extending prettier?

[zimme]

It's the other way around, if you use eslint-plugin-prettier you can install eslint-config-prettier as that's an optional peer dependency. When you have both eslint-plugin-prettier and eslint-config-prettier then eslint-plugin-prettier offers plugin:prettier/recommended which enables eslint-config-prettier as well as sets up eslint-plugin-prettier properly for you.

eslint-plugin-prettier will add eslint rules for prettier formatting, i.e. you get lint warnings from eslint about prettier stuff.

eslint-config-prettier only disables other eslint rules that conflicts with prettier's formatting.

[lydell]

What @zimme said. I had already started writing, so I could just as well post it.

if I only use eslint-config-prettier and extend prettier will that automatically add eslint-plugin-prettier and plugin:prettier/recommended?

No.

A related question is whether or not there is anything that adding eslint-plugin-prettier will allow me to do that I can't do simply by adding eslint-config-prettier with extending prettier?

Yes!

• eslint-config-prettier (this repo) is just a config. It only turns rules off. That’s all.
• eslint-plugin-prettier is a plugin – it adds new functionality: A rule that runs Prettier. Plugins can also ship configs – they always start with plugin:. So "plugin:prettier/recommended" comes from eslint-plugin-prettier. It sets up the plugin, but as a bonus also adds "prettier" (which is the config from this repo) to "extends". Read all about it here: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

(Also don’t forget to read about the downsides of eslint-plugin-prettier.)

[thecodeclimber]

@zimme and @lydell -- thanks, very helpful.