https://github.com/mizdra/eslint-interactive
The CLI tool to fix huge number of ESLint errors
https://github.com/mizdra/eslint-interactive
eslint javascript
Last synced: about 1 month ago
JSON representation
The CLI tool to fix huge number of ESLint errors
- Host: GitHub
- URL: https://github.com/mizdra/eslint-interactive
- Owner: mizdra
- License: mit
- Created: 2020-12-19T10:08:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-28T12:34:26.000Z (over 1 year ago)
- Last Synced: 2025-04-11T14:28:48.917Z (12 months ago)
- Topics: eslint, javascript
- Language: TypeScript
- Homepage:
- Size: 3.02 MB
- Stars: 397
- Watchers: 3
- Forks: 9
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-eslint - eslint-interactive - The CLI tool to fix huge number of ESLint errors. (Tools / Testing Tools)
- fucking-awesome-eslint - eslint-interactive - The CLI tool to fix huge number of ESLint errors. (Tools / Testing Tools)
README
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 `)
- Disable per file (`/* eslint-disable */`)
- Add disable comments (`// eslint-disable `) per file.
- Convert error to warning per file (`/* eslint : 1 */`)
- Apply suggestions (via [Programmable API](./docs/programmable-api.md) only)
- Select one of the applicable suggestions and apply it. ([What's _suggestions_?](#whats-suggestions))
- Users can write JavaScript code to programmatically select the suggestion to be applied.
- See [Programmable API documentation](./docs/programmable-api.md#applySuggestions) for details.
- Make forcibly fixable and run `eslint --fix` (via [Programmable API](./docs/programmable-api.md) only)
- This feature makes forcibly un-fixable problems fixable, and applies them.
- See [Programmable API documentation](./docs/programmable-api.md#makeFixableAndFix) 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](#why-is-global-installation-not-recommended).
```console
$ # 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`.
```console
$ # Show help
$ npx eslint-interactive --help
eslint-interactive [...patterns]
Options:
--help Show help
--version Show version number
-c, --config Use this configuration, overriding config options if present
--format Specify the format to be used for the "Display problem messages" action
--quiet Report errors only
--cache Only check changed files
--cache-location Path to the cache file or directory
--flag 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](./docs/programmable-api.md).
## 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](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
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](https://github.com/eslint/rfcs/tree/64b2511da6f2c10e1692671315459eb916aea53f/designs/2019-suggestions#:~:text=Unlike%20fixes%2C%20suggestion%20will%20not%20expose%20a%20new%20API%20function)). Instead, tools such as [`vscode-eslint`](https://github.com/microsoft/vscode-eslint) allow users to apply suggestions manually ([ref](https://github.com/microsoft/vscode-eslint/pull/814#issuecomment-587011529)).
### 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](https://github.com/mizdra/eslint-interactive/issues/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](https://github.com/IanVS/eslint-nibble)?
A tool similar to `eslint-interactive` is [eslint-nibble](https://github.com/IanVS/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](https://github.com/IanVS) and others in [the license of `eslint-interactive`](https://github.com/mizdra/eslint-interactive/blob/main/LICENSE).
Thanks, [@IanVS](https://github.com/IanVS).
### What's the difference from [suppress-eslint-errors](https://github.com/amanda-mitchell/suppress-eslint-errors)?
[suppress-eslint-errors](https://github.com/amanda-mitchell/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`](https://github.com/facebook/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`](https://eslint.org/docs/developer-guide/nodejs-api#-eslintoutputfixesresults) 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.