Setting Up Husky, ESLint, and Prettier in a Node.js Application For Your Team

Introduction

When creating an application with a team, commit messages are often overlooked, for example when we create feature a then push the code to the remote repository with the commit “add module a” or sometimes if there is a minor commit message the commit message is just “updated” 😆.

So that it looks less consistent, here I will try to share a little about how to implement the commit rule that I apply in my office, namely at Logique.

The tools used are Husky, then there are additional uses of Eslint and Pretier so that the code checking and formatting are all uniform.

Husky is a tool used to manage Git hooks (such as pre-commit, pre-push, etc.) in a project:

• Run a specific script before commit/push
• Prevent committing non-standard code (e.g. unformatted or containing linting errors)

ESLint is a linter for JavaScript/TypeScript code, Its function is:

• Checking for code errors (bugs) or inconsistent styles.
• Can be set using configuration (.eslintrc)
• Helps maintain code quality and consistency

Prettier is a code formatter, its functions:

• Automatically organize code layout (formatting)
• Doesn’t focus on “right/wrong” like ESLint, but more on writing consistency (indentation, spacing, quotes, etc.)

Let’s Practice

Create a new folder with the name husky for example, go to the command line then initial the project using the command.

pnpm init

After successful initiation, next install several development mode packages with this command.

pnpm add husky commitizen eslint @commitlint/cli @commitlint/config-conventional @eslint/js globals typescript-eslint lint-staged prettier -D

After successfully adding, change the package.json file to look like this.

{
 "name": "husky-demo",
 "version": "1.0.0",
 "description": "",
 "main": "test.ts",
 "scripts": {
  "preinstall": "rm -rf .husky && pnpm setup-husky",
  "commit-rule": "echo 'pnpm commitlint --edit $1' > .husky/commit-msg",
  "setup-husky": "husky init && echo 'npx --no-install lint-staged' > .husky/pre-commit && pnpm commit-rule",
  "prepare": "husky"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "husky": {
  "hooks": {
   "pre-commit": "lint-staged"
  }
 },
 "lint-staged": {
  "**/*.ts": [
   "eslint --fix",
   "prettier --write"
  ]
 },
 "devDependencies": {
  "@commitlint/cli": "^19.8.1",
  "@commitlint/config-conventional": "^19.8.1",
  "@eslint/js": "^9.27.0",
  "commitizen": "^4.3.1",
  "eslint": "^9.27.0",
  "globals": "^16.1.0",
  "husky": "^9.1.7",
  "lint-staged": "^16.0.0",
  "prettier": "^3.5.3",
  "typescript-eslint": "^8.32.1"
 }
}

You can see that there are new additions in the scripts, husky, and lint-staged sections, these are configurations for husky, eslint and prettier to run in the husky command hooks.

Next, create a new file with the file name .commitlintrc.json and enter the following code.

{
 "extends": ["@commitlint/config-conventional"],
 "rules": {
  "type-enum": [
   2,
   "always",
   [
    "ci",
    "bug",
    "task",
    "chore",
    "docs",
    "ticket",
    "feat",
    "fix",
    "perf",
    "refactor",
    "revert",
    "enhac"
   ]
  ]
 }
}

Pay attention to the ci, bug task etc and so on sections. These are commit rules which must include the message, for example, the type is a bug or what.

Next, create a new file with the file name .gitignore

node_modules/

Next, create a new file with the file name .prettierignore

node_modules/
package-lock.json
package.json

Next, create a new file with the file name .prettierrc.json

{
 "singleQuote": false,
 "semi": true,
 "trailingComma": "none"
}

You can read the prettier rules here https://prettier.io/docs/configuration

Next, create a new file with the file name eslint.config.mjs

import pluginJs from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{ts}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];

After all the configurations are complete, let’s try starting the simulation, create a new file with the file name test.ts

console.log('Hello World')

const a = 1
const b = 2
const c = a + b

console.log(c)

Then type this command to setup Husky.

pnpm install

husky configuration

Now we try to simulate a commit with an invalid case or one that does not comply with the rules. Oh yes, prepare the repository first, it can be on GitHub, Gitlab or Bitbucket.

commit not match

If it appears like the image above, it means the configuration is not correct. Now we try the true case or commit that matches the rule.

Now try doing git add . and git commit -m “chore: feature sample”

commit accordingly

If it appears as above, the commit rule is correct, there are no commit rule errors and you can also pay attention to the test.ts file.

before

after

What was previously using a single quote will be changed in the format by Prettier to a double quote, and you can see that code that does not use a semicolon will automatically have a semicolon.

So far, how is it, is it easy to understand 😍 ?

In my office, Logique uses several more complex prettier rules to ensure a uniform code style, and there are several additions for unit test integration before pushing to the remote repository.

GitHub - firmanJS/husky-demo

Hopefully, my friends can understand this so far. Please try to develop it further to suit your needs.

That’s all I can share with my friends, I hope it’s useful, happy coding 🚀