Using Prettier with Airbnb’s ESLint config

What is Prettier and Airbnb’s ESlint configuration

Airbnb ESLint configuration is one of the most used ESLint congifuration and Prettier is an opinionated code formatter with a handful options to configure.

Both are very strong tools to make your code more readable (Prettier), increases your code quality with consistency and prevents you from some serious mistakes in your code (ESLint & Airbnb’s configuration).

Adding modules

Make a directory, step into it, just initialise your project with npm init and install ESLint and Prettier along with a Prettier config and plugin for ESLint

$ npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier

-   [email protected]
-   [email protected]
-   [email protected]
-   [email protected]
    added 125 packages from 79 contributors and audited 182 packages in 7.427s
    found 0 vulnerabilities

Additionally you need the Airbnb ESLint configuration with its peer dependecies. Here I am using install-peerdeps from Nathan H. Leung.

$ npx install-peerdeps --dev eslint-config-airbnb

install-peerdeps v1.10.2
Installing peerdeps for eslint-config-airbnb@latest.
npm install [email protected] [email protected] eslint-plugin-import@^2.18.0 eslint
-plugin-jsx-a11y@^6.2.3 eslint-plugin-react@^7.14.2 --save-dev

-   [email protected]
-   [email protected]
-   [email protected]
-   [email protected]
-   [email protected]
    added 87 packages from 54 contributors, removed 14 packages, updated 24 packages and aud
    ited 540 packages in 9.653s
    found 0 vulnerabilities

SUCCESS eslint-config-airbnb
and its peerDeps were installed successfully.

Configure files

I am using .yaml-files for the configuration so create a .prettierrc.yaml and a .eslintrc.yaml. If you are using a *nix-like system just put this in your console:

$ echo "---
extends:
  - airbnb
  - prettier
plugins:
  - prettier
rules:
  prettier/prettier:
    - error" >> .eslintrc.yaml

$ echo "---
trailingComma: 'es5'
printWidth: 100
tabWidth: 4
useTabs: true
semi: false
singleQuote: true" >> .prettierrc.yaml

Now add two npm run scripts with json from Trent Mick.

$ npx json -I -f package.json -e 'this.scripts.lint="eslint --ext .jsx,.js src"'
npx: installed 1 in 0.89s
json: updated "package.json" in-place

You can run now your “linting” with npm run lint and find your errors.

$ npx json -I -f package.json -e 'this.scripts.fix="npm run lint -- --fix"'
npx: installed 1 in 0.926s
json: updated "package.json" in-place

This will “fix” and format your code with npm run fix. The “fix” script won’t fix your entire code (see Fixing problems in the ESLint documentation) but the most common things. Try out your configuration

Add a really bad JavaScript file to your project:

$ mkdir src; echo "            function logTest (arg) {
const test =             \"\";

        if (test !=        \"\")
                console.log(test);

}

logTest('test');
" >> src/bad.js

And run npm run fix and you should see something like this:

$ npm run fix

> [email protected] fix /Users/dooz/myproject
> npm run lint -- --fix

> [email protected] lint /Users/dooz/myproject
> eslint --ext .jsx,.js src "--fix"

/Users/dooz/myproject/src/bad.js
1:18 error 'arg' is defined but never used no-unused-vars
4:11 error Expected '!==' and instead saw '!=' eqeqeq
4:18 warning Unexpected console statement no-console

✖ 6 problems (4 errors, 2 warnings)

And the bad.js is not too bad anymore because Prettier and ESLint took care of it:

function logTest(arg) {
    const test = ''

    if (test != '') console.log(test)
}

logTest('test')

You just need to fix the other warning manually and you are good.

That’s it. If you have any suggestion or questions, just tweet me.