Static check with next 11 (Prettier, ESLint)

Visual Studio Code

First things first, configure your VSCode and add needed plugins.

• Install ESLint plugin for VSCode.
• 🚫 Prettier plugin for VSCode is not needed.
• Add this configuration on your VSCode Settings:

  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

Start your project

# js project
$ yarn create next-app staticcheck_jsproject

# ts project
$ yarn create next-app staticcheck_tsproject --ts

Know what NEXT delivers

Next is shiped with some ESLint configurations out of the box. The project will be created with this ESLint rules

• eslint-plugin-react
  • plugin:react/recommended
• eslint-plugin-react-hooks
  • plugin:react-hooks/recommended
• eslint-plugin-next
  • plugin:@next/next/recommended
• eslint-plugin-jsx-a11y (not present in documentation, but searching in node_modules seems to be present)
  • alt-text: this seems to be the only present rule, see more about this rule

Improve the basic

The basic configuration can be found at the root of the project, in .eslintrc file.

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

1. Enable eslint:recommended. See all rules
   

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

2. Maybe improve accessibility rules? See all rules
   

   {
     "extends": [
       "eslint:recommended",
       "plugin:jsx-a11y/recommended",
       "next", 
       "next/core-web-vitals"
     ]
   }
   

3. Inform your environment (I need to investigate in node_modules if env is needed)
   

   {
     "env": {
       "browser": true,
       "es2021": true,
       "node": true
     },
     "extends": [
       "eslint:recommended",
       "next", 
       "next/core-web-vitals"
     ]
   }
   

Code formatter time. Prettier, fix this.

Now your project is very colorful, it looks like carnaval in Brazil, many red and blue squiggles (fix it soon, please 🙏🏽), but we need to take care of the code format.

1. Install packages for prettier

$ yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

1. Create an .prettierrc file at the root of your project and define some rules. See more options

{
    "trailingComma": "none",
    "semi": false,
    "singleQuote": true
}

1. Let ESLint know who the chef is in the format.

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "next", 
    "next/core-web-vitals",
    "plugin:prettier/recommended" // always at the end
  ]
}

Now your code will be formated when you save any file.

For Typescript projects

To Lint your TypeScript codebase is very simple, we need a parser and a plugin, but we have two options to achieve this.

1. Not documentation based.

The eslint-config-next, shipped with all next11 installation, takes care of the parser, we just need to install and configure the plugin.

• Install.

$ yarn add -D @typescript-eslint/eslint-plugin

• Configure: add plugin:@typescript-eslint/recommended.

  {
     "env": {
     "browser": true,
     "es2021": true,
     "node": true
   },
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "next", 
     "next/core-web-vitals",
     "plugin:prettier/recommended" // always at the end
   ]
 }

2. Documentation based.

Using built-in parser, provided by next, we don't have control about parser version, and acording docs of @typescript-eslint/eslint-plugin.

It is important that you use the same version number for @typescript-eslint/parser and @typescript-eslint/eslint-plugin.

• Install parser and plugin (this will install latest version)

$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

• Configure parser @typescript-eslint/parser and plugin plugin:@typescript-eslint/recommended (I haven't done enough tests to know whether parserOptions object is needed, you can try without it)

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next", 
    "next/core-web-vitals",
    "plugin:prettier/recommended" // always at the end
  ]
}

I hope this was helpful.

Comments

[Helge Drews]

Very helpful! I think in next@^11 the "next/core-web-vitals" already extends the "next" config, so you don't need to put it in the array.
You can see this in node_modules/@next/eslint-plugin-next/lib/index.js when you're searching for 'core-web-vitals' in your next project:

// ...
'core-web-vitals': {
      plugins: ['@next/next'],
      extends: ['plugin:@next/next/recommended'],
      rules: {
        '@next/next/no-sync-scripts': 2,
        '@next/next/no-html-link-for-pages': 2,
      },
  },

By the way, at the moment you need to pin eslint to "7.32.0", because the version 8 has breaking changes and throws an error.

[Edson Luiz Ribeiro Rodrigues]

My apologies for the delay in responding. I am so thankful for your tip, especially about the version.

[moy2010]

Interesting! Didn't know you could leverage on eslint for improving accesibility in your code.

Thanks for sharing!