ReactJS – Auto Lint & Format on Git Commit with Airbnb Style Guide

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

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 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

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

{
  "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 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 allows you to add commands to run before committing. It takes advantage of the git hooks.

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:

{
  "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?

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 and Prettier 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:

{
  "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. Follow me on Twitter, I share a lot of cool stuff like this.

Subscribe to my blog via FB Messenger