Install Eslint

ESLint is a powerful JavaScript linter that helps identify and fix code quality issues and potential bugs. It enforces coding standards by analyzing your code against customizable rules, ensuring consistency and best practices. With its extensive plugin ecosystem, ESLint supports various frameworks, libraries, and coding styles, making it an essential tool for maintaining clean and reliable code.

ESLint is automatically installed when you create a new Next.js project using the automatic generation tool.

You just need to customize the ESLint configuration file based on your needs.

1. Custom ESLint config file

I recommend this config file, all configs base on my experiences, just update eslint.config.mjs file:

ts
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    ignorePatterns: ["node_modules/", "dist/", "*.config.js"],
    rules: {
      "no-console": ["warn", { allow: ["warn", "error"] }],
      "jsx-a11y/no-onchange": "off",
      "react/react-in-jsx-scope": "off",
      "react/display-name": "off",
      "react/prop-types": "off",
      "react/jsx-key": ["error", { checkFragmentShorthand: true }],
      "@typescript-eslint/explicit-function-return-type": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-unused-vars": ["error", { caughtErrors: "none" }],
      "@typescript-eslint/no-empty-object-type": "off",
      "@typescript-eslint/no-unused-expressions": "off",
      "jsx-a11y/anchor-is-valid": [
        "warn",
        {
          components: ["Link"],
          specialLink: ["hrefLeft", "hrefRight"],
          aspects: ["invalidHref", "preferButton"],
        },
      ],
      "react/self-closing-comp": [
        "error",
        {
          component: true,
          html: true,
        },
      ],
      "no-template-curly-in-string": "error",
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "react/no-danger": "error",
    },
  },
];

export default eslintConfig;

Note that, you can add all files or folders which you want the ESlint ignore checking.

json
{ "ignorePatterns": ["node_modules/", "dist/", "*.config.js"] }

2. Run checking command

When you create a new NextJS project automatically, on the package.json you can see the lint command:

json
{
  "scripts": {
    "lint": "next lint"
  }
}

This command will check all Eslint errors on your source code:

bash
yarn lint

For example, if you have the console.log in your source code, when you run the lint command above on VS code terminal, you can see the output like that:

shell
tuanh@VNNOT02369:~/me/build2earn-next15 (main)$ yarn lint
yarn run v1.22.19
$ next lint

./app/page.tsx
4:3  Warning: Unexpected console statement.  no-console

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules
Done in 1.64s.

You can see the output have one waring about the console.log which you setup on the eslint.config.mjs file.