Start Clean Next Project.md

Start a clean Next.js project with ESLint and Prettier

Configure eslint

Add @typescript-eslint/eslint-plugin

yarn add --dev @typescript-eslint/eslint-plugin

Tip

Learn more @typescript-eslint/eslint-plugin here

Update .eslintrc.json

// .eslintrc.json
{
  "plugins": ["@typescript-eslint"],
  "extends": "next/core-web-vitals",
  "rules": {
    "prefer-const": "warn",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error"
  }
}

---

Configure Prettier

Prettier and more

yarn add -D prettier eslint-config-prettier prettier-plugin-tailwindcss @trivago/prettier-plugin-sort-imports

Tip

Learn more these libraries

1. Prettier
2. eslint-config-prettier
3. prettier-plugin-tailwindcss
4. @trivago/prettier-plugin-sort-imports

Edit .prettierrc.json

// .prettierrc.json
{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "importOrder": [
    "^react$",
    "^(next|next/.*)$",
    "<THIRD_PARTY_MODULES>",
    "@/(.*)",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "plugins": [
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ],
  "pluginSearchDirs": false
}

• OPTIONAL: create a VSCode setting to auto-fix errors on save

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "editor.formatOnSave": true, // this will automatically format your code on save
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

---

Husky: Checking for errors, linting and formatting on commit

Add husky

yarn add -D husky

Tip

Learn more Husky

Enable husky

yarn husky install

Important

This will create a husky folder on the root of the project

Add the git hook

yarn husky add .husky/pre-commit "yarn tsc --noEmit && yarn eslint . && yarn prettier --write ."

Important

This will create a pre-commit file on .husky folder on the root of the project

---

Add lint-staged

yarn add -D lint-staged

Tip

Learn more lint-staged

Create a .lintstagedrc.json

// .lintstagedrc.json
{
  "**/*.(ts|tsx|js)": ["eslint --fix", "prettier --write"],
  "**/*.(md|json)": "prettier --write"
}

Now, update the .husky/pre-commit file with the content below

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged

---

Configure Jest (optional)

Add Jest and more libs

yarn add -D jest @testing-library/jest-dom @testing-library/react eslint-plugin-testing-library eslint-plugin-jest-dom @types/jest

Tip

Learn more these plugins

1. jest
2. eslint-plugin-testing-library
3. eslint-plugin-jest-dom
4. @testing-library/jest-dom
5. @testing-library/react
6. @types/jest

Create the jest.config.js on the root of your project

// jest.config.js
const nextJest = require('next/jest');
const createJestConfig = nextJest({
  dir: './',
});
const customJestConfig = {
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
};
module.exports = createJestConfig(customJestConfig);

Now add "jest --bail --findRelatedTests --passWithNoTests" to the .lintstagedrc.json file

{
  "**/*.(ts|tsx|js)": [
    "eslint --fix",
    "prettier --write",
    "jest --bail --findRelatedTests --passWithNoTests"
  ],
  "**/*.(md|json)": "prettier --write"
}