Skip to main content

Enforcing Code Quality Standards Automatically with Husky, Lint-Staged, Prettier, and ESLint

Maintaining code quality and consistency across our codebase is paramount. This not only aids in readability and maintainability but also ensures that the development process is smooth and error-free.

Tools like Husky, Lint-Staged, Prettier, and ESLint play a crucial role in achieving these goals. By integrating these tools into our workflow, we can enforce code quality standards and ensure that all code committed to our repository meets our quality standards.

Our team was discussing many times to come up with an unified configuration for all projects in KVY. All configurations below are agreed by all team members and must be followed by all team leads in KVY.

Husky: Guarding Your Commits​

Husky is a tool that allows you to easily manage Git hooks. It enables you to run scripts before committing your code, ensuring that only code that meets your quality standards is committed. This is particularly useful for running linters and tests, preventing bad commits before they can even happen.

Setting Up Husky​

To set up Husky in your project, start by installing it as a dev dependency:

yarn add --dev husky

Then, enable Husky by running:

yarn husky install

This will create a .husky directory at the root of your project, containing the necessary hooks. After running the install command, add the following script to your package.json:

"scripts": {
  "prepare": "husky install"
}

This script will ensure that Husky is installed and configured when your project is set up in other team members' environments.

Lint-Staged: Linting Only What's Necessary​

Lint-Staged enhances the efficiency of linting by operating only on staged files. This means that before each commit, only the files that are going to be committed are checked, significantly speeding up the linting process.

Installing Lint-Staged​

To install Lint-Staged, run:

yarn add --dev lint-staged

Configuring Lint-Staged​

Create a .lintstagedrc.json file at the root of your project and configure it to match your linting needs. For instance:

{
  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]
}

Prettier: Ensuring Consistent Formatting​

Prettier is a code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules. This tool integrates well with ESLint and can be run as part of your pre-commit hooks to ensure that all committed code follows the same formatting guidelines.

Installing Prettier​

To install Prettier, run:

yarn add --dev prettier

Integrating Prettier​

After installing Prettier, create a .prettierrc file in your project root with this configurations:

{
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "printWidth": 100,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "jsxBracketSameLine": true
}

ESLint: Catching Errors and Enforcing Rules​

ESLint statically analyzes your code to quickly find problems. It is highly configurable, allowing you to define your own rules or extend existing ones.

Install ESLint and necessary plugins​

To install ESLint and the necessary plugins, run:

yarn add --dev eslint eslint-plugin-prettier eslint-config-prettier

Where:

  • eslint is the core ESLint library.
  • eslint-plugin-prettier is a plugin that allows ESLint to run Prettier as an ESLint rule.
  • eslint-config-prettier is a configuration that disables all ESLint rules that are unnecessary or might conflict with Prettier.

You may add other plugins and configurations depending on your project's needs. Please contact your team lead before adding any other plugins or configurations.

Configuring ESLint​

After installing ESLint and the necessary plugins, create an .eslintrc file (or update it if it already exists) in your project root

Our team has discussed this carefully, and we agree to come up with the configuration below:

{
  "extends": [
    // ... other configurations, example: 'next/core-web-vitals'
    "prettier"
  ],
  "plugins": [
    // ... other plugins
    "prettier"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/no-array-index-key": "error",
    "react/no-children-prop": "error",
    "react/no-unescaped-entities": "error",
    "react/jsx-uses-react": "error",
    "react/jsx-fragments": "error",
    "react/jsx-no-undef": "error",
    "react/self-closing-comp": "error"
  }
}

Bringing It All Together: Pre-commit Hooks with Husky and Lint-Staged​

With Husky and Lint-Staged set up, you can now create a pre-commit hook that runs ESLint and Prettier on your staged files.

To create a pre-commit hook, first, create a file named pre-commit in the .husky directory at the root of your project:

touch .husky/pre-commit

Then, add the following to your Husky configuration:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged

This script will run lint-staged according to the rules defined in your .lintstagedrc.json file, applying ESLint and Prettier to your staged files.

Conclusion​

Integrating Husky, Lint-Staged, Prettier, and ESLint into our team workflow can significantly improve the quality and consistency of your codebase. All team lead in KVY must follow the configuration above to ensure the consistency of the codebase.