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

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

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

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

Answer 2

仅扩展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