Javascript Linting and Formatting with ESLint, Prettier, and Airbnb

ESLint and Prettier help you maintain code quality. This tutorial will run through one of the many ways to set them up.

We’ll bootstrap this project with webpack-babel-react-starter and configure ESLint with the very popular Airbnb style guide and Prettier.

Prettier

First, make sure you are in the project root directory and then use Yarn or NPM to add three prettier related packages.

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

ESLint

Next, add the ESLint packages.

yarn add -D eslint eslint-plugin-react eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-import-resolver-webpack

ℹ️ The last package eslint-import-resolver-webpack is required if you are using Webpack. Specifically, if you are using aliases in Webpack. Which we are in this example project and we’ll see that below.

In the project root directory create a .eslintrc file. The file can be either .js or .json. See the JSON example below.