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.

Juncaceous

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 config along with any other desired eslint config (like eslint-config-airbnb) and in your eslint configuration file you just add it to the extends field. For example:

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

Confidant

This solution alone doesn't get prettier formatting my code in vs code for me, I had to set setting Eslint: Auto Fix On Save and use pretty much the setup shown in this article: georgespake.com/blog/eslint, and it still bothers me because why do I have to add a singleQuote rule when airbnb already has this rule? – Pelage

@Pelage Yeah, the question and the answer aren't about running prettier, but about avoiding conflicting results when you're using prettier along with some eslint styling rules. To integrate prettier with your editor, refer to the documentation: prettier.io/docs/en/editors.html – Confidant

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.

1. Use eslint-config-prettier

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"
  ]
}

2. Modifying Prettier's config

Add "singleQuote": true to the .prettierrc config file:

{
  "singleQuote": true,
  ...
}

3. Prettier CLI config

Add a --single-quote command line option when you invoke Prettier:

$ prettier --single-quote ...

4. Modify ESLint config

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

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

Foscalina

why do you have to add a singleQuote setting to prettierrc when airbnb already has this rule? – Pelage

Turning off the quotes rule was what I needed to coordinate with my other linting extensions. thank you! – Thwack

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"
  ]
}

Lizalizabeth

Answer 4

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.

Testicle

Answer 5

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 :)

Aft