Search code examples
eslintprettier

How do I integrate ESLint and Prettier?

I'm having trouble using both ESLint and Prettier together. What are the steps needed to get them to work together?

Solution

  • 1) Install ESLint and Prettier.

    $ npm install --save-dev eslint prettier

    2) Install the plugins and configurations that enable them to work together.

    $ npm install --save-dev eslint-plugin-prettier eslint-config-prettier

    3) Add the following to your ESLint config file:

    {
  "plugins": [
    "prettier"
  ],
  "extends": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

    4) Add the lint and prettier commands as npm scripts to package.json:

    {
  ...
  "scripts": {
    ...
    "lint": "eslint 'src/**/*.js'",
    "prettier": "prettier --write 'src/**/*.js'",
    "check-all": "npm run prettier && npm run lint",
    ...
  }, 
}

    5) Now you can lint and prettify your code at the same time by doing:

    $ npm run check-all

    Or invoke them separately:

    $ npm run lint
$ npm run prettier