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