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.

eslintrc.json

In the above example, we started with extending airbnb and prettier. The order of the presets matters. We have also added a few rules to get started. We have react/jsx-filename-extension as a rule which will allow us to write JSX in files with .js extensions. We also added “rules” for prettier to show prettier errors in ESLint and a maximum line length rule. You can modify these to fit your style.

In the “settings”, we added our Webpack common config to let ESLint know about our Webpack aliases. See an alias example below.

Without alias:
import Button from ‘../../components/button’;
With alias:
import Button from ‘Components/button’;

Lint Script

Lets now edit our package.json to include a new script to run ESLint.

"lint": "eslint src -c .eslintrc.json --ext js,jsx",

This will lint the files that have the extension .js or .jsx in the src directory, using the .eslintrc config file. You can modify this to suit your needs.

Here is a full example of a package.json file. Ensure your syntax is correct and you use the correct file extension that matches your .eslintrc file.

Also, mind the trailing comma. If you add this line to the middle of the scripts section, you’ll need a trailing comma, but not if you add it to the end.

Ignoring files

You may want the linter to ignore specific files (e.g. registerServiceWorker.js). We can do that by adding an .eslintignore file and adding a filename or an entire directory.

.eslintignore

Prettier Rules

Using prettier with ESLint, we’ll want turn off the rules that may conflict with Prettier using eslint-config-prettier and we can then override some rules by adding a .prettierrc file.

.prettierrc

See the docs for additional options. You can also create a .prettierignore file if you want to ignore specific files.

Linting

Now, from the CLI, we can run:

yarn run lint

You will most likely see some errors. You can fix some of these errors by simply re-running the same command with the —-fix option. I would recommend not using the fix option until you have had a chance to look at the code that is causing the errors. That will give you a better understanding of why you are seeing the errors. Also, you may need to adjust some of the rules based on your preferences.

Editor Add-ons/Extensions

Depending on your editor, You may want to add an editor extension to lint and format your code while you type or on-save.

Hooks (optional)

Husky is used for Git hooks. We will set up a pre-commit hook for ESLint and Prettier to ensure your code is linted before it’s committed and pushed to the remote repository. You can also use pre-push if you want.

Before we start, commit all current changes. We want to do this especially if this is a new project without any previous commits.

git add .
git commit -m"commit message"

Now, add Husky and lint-staged packages.

yarn add -D husky@next lint-staged

Now, we’ll add Husky and lint-staged to our package.json file.

Once we are done and ready to test husky, ESLint and Prettier will run on all the “staged files”. That may include files that we don't want to be linted. You can limit the scope by changing lint staged to “src/**/*.{js,jsx}” which will only lint staged files in the src directory.

You can also skip this by adding the--no-verify option when you commit.

git commit -m"eslint" --no-verify

We will now add a new script in package.json

Now, let's try it on the CLI. Start by adding the files we just modified, which will “stage” them, and run check-staged

git add .
yarn check-staged

We should see something like this. If you see lots of config files, you probably did not commit before starting this section.

yarn run v1.9.4
$ lint-staged
↓ Running tasks for *.{js,jsx} [skipped]
→ No staged files match *.{js,jsx}
✔ Running tasks for *.{js,jsx,json,md}
✨ Done in 1.15s.

Now, we’ll commit these files and husky should run lint-staged before successfully committing; which should look this.

husky > pre-commit (node v8.11.4)
↓ Running tasks for *.{js,jsx} [skipped]
→ No staged files match *.{js,jsx}
✔ Running tasks for *.{js,jsx,json,md}
[master 324e71e] added husky and lint-staged
2 files changed, 296 insertions(+), 6 deletions(-)

That's it! Now you can push your code and have fun linting. I hope this helped you.

The Code

Completed code example can be found here.