Turn off conflicting Eslint + Prettier rulesMay 12, 2020

I was trying to setup Eslint in a vanilla Typescript/Webpack project and ran into some issues with my already existing Prettier setup.

Eslint and Prettier rules aren’t in sync by default. An example is quotes - Eslint (airbnb-base) prefers single quotes while my prettier setup does double quotes.

Prettier makes my code look great. But I also need Eslint for more standard JS linting - Think best practices and stuff. So I do the following to get it working

• Install eslint and run eslint --init to setup.
• Choose the airbnb-base (vanilla typescript) and it does all the scaffold
• Write this very little code block just to test my setup

export const sayHello = (text: string) => console.log(text)

const noUsed = `hello`

I run yarn run lint ./index.ts, and I get this on my console

But prettier says everything’s alright

I’m guessing prettier just formats code while eslint packs up those formats and enforces them. I thought of an ideal world where I could make both work together and share the same rules, but doing this manually got me scared. It turns I don’t have to. Enter eslint-config-prettier

Making Eslint and Prettier Work Together

The prettier guys made eslint-config-prettier to turn off all rules that are unnecessary or might conflict with prettier. So let’s set this up

1. Install eslint-config-prettier

yarn add -D eslint-config-prettier

1. Add prettier to your .eslintrc.*

{
    "extends": [
        "airbnb-base", // or "airbnb" if you use react
        // "prettier/react",
        "prettier"
    ]
}

According to the docs, you’ll need to include any plugin you implicitly extend. For instance, if you include eslint-airbnb-config which extends eslint-plugin-react, you’ll need to add prettier/react to the extends array

When I try to run yarn run lint ./index.ts, here’s what my console now looks like

VSCode support for Eslint

I got all the goodness in VSCode (error highlighting as I write code) by installing the ESLint VSCode extension. The error and warning messages were kind of too much at first, battling with those from typescript, but since I got what I wanted, I’ll just focus on fine-tuning the rules for now

Ideas

What do you think? Is there a better way to setup ESLint/Prettier, please share with me on Twitter

Resources

• eslint-config-kentcdodds
• Configuring ESLint - Official ESLint site
• Prettier + Airbnb’s ESLint config
• Awesome ESLint
• JavaScript Style Guide
• Integrating Prettier + ESLint + Airbnb Style Guide in VSCode
• eslint-config-prettier