Code consistency is the uniformity of the coding style in a project. Code editing tools like ESLint, Prettier, Husky and lint-staged track errors and provide warnings to ensure code consistency.
This is critical when working on a large-scale project with more than 10 developers. The different coding styles of every developer, whether they use single or double quote, pascal or snake case to name a few, lead to code inconsistency. Over time, your project will become cluttered, decreasing code readability and consistency.
ESlint, Prettier, Husky and Lint-Staged Explained
ESLint, Prettier, Husky and lint-staged are a collection of code editing tools that track errors and ensure code consistency.
- ESLint is an npm package that reviews the code and automatically enforces customer rules.
- Prettier helps format the code, fixing formatting errors.
- Husky allows users to run commands before committing them to Git.
- Lint-staged enables multiple linters to run on staged files pre-commit.
You can achieve code consistency by creating and enforcing coding guidelines that every developer needs to follow. These guidelines can include rules like whether to use double or single quotes and how many empty lines must be between two lines. However, even if you document these guidelines, it’s challenging for every developer to remember and follow all the rules correctly. Enter ESLint, Prettier, husky and lint-staged node package managers (npms).
What Are ESLint, Prettier, Husky and Lint-Staged?
ESLint is a npm package that analyzes your code to find problems and fix them automatically. It allows users to enforce custom rules like whether a string should have single quotes or double quotes.
Prettier helps format the code following settings 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 linters 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 to Set Up ESLint, Prettier, Husky and Lint-Staged
Before diving into setup and integration, let’s see 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 linters 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.
1. Pre-Requisites
- React TypeScript or JavaScript project created using create-react-app script.
- Familiarity with
npmandpackage.jsonscripts. - Knowledge of Git commands.
2. 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/configNext, you have to install other npm packages using the command below.
npm i -D husky lint-staged prettier eslint-config-prettierCreate 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: false3. Configuration
Initialize the Husky pre-commit script using the below command.
npx husky-initAdd 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.
4. Testing
It’s 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.
Sometimes, you may 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.
For example: git commit -m "intitial commit" --no-verify ignores the pre-commit script.
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.
Frequently Asked Questions
What is the difference between Husky and lint-staged?
Husky is a pre-commit tool that lets you run commands or scripts before committing them to Git. Lint-staged is a package that runs all linters one-by-one on staged files that fix and format all the code. The tools work together. Once lint-staged completes its check, Husky creates the commit on Git.
2. How do you use Husky with lint-staged?
Here’s how to use Husky with lint-staged. First, initialize Husky with npx husky-init. Then, 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"
]
},
Then, open .husky/pre-commit file and change the command to npm run lint-staged.
