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 Style Guide
It’s divided into 4 parts
You’ll learn
- Setup Eslint with Airbnb Style Guide
- Setup Formatting with Prettier
- Auto Lint & Format on Git Commit
- 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-
Step 2 – Create a new file .eslintrc at the root directory of your project and paste the following
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 npm run lint
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
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:
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 can 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:
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 ran into any problems or has any other feedback!
