javascript 如何配置 ESLint 以与 PhpStorm 一起使用以自动修复 ESLint 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32547463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to configure ESLint to work with PhpStorm to autofix ESLint errors
提问by lukasz
I've defined some rules in ESLint config file. This file is attached in
我在 ESLint 配置文件中定义了一些规则。该文件附在
Preferences
->Languages and Frameworks
->JavaScript
->Code Quality Tools
->ESLint
And I see it works fine because in code editor every rule is shown when there appear to be an error which doesn't match them. Also when I use "Code inspector"
而且我认为它工作正常，因为在代码编辑器中，当出现与它们不匹配的错误时，会显示每个规则。同样，当我使用“代码检查器”时
Code
-> Inspect code
Inspector finds all the errors and shows them in little window at the bottom. There is also a possibility to apply autofix to each of this errors but when I try to do this I got redirected to ESLint config page in PhpStorm preferences section. It looks like this:
Inspector 找到所有错误并将它们显示在底部的小窗口中。也有可能对每个错误应用自动修复，但是当我尝试这样做时，我被重定向到 PhpStorm 首选项部分中的 ESLint 配置页面。它看起来像这样：
there should be a link which should fix that automaticly when I click on it but instead there is a link which just opens ESLint config popup window:
应该有一个链接，当我点击它时应该自动修复它，但有一个链接只是打开 ESLint 配置弹出窗口：
How can I get this to work fine? I've been trying to look in PhpStorm docs about it but no success.
我怎样才能让它正常工作？我一直在尝试查看 PhpStorm 文档，但没有成功。
回答by Nitin Nain
I haven't found a way to do this in any IDE (PhpStorm/Atom/Sublime/WebStorm). However you can fix some issues through the command line by running eslint --fix.
我还没有找到在任何 IDE（PhpStorm/Atom/Sublime/WebStorm）中执行此操作的方法。但是，您可以通过运行eslint --fix.
You need a basic understanding of ESLint, to follow these steps:
您需要对 ESLint 有基本的了解，然后按照以下步骤操作：
1) Install ESlint:
1）安装ESlint：
Globally:
全球：
npm i -g eslint eslint-config-airbnb
(Airbnb's style guide is extensively used - http://nerds.airbnb.com/our-javascript-style-guide/.)
（Airbnb 的风格指南被广泛使用 - http://nerds.airbnb.com/our-javascript-style-guide/。）
OR locally (preferrable):
或本地（首选）：
Installing locally is preferable if you've a local node_modulesdirectory. Run this command from your Project Directory:
如果您有本地node_modules目录，最好在本地安装。从您的项目目录运行此命令：
npm i --save-dev eslint eslint-config-airbnb
(You can then run eslintfrom ./node_modules/.bin/eslint)
（然后您可以eslint从 运行./node_modules/.bin/eslint）
2) Create a .eslintrcfilein your project directory with the following line.
2）.eslintrc使用以下行在您的项目目录中创建一个文件。
{ "extends": "airbnb" } // We installed airbnb's style guide in step 1.
3) Backup/Commit your source code files
3) 备份/提交你的源代码文件
Backup the files you want to lint; the following command might change several lines.
备份你想要 lint 的文件；以下命令可能会更改几行。
4) Run eslint --fixas follows:
4) 运行eslint --fix如下：
eslint --fix path/to/file.js
eslint --fix path/to/files/*.jsx
This will fix 10s of errors in your files!
这将修复文件中的 10 多个错误！
5) If eslint --fixstops at some error, fix it manually then run again
5）如果eslint --fix在某个错误处停止，手动修复它然后再次运行
I noticed that eslint --fixdoesn't fix all erros in one go. i.e. it will sometimes run till a particular point in file, then stop at errors it can't handle automatically.
我注意到这eslint --fix并不能一次性解决所有错误。即它有时会运行到文件中的特定点，然后在无法自动处理的错误处停止。
If you remove the topmost issue that eslintis stuck on, running the command again fixes more errors in the file. Rinse, Repeat.
如果您删除了最重要的问题，eslint再次运行该命令会修复文件中的更多错误。冲洗，重复。
--
——
eslint added some new features in 2015. Hope the '--fix' option becomes better in future: http://eslint.org/blog/2015/09/eslint-v1.5.0-released
eslint 在 2015 年添加了一些新功能。希望 '--fix' 选项在未来变得更好：http://eslint.org/blog/2015/09/eslint-v1.5.0-released
回答by shalini
You can add shortcut to run ESLINT . I have done same setting for phpstrom .Working fine at my end
您可以添加快捷方式来运行 ESLINT 。我对 phpstrom 做了同样的设置。在我的最后工作正常
Refer:https://medium.com/@jm90mm/adding-prettier-to-webstorm-a218eeec04d2
参考：https: //medium.com/@jm90mm/adding-prettier-to-webstorm-a218eeec04d2
Also for autosave fix ,you can refer this
另外对于自动保存修复，你可以参考这个
https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461
https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461
