Static check with next 11 (Prettier, ESLint)

Edson Luiz Ribeiro Rodrigues — Wed, 23 Jun 2021 17:18:09 +0000

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"]
}

Enable eslint:recommended. See all rules

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

Maybe improve accessibility rules? See all rules

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

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.

Install packages for prettier

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

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

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

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.

DEV Community: Edson Luiz Ribeiro Rodrigues