Setting up ESLint and Prettier

Set-up ESLint and Prettier #

I’m a big fan of linting and I love the configurability of ESLint with the auto formatting capabilities of Prettier. It’s been a revelation. Learning best practices in terms of ESLint rules and formatting from Prettier, plus no more bikeshedding at work in pull requests on coding style. Let the machine take care of it for you.

Each time I set-up a new JavaScript project, I set-up this configuration in my editor of choice Virtual Studio Code, so this blogpost is my step by step guide to remind myself how to implement ESLint and Prettier to work in VS Code.

Specifics #

Before diving into the detail, a few points:

I install the config for each project locally as I prefer that level of control to fine tune for a project’s specific needs.
Yarn is used as the package manager but swop out the equivalent npm commands if preferred.
As mentioned above, the final step includes VS Code configuration but check Prettier’s docs for set-up with different editors.

Install ESLint #

Step one is to install ESLint with the AirBnB style guide config. In order to do this, follow the instructions from AirBnB:

If you use yarn, run npm info “eslint-config-airbnb@latest” peerDependencies to list the peer dependencies and versions, then run yarn add –dev @ for each listed peer dependency.

For example:

➜ ~ npm info "eslint-config-airbnb@latest" peerDependencies

{ eslint: '^4.9.0',
  'eslint-plugin-import': '^2.7.0',
  'eslint-plugin-jsx-a11y': '^6.0.2',
  'eslint-plugin-react': '^7.4.0' }

Based on this info, the install command would look like.

yarn add --dev eslint babel-eslint eslint-plugin-import@^2.7.0 eslint-plugin-jsx-a11y@^6.0.2 eslint-plugin-react@^7.4.0

You’ll notice the install of eslint and babel-eslint in addition to the AirBnB config.

Once complete, add a .eslintrc.yml to the root of your project and add the config from the dotfiles template repo.

Install Prettier #

Next up, install Prettier and some plugs so it all plays nicely together:

yarn add prettier --dev --exact
yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb

This is important because both ESLint and Prettier will try to format code which we don’t want. Instead we want Prettier to format the code based on the ESLint rules defined in the .eslintrc.yml file.

VS Code extensions and settings #

The final step is to configure the editor so it plays nicely with the project’s ESLint and Prettier config.

These steps are specific for VS Code. First, install two extensions:

Second, add these user settings (CMD + , to open user settings):

// My personal preference; set for JS only to avoid formatting other file types
  "[javascript]": {
    "editor.formatOnSave": true
  },

// This stops VS Code from trying to autoformat code
"javascript.format.enable": false,

// This one is obvious, right?
"prettier.eslintIntegration": true,

That’s it. Your project is ready to be linted and formatted.