Prettier + Airbnb's ESLint config

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

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

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