Using Prettier and ESLint in harmony

Last updated July 26, 2021 by Jacob Paris

ESLint is for catching bugs.

Prettier is for formatting code.

Manually formatting your code tricks you into thinking you're improving the codebase while providing zero business value.

When properly configured, ESLint will audit your code for potential bugs. Anything that doesn't match the way Prettier wants to format your code is also flagged as an error, and then triggers Prettier as part of the autofix step.

Installation

You'll need to install these four modules.

npm i --save-dev / eslint / prettier / eslint-config-prettier / eslint-plugin-prettier

Configuration

json.eslintrc
1{
2 "extends": ["plugin:prettier/recommended"]
3}
4
json.prettierrc
1{
2 // These are optional, but you can configure your opinions here
3 "semi": false,
4 "arrowParens": "always",
5 "singleQuote": true,
6 "endOfLine": "auto",
7 "trailingComma": "all",
8 "bracketSpacing": true
9}
10
json.vscode/settings.json
1{
2 "eslint.validate": ["javascript"],
3 "eslint.run": "onType"
4}
5

Deployment

Since ESLint flags formatting issues as errors, a CI process that checks the lint status can fail. That might seem like a feature, but in a team environment, a small code suggestion in a PR can trigger prettier to expect some code to drop down to the next line. That blocks deployment until it's resolved.

To resolve this, I like to make a second eslint file called .eslintrc.ci that disables Prettier

json.eslintrc.ci
1{
2 "rules": {
3 "prettier/prettier": "off"
4 }
5}
6

Configure a script to load that config instead, and use that script in your CI workflow

jsonpackage.json
1{
2 "scripts": {
3 "lint:ci": "eslint -c .eslintrc.ci.js"
4 }
5}
6