Turn off conflicting Eslint + Prettier rules

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

Eslint and Prettier Errors 🏃‍♀️
Eslint and Prettier Errors 🏃‍♀️

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

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

Fewer console errors after setting up eslint-config-prettier
Fewer console errors after setting up eslint-config-prettier

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

VSCode ESLint extension integrated
VSCode ESLint extension integrated


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