Question

当我保存文件时，我想运行eslint，并修复了eslint可以解决的任何问题。

我知道这可以通过运行应用--fix参数使用命令行来完成。

我也知道Intellij-IDEA直接与Eslint集成;但是，Intellij-IDEA使用stdin进行集成，这意味着你不能将--fix作为参数传递。

Answer 1

通过几个快速步骤，您可以设置一个文件监视器，它将对您保存的文件运行eslint --fix。

一步一步：

安装File Watcher plugin
导航至Preferences > Tools > File Watchers并创建新的文件观察器
选择File type: JavaScript
（可选）为观察者应用范围。例如，我选择了$ProjectFileDir$/apps/web/src/并以递归方式包含了所有内容。
选择要运行的程序。安装node，npm和eslint指向eslint bin。在我的项目中，路径为$ProjectFileDir$/apps/web/node_modules/eslint/bin/eslint.js
使用以下参数运行eslint，并在保存的文件--fix $FileName$上使用修复选项
将工作目录指定为 $FileDir$ 。

名称，然后保存文件监视器。然后，编辑您所使用的目录中的JavaScript文件，并观察您的许多错误和警告消失！谢谢Eslint！

注意：如果您发现Intellij-IDEA询问您是否要加载文件更改而不保存知识（这会让人烦恼），因为IDE正在后台保存。您可以取消选中Immediate file synchronization以获得更好的编辑体验。

Answer 2

您最好使用原始的第三方ESLint plugin，它确实支持快速修复。有关详细信息，请参阅project README。

Answer 3

情况已经改变。您不需要外部插件。现在对ESlint提供了本机支持：

旧（已弃用）：

ESlint插件：https://plugins.jetbrains.com/plugin/7494-eslint/

从Intellij 14开始，Jetbrains将基于该插件的插件捆绑到IDE发行版中。有什么区别？该插件支持Intellij 13和其他版本，--fix选项，快速修复和其他微小差异。在打开问题之前，请确保您正在参考这一章。

来源：https://github.com/idok/eslint-plugin

新功能（本机支持）

1。 “自动ESLint配置”

“自动ESLint配置”选项对我来说也很好。 IDE扫描具有package.json依赖项的eslint文件并运行它。（您可以在一个项目中使用不同的ESLint版本。）

ESLint配置是从最近的.eslintrc.x（例如.json）配置文件中自动检测到的，或者是从package.json读取的

默认情况下，PhpStorm使用项目node_modules文件夹中的ESLint包和存储当前文件的文件夹中的.eslintrc.*配置文件。如果在当前文件夹中没有找到.eslintrc.*，则PhpStorm将在其父文件夹中寻找一个直到项目根目录的文件。

如果您有多个{Let {1}}文件，其中ESLint被列为依赖项，则PhpStorm将为每个package.json启动一个单独的进程并处理其下的所有内容。这样，您可以将特定的ESLint版本或一组特定的插件应用于Monorepo或具有多个ESLint配置的项目中的每个路径。

2。手动配置ESLint

您还可以手动设置Node解释器+ ESLint软件包+ package.json配置

使用ESLint代码样式规则

您可以从ESLint配置中自动导入一些代码样式规则：

在.eslintrc配置文件中上下文菜单
选择“ 应用ESLint代码样式规则”
在“ 事件日志”面板中检查输出

配置检查

从“警告”工具提示中选择“配置检查...”
在“代码质量工具”下激活“ ESLint”
“问题”面板现在列出了ESLint + / default）IDE发现的问题

您可能希望禁用IDE的默认规则，并用足够的ESLint规则替换它们。否则，您可能会在列表中看到2个针对同一问题的问题。

查看检查结果

“代码”>“按名称运行检查...”>输入“ eslint”
您可以“自动修复”问题，也可以修复整个文件（如果规则可以自动修复）
突出显示已解决的问题

运行/调试配置[可选]

或者，您可以设置NPM脚本运行配置：

在安装ESLint之后，将脚本节添加到.eslintrc
```
package.json
```
在“ npm”面板中，您应该从"scripts": { "eslint": "eslint" }中看到“ eslint”脚本。
您可以将其设置编辑为例如仅对当前文件运行ESLint：
现在您可以运行NPM脚本：

来源：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 4

就我而言，我的项目是由vue-cli创建的

将此行添加到package.json

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

这里有3种方法可以做

单击左侧的绿色箭头
单击运行按钮，如下图所示
在终端运行中：npm run lintfix

全部。

Answer 5

您可以使用Save Actions Plugin

安装

IDE（推荐）从您的IDE（Intellij IDEA，PyCharm等）安装它：

“文件>设置>插件>浏览存储库...>搜索'保存   操作”>“代码工具”类别”

JetBrains插件存储库可从JetBrains插件存储库获得该插件的所有版本。您可以下载

jar并将其添加到您的IDE中（不会考虑进行更新）：

“文件>设置>插件>从磁盘安装插件...”

其中一个选项是“ 重新格式化文件 ”-> 启用/禁用格式设置（在“文件>设置>代码样式”中配置）。有关更多选项，请参见“仅重新格式化已更改的代码”

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

5 个答案: