DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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.

Top comments (3)

Collapse
 
dahelg profile image
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,
      },
  },
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
edsonluiz profile image
Edson Luiz Ribeiro Rodrigues Author

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

Collapse
 
moy2010 profile image
moy2010

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

Thanks for sharing!

Join 900k+ Developers on DEV

You'll see more of the content that brought you here.