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

Question

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

• 文件类型：Any
• 范围：All places
• 计划：/home/user/Projects/todo-app/eslint-autofix.sh
• 参数：空白
• 要刷新的输出路径：空白
• 其他选项＆gt;工作目录：/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

根据this文章，设置应如下所示：

• 文件类型：任何
• 范围：项目文件
• 程序：./ 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 $

Screenshot Config