How to improve your development experience with the ESLint extension

Linters are great tools for the development process helping you quickly find problems in your code. In the case of Javascript, ESLint has become one of the most popular tools and can be integrated into your IDE as well as one step in your continuous integration pipeline. But in addition to that you could take advantage of its extension for Visual Studio Code and improve your experience while developing. But first some considerations.

ESLint with Prettier

Along with validating syntax errors, ESLint also includes formatters to control the appearance of your code by providing a set of rules (e.g., maximum line length, semicolon). But for this purpose Prettier (a popular tool intended exclusively for formatting code) has been doing a better job: it reformats the code automatically while ESLint needs additional configuration to format some code problems. So why not use ESLint for code syntax and Prettier for code format?

For both to work together it is necessary to first decide how to run them together, as they may have conflicts. The Next.js WordPress Starter uses eslint-plugin-prettier, which makes possible to run Prettier as an ESLint rule. Additionaly, as recommended, it uses eslint-config-prettier which disables the ESLint formatting rules to avoid potential conflicts between the two. For that it is enough to install both as development dependencies

npm install --save-dev eslint-plugin-prettier eslint-config-prettier
// or
yarn add --dev eslint-plugin-prettier eslint-config-prettier

and add the plugin as the last extension to the .eslintrc.* file:

{
  "extends": ["eslint:recommended","plugin:prettier/recommended"]
}

Auto fixing on save

The Next.js WordPress Starter triggers the linting process inside the git pre-commit hook. However, wouldn’t it be nice to validate and fix quality and format code issues automatically before even trying to commit the changes? The ESLint extension for Visual Studio Code allows us to achieve that.

Before configuring the extension, it is important to make sure you have the ESLint and Prettier configuration files in the root for the sake of simplicity. This way the extension can easily find the configuration to run. Adding the files to a custom directory would require additional settings, as ESLint searches for the .eslintrc.* file from current file directory up to root.

In Visual Studio Code, to override the user settings, it is possible to add a new folder .vscode at root and inside add a file settings.json with the workspace settings. To enable auto fix feature on save, add the following:

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

The first line disables formatting on save to ensure no other code formatter takes control (e.g. Prettier extension). The second line enables ESLint fix on save. Now everytime the code is saved VSCode will automatically:

1. Fix as many issues as possible and display an underline under any problems that couldn’t be fixed
2. Format the code based on Prettier rules defined at .prettierrc.* file

Linting on Next.js 11

The new version of Next.js (11.0.0) provides an integrated ESLint experience by default. The configuration already comes with all the plugins that are typically used along with these technologies: react, react-hooks and a new set of rules specially designed for Next.js. For most cases this configuration offers everything you need without any additional action, as it is provided out-of-the-box. However as this project uses a custom configuration (to make it work with prettier) it is a good idea to extend the configuration to integrate the new rules by adding @next/next/recommended plugin inside the eslint configuration file:

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended", 
    "plugin:@next/next/recommended"
  ]
}