DEV Community

Edson Luiz Ribeiro Rodrigues
Edson Luiz Ribeiro Rodrigues

Posted on

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
  },
Enter fullscreen mode Exit fullscreen mode

Start your project

# js project
$ yarn create next-app staticcheck_jsproject

# ts project
$ yarn create next-app staticcheck_tsproject --ts
Enter fullscreen mode Exit fullscreen mode

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)

Improve the basic

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

{
  "extends": ["next", "next/core-web-vitals"]
}
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  1. Create an .prettierrc file at the root of your project and define some rules. See more options
{
    "trailingComma": "none",
    "semi": false,
    "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode
  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
  ]
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
   ]
 }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
  ]
}
Enter fullscreen mode Exit fullscreen mode

I hope this was helpful.

Discussion (1)

Collapse
moy2010 profile image
moy2010

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

Thanks for sharing!