如何配置ESLint以使用PhpStorm自动修复ESLint错误

Question

我在ESLint配置文件中定义了一些规则。 此文件附在

Preferences
  ->Languages and Frameworks
     ->JavaScript
       ->Code Quality Tools
         ->ESLint

我认为它工作正常，因为在代码编辑器中，当出现与它们不匹配的错误时，会显示每个规则。 当我使用“代码检查员”时

Code
  -> Inspect code

Inspector找到所有错误并在底部的小窗口中显示它们。 还有可能对每个错误应用自动修复，但是当我尝试这样做时，我被重定向到PhpStorm首选项部分中的ESLint配置页面。 它看起来像这样：

应该有一个链接，当我点击它时应该自动修复它，但是有一个链接只打开ESLint配置弹出窗口：

我怎样才能让它正常工作？ 我一直试图查看PhpStorm文档，但没有成功。

Answer 1

我还没有找到在任何IDE（PhpStorm / Atom / Sublime / WebStorm）中执行此操作的方法。 但是，您可以通过运行eslint --fix通过命令行修复一些问题。

您需要对ESLint有基本的了解，才能按照以下步骤操作：

1）安装ESlint：

全球：

npm i -g eslint eslint-config-airbnb

（Airbnb的风格指南被广泛使用 - http://nerds.airbnb.com/our-javascript-style-guide/ 。）

或在本地（优先）：

如果您有本地node_modules目录，则最好在本地node_modules 。 从项目目录运行此命令：

npm i --save-dev eslint eslint-config-airbnb

（您可以再运行eslint从./node_modules/.bin/eslint ）

2）使用以下行在项目目录中创建.eslintrc文件 。

{ "extends": "airbnb" }  // We installed airbnb's style guide in step 1.

3）备份/提交源代码文件

备份你想要的文件; 以下命令可能会更改多行。

4）运行eslint --fix如下：

eslint --fix path/to/file.js

eslint --fix path/to/files/*.jsx

这将修复文件中的10个错误！

5）如果eslint --fix在某些错误时停止，请手动修复然后再次运行

我注意到eslint --fix并没有一次性修复所有错误。 即它有时会运行到文件中的特定点，然后停止它无法自动处理的错误。

如果删除了eslint卡在最上面的问题，再次运行该命令可以修复文件中的更多错误。 冲洗，重复。

-

eslint在2015年增加了一些新功能。希望' - fix'选项在未来变得更好： http ：//eslint.org/blog/2015/09/eslint-v1.5.0-released

Answer 2

您可以添加快捷方式来运行ESLINT。 我为phpstrom做了同样的设置。我的工作很好

此外，对于自动保存修复，您可以参考此