如何配置 ESLint 自动修复保存在 WebStorm/PHPStorm 中？

Question

我正在尝试在 WebStorm 中创建一个自定义文件观察器，它将在保存时自动修复 ESLint 错误。 在Settings > Tools > File Watchers文件观察器中，我创建了一个具有以下设置的新文件观察器：

• 文件类型： Any
• 适用范围： All places
• 程序： /home/user/Projects/todo-app/eslint-autofix.sh
• 参数：空白
• 要刷新的输出路径：空白
• 其他选项 > 工作目录： /home/user/Projects/todo-app

eslint-autofix.sh:

#!/usr/bin/env bash

./node_modules/.bin/eslint --fix

然后我犯了一个 ESLint 错误并按Ctrl + S保存。 弹出以下错误：

/home/user/Projects/todo-app/eslint-autofix.sh
/usr/bin/env: ‘node’: No such file or directory

如何修复此错误？

Answer 1

根据这篇文章，设置应该如下：

• 文件类型：任何（或 JavaScript）
• 范围：项目文件
• 程序：$ProjectFileDir$/node_modules/.bin/eslint
• 参数：--fix $FilePath$
• 要刷新的输出路径：$FileDir$

Answer 2

在WebStorm 2020.1.1 ，有一个名为Run eslint --fix on save的复选框。

另见：

• https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_activate

Answer 3

只是为了扩展 jstice4all 和 gotjosh 的解决方案：

对于某些项目，我能够将 FileWatcher 设置为 ESLint，但它无法与插件扩展一起使用：'@react-native-community'

@react-native-community/eslint-config#overrides[2]:
    Environment key "jest/globals" is unknown

事实证明， @react-native-community 插件需要从项目文件夹本身运行才能加载环境变量，而文件观察器从 node_module/eslint 路径运行。 为了让它工作，我必须添加以下配置：

• 工作目录：$ProjectFileDir$

截图配置