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.
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
npmcommands if preferred.
- As mentioned above, the final step includes VS Code configuration but check Prettier’s docs for set-up with different editors.
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.
Based on this info, the install command would look like.
You’ll notice the install of
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.
Next up, install Prettier and some plugs so it all plays nicely together:
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
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):
That’s it. Your project is ready to be linted and formatted.