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.

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

Solution 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",
    ...
  }
}

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

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

Solution 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.

View more solutions

Comments

[user210757]

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?

[user210757]

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

[timetowonder]

@user210757 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

[Edmund's Echo]

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