Complete guide to ESLint, Prettier, husky and lint-staged

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

ShashwatNautiyal / eslint-prettier-react-template

This project is a template project for Eslint + Prettier + Husky + Lint Staged + React + Typescript.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you…

View on GitHub

Comments

[Andreas Riedmüller]

Hi, I don't think you should run it like that because it runs simultaneously and could cause problems: github.com/lint-staged/lint-staged...

Also there is a space before your first jsx that might cause problems.

It should be like this:

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