Arrange a Subsequent.js undertaking with ESLint, Prettier, Husky, and Lint Staged by Aman Mittal

Engaged on a big codebase, having a constant type information is essential. Inconsistencies can happen through the use of single quotes as a substitute of double quotes, tabs as a substitute of areas, and many others.

A pre-commit hook can tackle this downside. Earlier than making a brand new commit, a pre-commit hook can examine for sorts in TypeScript recordsdata, run a lint check, use prettier to format recordsdata, and many others. All of that is doable through the use of:

• ESLint
• Prettier
• Husky
• Lint Staged

I will share my private and minimal configuration that I’ve not too long ago began utilizing for Subsequent.js tasks on this publish.

🔗

Creating a brand new Subsequent.js undertaking with TypeScript enabled is finished by working the next command from a terminal:

npx create-next-app@newest --typescript
cd next-typescript-config

After the undertaking listing generated, navigate inside it.

The --typescript flag prepares the Subsequent.js app with all of the configuration required to allow and use TypeScript. As well as, it comes with a tsconfig.json file:

1{
2  "compilerOptions": {
3    "goal": "es5",
4    "lib": ["dom", "dom.iterable", "esnext"],
5    "allowJs": true,
6    "skipLibCheck": true,
7    "strict": true,
8    "forceConsistentCasingInFileNames": true,
9    "noEmit": true,
10    "esModuleInterop": true,
11    "module": "esnext",
12    "moduleResolution": "node",
13    "resolveJsonModule": true,
14    "isolatedModules": true,
15    "jsx": "protect",
16    "incremental": true
17  },
18  "embody": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19  "exclude": ["node_modules"]
20}

The flag additionally installs the required dependencies and kind definitions put in as devDependencies discovered within the bundle.json file.

🔗

Linting is a way to examine the code for syntax errors. It additionally permits checking for code type points. All of the checking occurs primarily based on the outlined algorithm and plugins.

Since Subsequent.js model 11, it comes with ESLint integration out-of-the-box. Which means that Subsequent.js installs devDependencies like eslint and eslint-config-next and creates an eslintrc.json file. Subsequent.js makes use of the subsequent lint command to catch ESLint errors.

The eslint-config-plugin by Subsequent.js staff accommodates pre-defined algorithm. You should not have to outline them explicitly. These guidelines embody some frequent and finest practices in React ecosystem.

For instance, the eslint-config-plugin makes use of eslint-plugin-react-hooks and eslint-plugin-react as dependencies, and the really useful algorithm from each these packages are already included. This takes care of putting in the usual eslint packages for React apps within the Subsequent.js app after which manually including them as plugins.

Subsequent.js ESLint plugin additionally consists of finest practices round Core Net Vitals and accessibility.

🔗

Prettier is a code formatter that ensures that every one the code recordsdata comply with a constant styling. If you’re into Net growth, chances are high you’re already utilizing it.

ESLint guidelines in Subsequent.js already include some code formatting guidelines. To override them and provoke your private prettier config, begin by putting in the next devDependencies:

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

To do Prettier work with ESLint, add "prettier" to the extends and the plugins array within the .eslintrc.json file.

1{
2  "extends": ["next/core-web-vitals", "prettier"],
3  "plugins": ["prettier"]
4}

Within the extends array, ensure that prettier is the final merchandise in order that whenever you outline your Prettier configuration that takes priority over different configurations which will have their manner of formatting code.

You can even outline the guidelines on this file. For instance, every time there’s a code formatting problem with any of the recordsdata in my Subsequent.js app, I prefer it to be uncovered as a warning quite than an error.

1{
2  "extends": ["next", "next/core-web-vitals", "prettier"],
3  "plugins": ["prettier"],
4  "guidelines": {
5    "prettier/prettier": "warn",
6    "no-console": "warn"
7  }
8}

Create a brand new file .prettierrc and add a customized Prettier configuration:

1{
2  "singleQuote": true,
3  "trailingComma": "none",
4  "arrowParens": "keep away from",
5  "proseWrap": "protect",
6  "quoteProps": "as-needed",
7  "bracketSameLine": false,
8  "bracketSpacing": true,
9  "tabWidth": 2
10}

Additionally, add a .prettierignore file to disregard formatting on sure directories and recordsdata:

1.subsequent
2.cache
3bundle-lock.json
4public
5node_modules
6subsequent-env.d.ts
7subsequent.config.ts
8yarn.lock

🔗

Husky is a utility that enables linting and testing when committing the code.

To set it up, initially, set up the bundle as a dev dependency:

To allow Husky run:

Within the subsequent step, I’ll configure Husky’s pre-commit hook after organising lint-staged.

🔗

The lint-staged bundle permits linting staged git recordsdata. It additionally checks for the modified recordsdata as a substitute of the entire supply code.

You may configure lint-staged to not lint recordsdata in markdown or json format. You can even separate ESLint checks primarily based on a file’s extension.

Create a .lintstagedrc.js file on the root of the Subsequent.js app and add the next snippet:

1module.exports = {
2  
3  '**/*.(ts|tsx)': () => 'yarn tsc --noEmit',
4
5  
6  '**/*.(ts|tsx|js)': filenames => [
7    `yarn eslint ${filenames.join(' ')}`,
8    `yarn prettier --write ${filenames.join(' ')}`
9  ],
10
11  
12  '**/*.(md|json)': filenames => `yarn prettier --write ${filenames.be a part of(' ')}`
13};

After organising the lint-staged configuration, open the /.husky/pre-commit file and add the next pre-commit hook:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged

To check it, I’ve modified the /pages/_app.tsx file and eliminated the reference of AppProps. This can return a kind error when committing this file:

🔗

That is all for organising ESLint, Prettier, Husky, and Lint Staged with a minimal configuration. You may increase the configuration for any instruments as per your wants or modify the pre-commit hook.