[Next.js] ESLint

Outline
Create Next.js project with TypeScript
Configure ESLint
Configure scripts
Execute ESLint
Completed

Blog list

This blog post is a series. If you want to check other blog posts of the series, see the links below.

Outline

In this blog post, I will introduce how to configure ESLint in the Next.js project based on TypeScript. ESLint is the compound language of ES(EcmaScript) + Lint(show error code), and supports to find potential errors or bugs by analyzing the source code.

ESLint official site: https://eslint.org/

You can see the full source code of this blog post on the link below.

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/4.eslint

Create Next.js project with TypeScript

To see how to configure and use ESLint in Next.js with TypeScript, execute the following command to create a new Next.js project based on TypeScript.

npx create-next-app --typescript my-app

At this time, you can see the following screen to ask whether to use ESLint or not.

? Would you like to use ESLint with this project? › No / Yes

We will use ESLint, so select Yes to proceed.

Configure ESLint

Next.js basically provides ESLint. We will configure additional settings here. Execute the following command to install the plugins required for additional settings.

npm install --save-dev eslint-plugin-import eslint-plugin-no-null eslint-plugin-storybook @typescript-eslint/eslint-plugin

And then, open the .eslintrc.json file that is the configuration file of ESLint and modify it like the following.

{
  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
  "plugins": ["@typescript-eslint", "no-null"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          ["parent", "sibling"],
          "object",
          "type",
          "index"
        ],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react", "next"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "sort-imports": [
      "error",
      {
        "ignoreCase": true,
        "ignoreDeclarationSort": true,
        "ignoreMemberSort": false,
        "allowSeparatedGroups": true
      }
    ],
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/consistent-type-imports": "error",
    "no-null/no-null": 2,
    "curly": ["error", "multi-line", "consistent"],
    "nonblock-statement-body-position": ["error", "beside"]
  }
}

Configure scripts

To use ESLint configured above, open the package.json file and add the following scripts.

"scripts": {
  ...
  "lint": "next lint",
  "lint:fix": "next lint --fix"
},

Execute ESLint

Now, execute the following command to check the contents of ESLint configured above.

npm run lint

If there is a file that violates the ESLint option set, it will be displayed as follows.

./pages/_document.tsx
1:16  Error: Member 'Head' of the import declaration should be sorted alphabetically.  sort-imports

./pages/index.tsx
3:1  Error: There should be at least one empty line between import groups  import/order
3:1  Error: `next/font/google` import should occur before import of `next/head`  import/order

Next, execute the following command to fix the violated files.

npm run lint:fix

If all files are fixed, execute the following command again to check again.

npm run lint

If all files are fixed well, you can see the following result.

✔ No ESLint warnings or errors

There are problems that are automatically fixed by ESLint, but there are also problems that are not automatically fixed. In this case, you should open the file and fix it manually.

Completed

Done! We’ve seen how to configure and use ESLint in Next.js with TypeScript. ESLint provided by Next.js is enough, but you can additionally configure it like this blog post. I hope you apply ESLint of Next.js to your project to use the unified coding style.

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.