Lint and Prettier check with Husky and Lint-staged

Have you realized that there are things that once used, we can’t go back? Yes, things like mobile phone, laptop, travelling by plane, etc. The same thing happen in software development, i bet everyone has one or more pieces of technology that they never want to unuse. For me, they’re Typescript, Open-api-generator and Husky. I’m talking about the library, not the 🐶, but trust me, they’re both lovable :)

I.What? Why?

Husky is a small tool that helps us run desired scripts prior to the git action such as commit or push to make sure that before commit/push, all neccessary checks have been done.
At this point, you might ask: “i can run those scripts by myself”. Yes, but are you sure you wont forget (；・∀ ・)? Not to mention, when you run the scripts, you have to either re-write the file path to the files you changed/created or run them on all files and you probably wont forget to run the scripts in your 1st commit, but most likely to forget to do that on your 2nd, 3rd and several commits after that.

II.How to setup

1) What to install

• Install Eslint, this command will guide you through a series of questions to setup your eslint

npm init @eslint/config

• Install Prettier

npm install --save-dev --save-exact prettier

• Install Husky and lint-stage

npm install --save-dev husky lint-staged
npx husky install

2) Setting up

• add prepare script to package.json. So when the others pull the project, they can run prepare script to enable git hooks.
• add format script to format file with prettier.
• add lint-staged to include the scripts you want to run on changed files only.
• add lint-stage script to run desired scripts on staged files (this is 1 method to setup lint-staged command, this might not work if you use Nextjs)

package.json
{
  "scripts": {
    "prepare": "husky install" ,
    "format": "prettier . --write",
    "lint-staged": "lint-staged"
  }
  "lint-staged": {
    "**/*": [
        "npm run lint",
        "npm run format"
    ]
  }
}

• If you use yarn, it will be yarn lint, yarn format instead of npm run
• In other to use lint-staged in NextJs, you need to add .lintstagedrc.js to root folder

const path = require('path')

const buildEslintCommand = (filenames) =>
  `next lint --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`
 
const buildEslintFixCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`
 
const buildPrettierCommand = (filenames) =>
  `prettier --write ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' ')}`
 
module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand, buildEslintFixCommand, buildPrettierCommand],
}

• add git hooks pre-commit. You can add any git hooks you want, as long as it is available here. After running command, you will see pre-commit file created in husky folder

npx husky add .husky/pre-commit

• in this file, add the scripts that you want to run when you commit something. Here, i want to run lint-staged so i added npm run lint-staged

Voilà! Now everytime you commit the code, lint-staged will run, and it will run lint and format on the staged files. If you got errors, fix them, if not, you’re good to go.

With this, the project will be consistent and nothing better then consistency, right! Once again, i hope this helps.