Prettier + Airbnb's ESLint config

Question

Recently, I've started using Visual Studio Code for my editor and found the Prettier - JavaScript formatter. I think it's a great plugin because it helps me keep my code looking nice.

I set up Airbnb's ESLint config and have found that to be super helpful.

Here's the catch. The Airbnb ESLint config I'm currently running doesn't play nice with Prettier. For example, for JavaScript string, Prettier is formatted to include double ticks and Airbnb's ESLint like single ticks. When I format the code using Prettier, then Airbnb's ESLint doesn't agree.

I know Kent Dodds has done some work with ESLint configs, among others, example here.

But I can't seem to find a solution that lets me use the magic of Prettier to format my code to Airbnb's ESLint.

Answer 1

I think eslint-config-prettier was created just for this purpose: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules

Basically it turns off all rules that have to do with code styling because prettier will take care of it anyway.

So you just install this plugin along with any other desired eslint plugin (like eslint-config-airbnb) and in your eslint config you just add it to the extends field. For example:

{
  "extends": ["airbnb", "prettier"]
}

Answer 2

Here are a few ways to do it, in order of recommendation. I would prefer the first approach as you won't ever have to bother with other rules that might conflict in future.

i) Install eslint-config-prettier and extend from it in .eslintrc. Doing this turns off some of the formatting-related rules within ESLint that might conflict with Prettier:

{
  "extends": [
    "airbnb",
    "prettier"
  ]
}

ii) Adding "singleQuote": true to the .prettierrc config file:

{
  "singleQuote": true,
  ...
}

iii) Adding a --single-quote command line option when you invoke Prettier:

$ prettier --single-quote ...

iv) Turn off ESLint's quotes rule within your .eslintrc config file (and potentially others that might conflict):

{
  "rules": {
    "quotes": "off",
    ...
  }
}

Answer 3

A cleaner way is:

yarn add --dev eslint-plugin-prettier eslint-config-prettier

   // .eslintrc
   {
     "extends": ["airbnb", "plugin:prettier/recommended"]
   }

The plugin:prettier/recommended does three things:

• Enables eslint-plugin-prettier.
• Sets the prettier/prettier rule to "
• Extends the eslint-config-prettier configuration.

And then if you are on react, you could add prettier/react too:

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ]
}

Answer 4

So, you have your .eslintrc file, with the property "extends": "airbnb" Add another property, rules, and the rules that you will write in there will overwrite the ones inherited from airbnb

"extends": "airbnb",
"rules": {
    "eqeqeq": 2,
    "comma-dangle": 1,
}

Now here I'm just overwriting two random rules, you will need to look for the one you need :)

Answer 5

Here is a little interactive CLI tool I built to setup ESLint with Prettier. Just install it and run:

npx eslint-prettier-init

Which will resolve your issue.