Integration of eslint, prettier, husky, lint-staged, commit-lint with next js

Eslint

ESLint is a popular open-source JavaScript linting utility. It helps developers find and fix common programming errors and enforce coding styles in their codebase. Using various plugins and rules, you can configure ESLint to suit your project's specific requirements. It's commonly used in web development to maintain code quality and consistency.

Prettier

"Prettier" is a code formatting tool that helps developers maintain a consistent coding style in their projects. It supports various programming languages like JavaScript, TypeScript, HTML, CSS, and more. It automatically formats code according to predefined rules, making it more readable and consistent.

Husky

The "husky" npm package is a Git hooks manager for Node.js projects. It helps automate tasks or checks at various points in the Git workflow. You can use it to enforce code standards, run tests, or perform other actions before commits or pushes.

Lint-staged

lint-staged is a tool commonly used in web development. It runs linters on pre-committed files in a Git repository. This helps catch and fix issues before the code is committed. It's often used in conjunction with other tools like ESLint or Prettier to maintain code quality.

Commit Lint

Commit lint is a tool to enforce commit message conventions in a Git repository. It helps maintain consistency and improves collaboration

Git Hooks

Git hooks are scripts that Git executes before or after certain key events, such as committing, merging, and pushing. They allow you to customize and automate aspects of the version control process. Common hooks include pre-commit, post-commit, pre-push, etc. You can find and configure them in the .git/hooks directory of your Git repository.

Setup

For the project, setup install the next with the help of the command below or using the next js documentation

Install vscode extensions

Install Eslint and Prettier vscode extensions from the vscode extension marketplace using a browser or using vscode editor

Next JS and Eslint Setup

npx create-next-app@latest

After executing the command below go through the recommended setup to install the eslint with the next js.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Setup Prettier with eslint in the next js project

npm i -D  prettier eslint-config-prettier

After installing, open your existing ESLint configuration file (.eslintrc.json or .eslintrc.js) and add the following line:

{
  "extends": ["next/core-web-vitals", "prettier"]
}

create .prettierrc file and add the following code to implement a prettier standard

{
  "semi": true,
  "printWidth": 120,
  "singleQuote": true,
  "arrowParens": "always",
  "proseWrap": "preserve"
}

Setup husky and lint staged

Install the husky and lint staged dependency using the following above commands

npm i -D husky lint-staged

After that execute the command below to create a script that executes during the pre-commit using the git hooks

This command will install and configure husky and lint-staged depending on the code quality tools from your project's package.json dependencies, so please make sure you install (npm install --save-dev) and configure all code quality tools like Prettier and ESLint before that.

npx mrm@2 lint-staged

after exerting the script there will be an additional script in package.json which will be similar to the below

  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }

If you are using the typescript replace the code below with the code

  "**/*.{ts,js}": "eslint --cache --fix",
  "**/*.{ts,js,md}": "prettier --write"

Setup Commit lint with the next js project

Please go through this step after the installation of the husky only.

Execute the command below to install the commit lint and configure

Install

npm install -g @commitlint/cli @commitlint/config-conventional

Add hook

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

Configure

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

Conclusion

The setup next js form eslint, prettier, husky, lint-stage and commit lint is completed and you can use this in the project to maintain maintained standardized code and commits