Setting up Eslint, Prettier, and Husky in your NextJs project

Photo by Tekton on Unsplash

Introduction

Software developers have preferences and style conventions when using tools to build software products. These preferences and style conventions escalate into hot arguments and debates in no time.

Developers at war over their preferred style conventions and preferences

Developer A: I prefer using spaces over tabs.
Developer B: Single quotes over double quotes any day, any time!
Developer C: Bro! who uses a light theme in this era?

These issues can be prevented by using tools such as eslint(ensures code consistency), prettier(formats your code), and husky(helps you hook into gits’ pre-commit and post-commit lifecycle).

Before committing your code, a set of rules is run against staged files to ensure that your code adheres to the rules defined in your eslint and prettier files. This check is what enforces and ensures “sanity” and maintains consistency throughout a project, especially when working with a group of developers or when people are committing code to your open source project.

Getting Started

To set up your NextJs or React project with eslint, prettier, and husky, install the following dependencies:

yarn add --dev eslint prettier husky lint-staged eslint-config-prettier

The purpose of each dependency installed:

• eslint: to ensure code quality
• prettier: to ensure that code is properly formatted according to the rules defined
• husky: makes it possible to run scripts in our package.json file on git lifecycle hooks.
• lint-staged: runs defined scripts on only staged files(git).
• eslint-config-prettier: prevents any code formatting conflicts between eslint and prettier. As we know, eslint handles both code quality and code formatting. This package disables the rule in eslint that formats code so that eslint only focuses on ensuring code quality.

Prettier Configuration:

1. Create a .prettier.json file and paste the following rules in there:

2. Create a .prettierignore file. Here, pass in the folders and files prettier should avoid when formatting your code. Below are some of the folders I ignore:

node_modules
build
dist

Eslint Configuration:

Projects like create-react-app and NextJs already have eslint preconfigured. The only thing you’ll need to do is to extend prettier in the eslint file .eslintrc.json

Reason? We want eslint to focus on code quality issues only and let prettier handle formatting our code. This is where the eslint-config-prettier package we installed earlier comes to play

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

But for projects without eslint configured, follow the steps below:

1. Initialize eslint and follow the command line prompts.

npx eslint --init

2. After following the command line prompts, a .eslintrc.json file will be created. Extend prettier there.

3. Add .eslintignore file to ignore the node_modules, build, and dist folders.

Lint-staged Configuration:

Run the command below to install and configure husky and lint-staged

npx mrm@2 lint-staged

Once lint-staged is done, it will create a script inside package.json like this:

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

Also, a .husky folder will be created. Open the pre-commit file and add the line:

yarn lint-staged

The above command will run the lint-staged script in the package.json file when committing which ensures that code is formatted according to the rules defined and that the code is free from any linting issues.

after lint-staged script runs successfully