November 15, 2024
6 mins read

Ship Consistent, High-Quality Code: A Complete Guide to ESLint, Prettier, Husky, Lint-Staged

  • web development
  • frontend
  • Programming

Writing quality and consistently clean code is the best practice for every software engineer who wants to be in the league of 10x engineers or a software engineering team collaborating on projects. Imagine a world where you never have to worry about misaligned brackets, inconsistent naming conventions, forgotten semicolons, non-descriptive commit messages, or committing some buggy code to be merged. A world where your entire team’s code looks like it was written by a single, exceptionally tidy developer.

In this article, we will explore tools like Eslint, Prettier, Husky, and others to create a seamless code quality pipeline. We’ll dive into the benefits, workflow, setup, and configurations that will help you and your team write better, more consistent code without thinking about it.

The importance of code quality and consistency

  • Improved readability and maintainability: well-structured and consistently formatted code is easier to understand, modify, and debug without spending so much time on pair programming or code reviews.
  • Enhance developer experience: Working with clean and uniformly formatted code significantly boosts the developer's productivity with predefined safeguards and rules.
  • Reduce errors and bugs: Consistent code style, predefined formatting, and automated checkers minimize the risk of introducing bugs in your code or even pushing them to your code repository.
  • Better team collaboration: It simplifies the understanding of code written by team-mates because it’s uniformly formatted and also well-communicated commit messages to understand code changes.

Understanding the tools

  • ESLint: ESLint is a javascript static code analysis tool for automatically checking and reporting incorrect patterns, such as syntax errors, formatting issues, and inconsistencies in javascript code. Think of it as a grammar checker for your code.
  • Prettier: Prettier automatically formats your code to adhere to a specific style guide. It’s an opinionated tool, meaning it makes changes to code formatting to ensure consistency across the codebase. It supports many languages and integrates with most code editors.
  • Husky: Husky is a tool that makes it easy to use Git hooks in your project. Git hooks are scripts that run automatically at specific points in the Git lifecycle. husky provides automation for running tasks like Linters, formaters, or tests every time you make a commit, ensuring that your code meets quality standards before it ever gets merged into the main branch.
  • Lint-staged: This works in conjunction with Husky to optimize the use of Git hooks by running Linters on the files that are staged for commit, rather than the entire codebase. By limiting the linting process to only staged files, lint-stage reduces the time it takes to run pre-commit hooks. this makes your development workflow faster.

The Development Workflow

An overview of the development workflow for your projects when you set up the tools to ensure consistent code quality and standards across your project.

  • Initialize your project or just set it up with your code editor if it's an already existing project.
  • Install the tools using `npm` or `yarn` and create a configuration based on your project needs( a detailed installation and configuration guide is written below).
  • While writing your code the linting rules apply to every code and check for incorrect patterns or syntax errors.
  • At every edit and save you perform on codebase prettier automatically format your code to ensure consistency.
  • When you perform a git-commit action the husky pre-commit gets triggered to run checks such as linting codebase, running tests, ensuring the commit message is formatted correctly, or running your CI/CD pipeline for deployment.
  • To ensure efficiency and fast workflow lint-staged runs Linters and other scripts only on the files that have been staged instead of running Linters on the entire codebase every time when it was just only few files that have changes.

Installation and configuration

For the installation and configuration, we will be using a vanilla javascript project and the same can also work for frameworks and libraries e.g. reactJs, NextJs, VueJs, and NodeJs.

Initialize your project:

You can skip this part if you already have an existing setup and just want to add the tools to your project.

npm init -y

#Or with Yarn

yarn init -y

Install ESLint:

ESLint setup is really straightforward and simple.

npm install eslint --save-dev

#Or with Yarn

yarn add eslint --dev

This command will guide you through the creation of an `.eslintrc` configuration file.

npx eslint --init

Initialize ESLint:

during the setup, you will be prompted to choose your configuration style (javascript, JSON, YAML) and specify your preferences for features like ECMAScript modules, React, TypeScript, etc.

Install Prettier:

npm install prettier --save-dev

##Or with Yarn:

yarn add prettier --dev

Create a Prettier configuration File:

In your project root, create a `.prettierrc` file with your desired formatting rules, Here’s an example:

{
 "printWidth": 80,
 "singleQuote": true,
 "trailingComma": 'es5'
}

Add a Prettier Ignore File:

Create a `.prettierignore` file in the root directory of your project to specify files and directories that Prettier should ignore (just like `.gitignore`):

node_modules/
build/

Configure ESLint to work with Prettier:

Install ESLint Prettier Integration: Install the necessary plugins to integrate Prettier with ESLint.

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

Update Your ESLint Configuration:

Modify your `.eslintrc` to include Prettier as a plugin and extend the Prettier config.

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Install Husky


npm install husky --save-dev

Enable Git Hooks:

Initialize Husky to enable Git hooks in your project:

npx husky install

Add a Pre-commit Hook:

Add a pre-commit hook to automatically lint and format code before committing.


npx husky add .husky/pre-commit "npx lint-staged"

Install lint-staged


npm install lint-staged --save-dev

Configure lint-staged:

Add a lint-staged configuration in your `package.json` or create a separate `.lintstagedrc` file


{
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Test and verify your setup

  • Make a Test Commit: Modify a JavaScript file in your project, stage the changes, and commit them. The pre-commit hook should automatically trigger, running ESLint and Prettier on your staged files.
  • Check for Errors: If there are any linting or formatting errors, they will be displayed, and the commit will be blocked until the issues are resolved.

Conclusion

Shipping great code isn’t just about writing perfect lines. It’s about using smart tools that catch mistakes and keep everyone on the same page. By using stuff like ESLint, Prettier, Husky, lint-staged, and Commit-lint, you’re basically setting up a safety net for your code.

These tools do the boring stuff for you — they check for errors, make sure your code looks neat, and keep things consistent across the team. This way, you can focus on solving the tricky problems instead of worrying about little details.

As a 10x engineer, you want to push out high-quality work without wasting time. These tools help you do just that. They catch silly mistakes before they cause trouble, keep your code tidy, and make it easier for everyone to work together.

By using these tools, you’re not just making your own work better — you’re helping your whole team be more productive. It’s like having a bunch of mini-coders watching your back, so you can focus on the big picture.