如何在 Intellij-IDEA、Webstorm 和其他 JetBrains IDE 中对我的 JavaScript 运行 eslint --fix？

Question

When I save a file, I would like to run eslint, and have it fix any issues that eslint can fix.

I know this can be accomplished using the command line by running applying the --fix argument.

I also know that Intellij-IDEA has integration with Eslint directly; however, Intellij-IDEA uses stdin for it's integration which means you can't pass --fix as an argument.

Answer 1

With a few quick steps you can setup a file watcher that will run eslint --fix on the files you save.

Step by step:

• Install the File Watcher plugin
• Navigate to Preferences > Tools > File Watchers and create a new File Watcher
• Choose File type: JavaScript
• Optionally, apply a scope for the watcher. For example, I chose $ProjectFileDir$/apps/web/src/ and included all of it's contents recursively.
• Choose the program to run. With node, npm, and eslint installed point to the eslint bin. In my project, the path was $ProjectFileDir$/apps/web/node_modules/eslint/bin/eslint.js
• Apply the following arguments to run eslint with the fix option on the file that was saved --fix $FileName$
• Specify the working directory as $FileDir$ .

Name, and save the File Watcher. Then, edit a JavaScript file in the directory you scoped and watch many of your errors and warnings go away! Thanks Eslint!

Note: If you find Intellij-IDEA asking if you want to load file changes without you saving know (which gets annoying) it's because the IDE is saving in the background. You can uncheck Immediate file synchronization to have a better editing experience.

Answer 2

Things have changed. You won't need external plugins. There is now native support for ESlint:

Old (Deprecated):

ESlint Plugin: https://plugins.jetbrains.com/plugin/7494-eslint/

As of Intellij 14, a plugin based on this one was bundled into the IDE release by Jetbrains. What's the diffrence? This plugin supports Intellij 13 and other versions, --fix option, quick fixes and other minor differences. Please make sure you are referring to this one before opening an issue.

source: https://github.com/idok/eslint-plugin

---

New (Native support)

1. "Automatic ESLint configuration"

The "Automatic ESLint configuration" option works fine for me, too. The IDE scans for package.json files with eslint dependencies and run it. (You could use different ESLint versions in one project).

ESLint config is auto detected from the nearest .eslintrc.x (eg .json ) config file, or read from the package.json

By default, PhpStorm uses the ESLint package from the project node_modules folder and the .eslintrc.* configuration file from the folder where the current file is stored. If no .eslintrc.* is found in the current file folder, PhpStorm will look for one in its parent folders up to the project root.

If you have several package.json files with ESLint listed as a dependency, PhpStorm starts a separate process for each package.json and processes everything below it. This lets you apply a specific ESLint version or a specific set of plugins to each path in a monorepo or a project with multiple ESLint configurations.

2. Manual ESLint configuration

You can also set the Node interpreter + ESLint package + .eslintrc config manually

---

Apply ESLint Code Style Rules

You can auto-import some code style rules from your ESLint config:

1. Inside your .eslintrc config file context menu

2. Select " Apply ESLint Code Style Rules "

   

3. Check output in " Event Log " panel

---

Configure Inspections

1. From "Warnings" tooltip select "Configure Inspections..."

   

2. Activate "ESLint" under "Code quality tools"

   

3. The "Problems" panel now lists ESLint issues AND (default) IDE problems

   

You might want to disable IDEs default rules by and replace them with adequate ESLint rules. Otherwise you might see 2 problems for the same issue in the list.

---

View Inspection Results

1. "Code" > "Run Inspection by Name..." > type "eslint"

2. You can "auto fix" problems, or fix the entire file (if rule can be fixed automatically)

3. Fixed problems are highlighted

   

---

Run/Debug Configuration [optional]

Alternative, you can set up a NPM script run configuration:

1. After ESLint installation, add a script section to package.json

   "scripts": { "eslint": "eslint" }

2. In "npm" panel, you should see the "eslint" script from your package.json .

3. You can edit its settings to eg run ESLint for current file only:

   

4. Now you can run the NPM script:

   

Source: https://www.jetbrains.com/help/phpstorm/2020.2/eslint.html?utm_campaign=PS&utm_medium=link&utm_source=product&utm_content=2020.2#ws_js_eslint_activate

Answer 3

You better use the original third-party ESLint plugin , it does support quick fixes. See project README for details.

Answer 4

You can use a Save Actions Plugin

Installation

IDE (recommended) Install it from your IDE (Intellij IDEA, PyCharm, etc.):

"File > Settings > Plugins > Browse repositories... > Search 'Save Actions' > Category 'Code tools'"

JetBrains plugin repository All versions of the plugin are available from the JetBrains plugin repository. You can download the

jar and add it to your IDE (you won't get updates thought):

"File > Settings > Plugins > Install plugin from disk..."

One of the options is " Reformat file " -> Enable / disable formatting (configured in "File > Settings > Code Style"). See "Reformat only changed code" for more options

Answer 5

in my case is my project was created by vue-cli

add this line to your package.json

"lintfix": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs",

here are 3 ways you can do

1. Click on the green arrow on the left side
2. Click on run button as the image below
3. In terminal run: npm run lintfix

that all.