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

Question

当我保存文件时,我想运行eslint,并让它修复任何可以修复的问题.

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

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

Answer 1

事情变了。您不需要外部插件。现在有对 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 使用项目文件夹中的 ESLint 包node_modules和.eslintrc.*存储当前文件的文件夹中的配置文件。如果.eslintrc.*在当前文件夹中找不到，PhpStorm 将在其父文件夹中查找，直到项目根目录。

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

2. 手动ESLint配置

.eslintrc您还可以手动设置 Node 解释器 + ESLint 包 + config

应用 ESLint 代码样式规则

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

1. .eslintrc在配置文件上下文菜单中

2. 选择“应用 ESLint 代码样式规则”

   

3. 检查“事件日志”面板中的输出

配置检查

1. 从“警告”工具提示中选择“配置检查...”

   

2. 激活“代码质量工具”下的“ESLint”

   

3. “问题”面板现在列出了 ESLint 问题和（默认）IDE 问题

   

您可能希望禁用 IDE 默认规则并将其替换为适当的 ESLint 规则。否则，您可能会在列表中看到同一问题的 2 个问题。

查看检查结果

1. “代码”>“按名称运行检查...”> 输入“eslint”

2. 您可以“自动修复”问题，或修复整个文件（如果规则可以自动修复）

3. 已修复的问题突出显示

   

运行/调试配置[可选]

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

1. ESLint 安装后，添加脚本部分package.json

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

2. 在“npm”面板中，您应该看到package.json.

3. 您可以编辑其设置，例如仅针对当前文件运行 ESLint：

   

4. 现在您可以运行 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 2

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

一步步:

• 安装File Watcher插件
• 导航到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
• 应用以下参数以使用已保存文件上的fix选项运行eslint --fix $FileName$
• 将工作目录指定为$FileDir$.

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

注意:如果您发现Intellij-IDEA询问您是否要在不保存知识的情况下加载文件更改(这会让人讨厌),这是因为IDE正在后台保存.您可以取消选中Immediate file synchronization以获得更好的编辑体验.