Detailed guide on how to install ESLint, Prettier, husky and lint-staged ✍🏻

Why do you need to maintain code consistency?

Code Consistency is the uniformity of coding style in a project. Code consistency is critical when working on a large-scale project with more than 10 developers contributing. The different coding styles of every developer (whether to use single or double quote, pascal, or snake case for naming) give rise to code inconsistency. After some time, your project will become cluttered, decreasing code readability and consistency.

How can you achieve code consistency?

You can achieve code consistency by forcing coding guidelines that every developer needs to follow while coding. These guidelines can include whether to use double or single quotes and how many empty lines must be between two lines or anything you like. However, the real problem occurs even if you document all the guidelines. It is challenging for every developer to remember and follow all the guidelines correctly. ESLint, Prettier, husky and lint-staged npm packages solve this problem by giving errors and warnings while coding in your IDE.

What are ESLint, Prettier, husky and lint-staged?

Eslint is an npm package that analyzes your code to find problems and fix them automatically. It allows enforcing custom rules like whether a string should have single quotes or double quotes.

Prettier helps format the code like proper indentation, trailing commas or maximum line length. It comes as an npm package as well as VS Code extension.

Husky is a pre-commit tool that lets you run commands or scripts before committing or pushing our code to git. It makes sure to format and fix code before committing.

Lint-staged can run multiple linter on your staged file that format and fix most of the file before committing. Lint-staged can run as a pre-commit script that formats your staged file before committing by husky.

How do you set up ESLint, Prettier, husky and lint-staged?

Before diving into setup and integration, let us see the flow of how they all work together.

If you run git commit -m <message> on your terminal. Husky will run the pre-commit script like the npm run lint-staged. Lint-staged runs all linter one by one on staged files that fix and format all the code. After all these checks and formatting, husky creates the commit on git.

Pre-requisites

1. React Typescript or Javascript project created using create-react-app script.
2. Familiarity with npm and package.json scripts.
3. Knowledge of git commands.

Installation

To set up eslint, you need to run the below command that will ask questions about coding rules and install all dependencies.

npm init @eslint/config

Now, you have to install other npm packages using the below command.

npm i -D husky lint-staged prettier eslint-config-prettier

Create three new files with the name .prettierrc.yml, .eslintignore and .prettierignore in the root directory.

Copy the below lines to your .eslintignore and .prettierignore file

node_modules
public
build
dist

Copy the below config file to .prettierrc.yml

printWidth: 100
tabWidth: 2
singleQuote: true
semi: true
jsxSingleQuote: true
quoteProps: as-needed
trailingComma: none
bracketSpacing: true
bracketSameLine: false

Configuration

Initialize the husky pre-commit script using the below command.

npx husky-init

Add the lint-staged script command in package.json file in the root layer.

"lint-staged": {
    "*.{js, jsx,ts,tsx}": [
      "eslint --quiet --fix"
    ],
    "*.{json,js,ts,jsx,tsx,html}": [
      "prettier --write --ignore-unknown"
    ]
  },

Open .husky/pre-commit file and change the command to npm run lint-staged

Testing

It is time to test everything. Try committing using your terminal.

git add .
git commit -m "initial commit"

Husky will run the pre-commit script as lint-staged and run all the linter that format and fix all the staged files whenever you try to commit.

Bonus tip: Sometimes, there is a situation when you do not want to run husky pre-commit. You can use the git flag --no-verify in your commit command to ignore any pre-commit script and directly commit into git.

Ex- git commit -m "intitial commit" --no-verify ignores the pre-commit script.

Conclusion

In this article, we saw why it is important to maintain code consistency in a project and how to achieve code consistency by enforcing coding guidelines. We also learned how to set up the ESLint, Prettier, husky, and lint-staged in a react project. Husky will ensure to run the linter, which formats and fixes errors in your staged files.

Github repository