logo标签列表

如何在Intellij-IDEA、Webstorm或其他JetBrains IDE上运行eslint --fix来修复JavaScript代码？

intellij-ideaeslint
11
当我保存一个文件时，我希望能够运行 eslint 并让它修复任何可以修复的问题。
我知道可以使用命令行通过应用 --fix 参数来实现。
我也知道 Intellij-IDEA 直接与 Eslint 集成；但是，Intellij-IDEA 使用 stdin 进行集成，这意味着无法作为参数传递 --fix。
我在网上找不到任何关于如何做到这一点的信息，所以我想问/回答来帮助下一个人。我还要补充说，Intellij IDEA 应该默认集成这个功能 :) - Aaron Greenlee
5个回答
14
通过简单几步，您可以设置一个文件监视器，在保存文件时运行 eslint --fix。
步骤如下：
  • 安装文件监视器插件
  • 导航到Preferences > Tools > File Watchers并创建一个新的文件监视器
  • 选择文件类型为：JavaScript
  • 可选地，为监视器应用作用域。例如，我选择了$ProjectFileDir$/apps/web/src/并递归包含了其所有内容。
  • 选择要运行的程序。如果已经安装了 node、npm 和 eslint，则指向 eslint 的二进制文件位置。在我的项目中，路径是：$ProjectFileDir$/apps/web/node_modules/eslint/bin/eslint.js
  • 应用以下参数以在保存文件时运行带有修复选项的 eslint：--fix $FileName$
  • 将工作目录指定为：$FileDir$。
命名并保存文件监视器。然后，在您选择的目录中编辑 JavaScript 文件，观察许多错误和警告消失！感谢 Eslint！
注意：如果你发现 Intellij-IDEA 在没有保存的情况下询问是否加载文件更改（这很烦人），那是因为 IDE 正在后台保存。您可以取消选择Immediate file synchronization，以获得更好的编辑体验。
图片如下：enter image description here
这个方法对我来说几乎有效。当我尝试时，WebStorm找不到我的Node解释器，可能是因为我正在使用nvm？我只需进入“环境变量”菜单，并将PATH设置为我的Node可执行文件的位置，对我来说是~/.nvm/versions/node/v6.9.1/bin/node。您可以使用which node找到您的位置。 - Cam Jackson
1
非常感谢，我只做了一个修改，将“范围”放在“当前文件”上，因为这就是你想要的，监视文件并在保存时修复它。 - 0x1ad2
11
事情已经改变了。您不需要外部插件。现在原生支持ESlint：

旧版（已弃用）：

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

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

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

新功能（原生支持）

enter image description here

1. "自动ESLint配置"

"自动ESLint配置"选项对我也很有效。IDE会扫描包含eslint依赖项的package.json文件并运行它。(您可以在一个项目中使用不同的ESLint版本)。

ESLint配置会自动检测最近的.eslintrc.x(例如.json)配置文件，或从package.json中读取。

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

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

2. 手动ESLint配置

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

应用ESLint代码风格规则

你可以从你的ESLint配置中自动导入一些代码风格规则：

  1. 在你的.eslintrc配置文件上下文菜单内

  2. 选择"应用ESLint代码风格规则"

    enter image description here

  3. 在"事件日志"面板中查看输出

配置检查

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

    enter image description here

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

    enter image description here

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

    enter image description here

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

查看检查结果

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

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

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

    enter image description here

运行/调试配置 [可选]

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

  1. After ESLint installation, add a script section to package.json

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

  2. In "npm" panel, you should see the "eslint" script from your package.json.

  3. You can edit its settings to e.g. run ESLint for current file only:

    enter image description here

  4. Now you can run the NPM script:

    enter image description here

源代码: 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

1
1
你可以使用Save Actions Plugin。
安装：
IDE（推荐）：从你的IDE（Intellij IDEA，PyCharm等）中安装： "File > Settings > Plugins > Browse repositories... > Search 'Save Actions' > Category 'Code tools'"
JetBrains插件仓库：所有版本的插件都可以从JetBrains插件仓库下载。您可以下载jar并将其添加到IDE中（您不会得到更新）： "File > Settings > Plugins > Install plugin from disk..."
其中一个选项是"Reformat file"，->启用/禁用格式化（在“文件>设置>代码样式”中配置）。有关更多选项，请参见“仅重新格式化已更改的代码”。
0

在我的情况下，我的项目是由vue-cli创建的

将此行添加到您的package.json文件中

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

这里有三种方法可以做到：

  1. 点击左侧的绿色箭头 enter image description here
  2. 按下如下图所示的运行按钮 enter image description here
  3. 在终端中运行：npm run lintfix

就是这样。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接