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

Posted 2023-03-27

【中文标题】如何配置 ESLint 以与 PhpStorm 一起使用以自动修复 ESLint 错误

【英文标题】：How to configure ESLint to work with PhpStorm to autofix ESLint errors

【发布时间】：2015-12-09 10:21:09

【问题描述】：

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

中

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

我发现它运行良好，因为在代码编辑器中，当出现与它们不匹配的错误时，每个规则都会显示。另外当我使用“代码检查器”时

Code
  -> Inspect code

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

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

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

【问题讨论】：

您是否检查过您输入的路径是否有效？例如。如果路径不好，也会在 NetBeans 中弹出。如果是，您可能应该提交错误报告。 intelliJ 的人往往有很好的支持恕我直言。

ESLint 是一个第三方工具； IDE 只是具有很好的集成，允许在 IDE 窗口中显示该工具报告的所有问题，其方式与内置（IDE 原生）检查工作类似。 3rd 方工具报告的问题不会映射到内置检查——它们是完全独立的东西。我不是 100% 确定，但考虑到 ESLint 适用于整个文件，没有办法只修复 1 个错误实例...

什么进程会为你做自动修复？ ESLint 不能自动修复错误，至少不是 jet。如您所见here，它在 v. 2 的愿望清单上。无论如何，您可能想看看fixmyjs gulp 插件。 Here 是有关 fixmyjs 的更多信息。

@DavidDomain 在更改 ESLint 配置中的一些规则后，我有很多事情要解决，我想自动化这个过程，仅此而已:) LazyOne 实际上 ESLint 由 PhpStorm 原生支持，与其他工具一样JSHint 或 JSLint。那些其他工具与检查员配合得很好，让他进行自动修复，这也显示在 PhpStorm 文档中。 m02ph3u5 路径是有效的，因为 IDE 在我编辑文件时使用这些规则，当我尝试在检查模式下使用它时它就不起作用

这不是您问题的答案，但 atom 的插件 (linter-eslint) 可以在您保存文件时自动修复。

【参考方案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 目录，则最好在本地安装。从您的项目目录运行此命令：

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

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

2) 在您的项目目录中创建一个.eslintrc 文件，使用以下行。

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

3) 备份/提交您的源代码文件

备份您要 lint 的文件；以下命令可能会更改几行。

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

【讨论】：

Atom 的 linter-eslint 现在可以自动修复保存。

【参考方案2】：

您可以添加快捷方式来运行 ESLINT 。我为 phpstrom 做了同样的设置。在我的最后工作正常

参考：https://medium.com/@jm90mm/adding-prettier-to-webstorm-a218eeec04d2

对于自动保存修复，你可以参考这个

https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461