Setting up Automatic Code Linting and Formatting in a NextJS Project

how it works

Has it ever happened to you that one guy in your team just completely ignores the proper code formatting and linting rules? If it has happened to you, here’s a quick guide for you.

One of the solutions is that we can instruct the team members to properly set up their code editors by defining a set of instructions to follow. Of course, this is not very practical as everyone has their own taste of setting up their development environment.

At the end of writing code, we all have to commit it no matter what, right? Therefore, the real solution would be to define the unavoidable actions built into the development flow. So, it makes sense to run our linter and formatter automatically before committing the code.

Here in this short guide, we will set up hooks for Prettierand ESLint to be automatically run whenever we make the commits. First of all, let’s create a new NextJSproject with TypeScript

yarn create next-app --typescript

NextJS already comes with ESLint by default, so we don’t have to install it, but we will have to install Prettier

yarn add -D prettier eslint-config-prettier

Then, create an empty config file for Prettier . You can configure as you prefer.

echo {}> .prettierrc.json

And also, create a .prettierignore file to ignore formatting for some files. Here are the usual files for a typical NextJS project.

node_modules
.next
yarn.lock
package-lock.json
public

Similarly, create a .eslintignore file for ESLint if not exists yet and put the usual files to ignore linting.

**/node_modules/*
**/out/*
**/.next/*

Now we need to add prettier to the existing ESLint config file.

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

After that, we will set up a pre-commit hook for prettier to run before each commit, so install husky and lint-staged

yarn add --dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

Now the only thing that’s left to do is to add the commands in package.json

...
"scripts": {
   "dev": "next dev",
   "build": "next build",
   "start": "next start",
   "lint": "eslint . --ext ts --ext tsx --ext js",
   "type-check": "tsc --pretty --noEmit",
   "format": "prettier --write \"**/*.{js,ts,tsx}\"",
   "prepare": "husky install"
 },
 "husky": {
   "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn run type-check"
    }
 },
 "lint-staged": {
    "*.@(ts|tsx)": [
      "yarn lint",
      "yarn format"
    ]
 },
...

To break it down, we have 3 main commands in script section lint , format , and type-check , which are for (as you guessed it) linting, formatting, and checking types. They will be run for files that have one of the file extensions: .js , .ts or .tsx.

Below scripts , we define our two husky hooks. pre-commit will be run before committing the code and pre-push will be run before we push the code to the remote repository. You can see which commands will be executed for each hook.

For lint-staged , we have set up two consecutive commands for .ts and .tsx files. First, linting will be checked followed by formatting the code which will tidy up nicely.

Conclusion

That’s it, guys. Now, code linting and formatting will be automatically run every time before we commit and push to the repository and this ensures your codebase to be consistent and tidied across all members of your team.