ReactJS – Auto Lint & Format on Git Commit with Airbnb Style Guide
Tags: react, javascript, eslint, git
Published: 2019-03-02 10:42:08

---
title: ReactJS – Auto Lint & Format on Git Commit with Airbnb Style Guide
published: true
description: 
tags: react, javascript, eslint, git
canonical_url: https://coffeencoding.com/reactjs-auto-lint-format-on-git-commit-with-airbnb-styleguide/
cover_image: https://coffeencoding.com/wp-content/uploads/2019/03/react-js-lint-format-style.jpg
---

When you’re working in a team, each developer will have their own style. It’s very important to have a consistent style across all the files.

Looking at a piece of code, you shouldn’t be able to tell who wrote it 😉

With this guide, you’ll be able to set up auto linting and formatting on Git commit.

*If you’re a NodeJS developer, read this – [NodeJS – Auto Lint & Format on Git Commit with Airbnb Styleguide](https://coffeencoding.com/nodejs-auto-lint-format-on-git-commit-with-airbnb-styleguide/)*

It’s divided into 4 parts

You’ll learn

1. Setup Eslint with Airbnb Style Guide
2. Setup Formatting with Prettier
3. Auto Lint & Format on Git Commit
4. Configure VS Code for Eslint and Prettier

## Why you’ll need Linting and Formatting?
- Clean code
- Easily find errors, typos, syntax errors
- Follow the best practices
- Warning on using deprecated/harmful methods
- Have a consistent style in code across the team
- Avoid committing ‘harmful’ code like console.log
- Make PR awesome, less headache for reviewers!

## Setup Eslint with Airbnb Style Guide
[Eslint](https://eslint.org/) is a linting utility for JavaScript and JSX, with some nice rules and plugins. Anyone can write rules for Eslint. An example rule  could be “avoid using console.log()“

Luckily Airbnb has written a Style Guide for JavaScript which covers most of the best practices they use. It’s basically a collection of different rules. You can read it here – [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)


**Step 1**  – Install necessary packages by
`npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react`

**Step 2** – Create a new file `.eslintrc` at the root directory of your project and paste the following
```json
{
  "env": {
    "browser": true
  },
  "extends": ["airbnb", "prettier"]
}
```

**Step 3** – Add a new command to lint in `package.json` – `"lint": "eslint 'src/**/*.{js,jsx}' --fix"`

Now you should be able to able lint your code by running `npm run lint`. It will try to fix errors that are fixable. Otherwise will throw errors/warnings

## Setup Formatting with Prettier
While Eslint is for Linting and finding errors in the code, [Prettier](https://prettier.io/) is purely for formatting. Besides JavaScript Prettier also supports formatting json, HTML, CSS, markdown, sql, yaml, etc. Using both Eslint and Prettier is highly recommended.

**Step 1** – Install Prettier CLI package by `npm i -D prettier-eslint-cli eslint-config-prettier`

**Step 2** – Add a new command to format in `package.json` – `"format": "prettier --write 'src/**/*.{js,jsx,css,scss}'"`

Just like we did earlier you should now able to run `npm run format` to format the code using Prettier!

## Auto Lint & Format on Git Commit
Even though we’ve built commands to run lint and formatting, most of the time developers forget to run it and commit to git. You can set up npm run lint to your CI/CD so that whenever there are some errors it will fail. However, it will be really nice if we would do these checks every time when someone commits.

#### Husky and Lint-staged to rescue
[Husky](https://www.npmjs.com/package/husky) allows you to add commands to run before committing. It takes advantage of the [git hooks](https://githooks.com/).

[Lint-staged](https://www.npmjs.com/package/lint-staged) – “Run linters against staged git files”. Running Eslint and Prettier on all files on every commit will be very time-consuming. With lint-staged you can run those only on the staged files.

Install husky and lint-staged by `npm i -D husky lint-staged`

You’ll need to edit the `package.json` to configure it. Here is the full file:
```json
{
  "scripts": {
    "lint": "eslint 'src/**/*.{js,jsx}' --fix",
    "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'"
  },
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "prettier-eslint --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "eslint": "^5.15.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier-eslint-cli": "^4.7.1",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.3"
  }
}
```
We tell husky to run lint-staged on every commit. Lint-staged will run eslint, prettier, and ‘git add‘ on staged files. The last ‘git add‘ is to add the changed filed back to commit since it might be changed formatting.

#### Need to commit without these checks?
![](https://coffeencoding.com/wp-content/uploads/2019/03/git-fire-300x300.jpg)
What if there is a fire 🙂 and you try to commit? “Please remove console logs” or something like that? You tell git not to run these hooks by adding --no-verify (`git commit –m -n “Urgent commit!”`)

## Configure VS Code for Eslint and Prettier
Both Eslint and Prettier have great integrations for VS Code. It will automatically highlight errors/warnings, fix code while typing/saving, etc.

Install [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions by `ext install dbaeumer.vscode-eslint` and `ext install esbenp.prettier-vscode`

Once you’ve installed the extensions, open VS Code settings.json (Ctrl+,) file and add the following:

```json
{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "prettier.eslintIntegration": true
}
```

### Conclusion
You should now have Eslint and Prettier configured so that whenever you try to commit files, they’ll scan the files and try to fix all error, or show you the errors that are not automatically fixable. Hope you enjoyed it.

Comments below if you run into any problems or has any other feedback!

This article was initially posted in my blog [Coffee N Coding](https://coffeencoding.com). Follow me on [Twitter](https://twitter.com/gijovarghese141), I share a lot of cool stuff like this.

Subscribe to my blog via [FB Messenger](https://m.me/775189579517896/?ref=eyJ0YWdzIjpbImNhdGVnb3J5OlJlYWN0SlMiLCJtLm1lIl19)