The CLI tool to fix huge number of ESLint errors

Quick fixes, per rule.
Run eslint --fix, disable per line, apply suggestions, and more!

Motivation

The default ESLint output contains a lot of useful messages for developers, such as the source of the error and hints for fixing it. While this works for many use cases, it does not work well in situations where many messages are reported. For example, when introducing ESLint into a project, or when making big changes to the eslint.config.js of a project. In these situations, the output of ESLint can be quite large, making it difficult for developers to analyze the output. It is also difficult for the developer to fix messages mechanically, because messages of many rules are mixed up in the output.

In such the above situation, I think two things are important:

• Show a summary of all problems (called "warnings" or "errors" in ESLint) so that the whole picture can be easily understood
  • Showing the details of each problem will confuse developers.
• Provide an efficient way to fix many problems
  • eslint --fix is one of the best ways to fix problems efficiently, but it auto-fixes all rule problems at once.
  • Depending on the rule, auto-fix may affect the behavior of the code, so auto-fix should be done with care.
  • Therefore, it is desirable to provide a way to auto-fix in smaller units than eslint --fix.

So, I created a tool called eslint-interactive which wraps ESLint. This tool groups all problems by rule and outputs formatted number of problems per rule. In addition to the breakdown of problems per rule, it also outputs the number of fixable problems and other hints to help developers fix problems.

It also supports the following actions in addition to eslint --fix. All actions can be applied for each rule:

• Display details of lint results
• Run eslint --fix
• Disable per line (// eslint-disable-next-line <rule-name>)
• Disable per file (/* eslint-disable <rule-name> */)
  • Add disable comments (// eslint-disable <rule-name>) per file.
• Convert error to warning per file (/* eslint <rule-name>: 1 */)
• Apply suggestions (via Programmable API only)
  • Select one of the applicable suggestions and apply it. (What's suggestions?)
  • Users can write JavaScript code to programmatically select the suggestion to be applied.
  • See Programmable API documentation for details.
• Make forcibly fixable and run eslint --fix (via Programmable API only)
  • This feature makes forcibly un-fixable problems fixable, and applies them.
  • See Programmable API documentation for details.

Requirements

• Node.js ^20.19.0 || ^22.12.0 || >=24.0.0
• ESLint >=9.0.0
  • If you use ESLint <8.45.0, use eslint-interactive@^10.
• Flat config (eslint.config.js)
  • If you use legacy config (.eslintrc.*), use eslint-interactive@^12.

Installation

Warning

Global installation of eslint-interactive is not recommended and is only supported on a best-effort basis. It is recommended to install eslint-interactive locally. See FAQ.

$ # For npm
$ npm i -D eslint-interactive
$ npx eslint-interactive --help

$ # For yarn
$ yarn add -D eslint-interactive
$ yarn eslint-interactive --help

$ # For pnpm
$ pnpm add -D eslint-interactive
$ pnpm exec eslint-interactive --help

Usage

The interface of eslint-interactive is partially compatible with eslint. So, in most cases, simply replacing eslint with eslint-interactive in the command to lint (e.g. eslint --quiet ./src) will work. However, eslint-interactive is installed locally, so you need to add npx.

$ # Show help
$ npx eslint-interactive --help
eslint-interactive [...patterns]

Options:
      --help                   Show help
      --version                Show version number
  -c, --config <path>          Use this configuration, overriding config options if present
      --format <nameOrPath>    Specify the format to be used for the "Display problem messages" action
      --quiet                  Report errors only
      --cache                  Only check changed files
      --cache-location <path>  Path to the cache file or directory
      --flag <name>            Enable a feature flag (requires ESLint v9.6.0+)

Examples:
  eslint-interactive                          Lint all files in the project
  eslint-interactive src test                 Lint specified directories
  eslint-interactive 'src/**/*.{ts,tsx,vue}'  Lint with glob pattern

Programmable API

See Programmable API documentation.

Playground

https://stackblitz.com/edit/eslint-interactive-playground?file=src%2Findex.ts&view=editor

FAQ

What's suggestions?

Excerpt a quote from official ESLint documentation.

In some cases fixes aren't appropriate to be automatically applied, for example, if a fix potentially changes functionality or if there are multiple valid ways to fix a rule depending on the implementation intent. In such a case, the ESLint rule provides candidates for a fix. These are called suggestions.

Suggestion can be one or more. The user has to manually decide if that fix should be applied or which fix should be applied because automatically applying of suggestion is inappropriate. For this reason, ESLint has stated that it will not officially provide a way to automatically apply suggestion (ref). Instead, tools such as vscode-eslint allow users to apply suggestions manually (ref).

Why is global installation not recommended?

eslint is installed locally in most projects. In such a case, if eslint-interactive is installed globally, it will be installed in a different space than eslint. The space separation makes some resources of eslint-interactive inaccessible from eslint and may break them (ref: #77). For this reason, local installation is recommended. Global installation is supported, but only on a best-effort basis.

Is global installation prohibited?

No. eslint-interactive does not prohibit global installation. Global installation is supported on a best-effort basis because it has the advantage of saving installation effort. However, it is not recommended and users should be aware that some issues may arise.

If the global installation does not work, you can send a patch by pull request. However, whether the patch will be accepted depends on the case.

What's the difference from eslint-nibble?

A tool similar to eslint-interactive is eslint-nibble. Both tools solve the same problem, but eslint-interactive has some features that eslint-nibble does not have. For example, eslint-interactive prints the number of fixable problems per rule, while eslint-nibble does not. Also, eslint-interactive has various tricks to speed up the cycle of auto-fixing per-rule, but eslint-nibble auto-fixes once and terminates the process every time, so it is not as fast as eslint-interactive.

I think these features are very important to solve the aforementioned problem. At first, I thought of implementing these features in eslint-nibble, but it required a major rewrite of the code, so I implemented it as a new tool eslint-interactive. Although eslint-interactive is a tool independent of eslint-nibble, it is influenced by the ideas of eslint-nibble and inherits some of its code. That's why you can find the names of @IanVS and others in the license of eslint-interactive.

Thanks, @IanVS.

What's the difference from suppress-eslint-errors?

suppress-eslint-errors is an excellent tool to add comments for disable mechanically. Just like eslint-interactive, it allows you to add disable comments for each rule and leave the purpose of disable as a comment. There is no functional difference between the two, but there is a difference in the API used to insert the comments.

suppress-eslint-errors uses jscodeshift to insert comments. jscodeshift modifies the file in parallel, so suppress-eslint-errors has the advantage of being able to insert comments faster. However, jscodeshift cannot reuse the AST of ESLint, so you need to reparse the code in jscodeshift. This means that you have to pass jscodeshift the information it needs to parse your code (parser type, parser options). In fact, suppress-eslint-errors requires --extensions and --parser command line option. Normally, users specify the parsing options in eslint.config.js, so passing these options may seem cumbersome. Also, due to the difference in the way ESLint and jscodeshift parse, it may not be possible to insert comments correctly.

On the other hand, eslint-interactive uses ESLint.outputFixes to insert comments. It uses ESLint's API to do everything from parsing the code to inserting the comments, so it works as expected in many cases. Also, eslint-interactive will parse the code using the parsing options specified in eslint.config.js. Therefore, comments can be inserted without any additional command line options. By the way, comment insertion is slower than suppress-eslint-errors because, unlike suppress-eslint-errors, it cannot modify files in parallel. However, this limitation may be improved when ESLint supports parallel processing in the near future.