web-dev-qa-db-ja.com

WebStorm / PHPStormでの保存時にESLint自動修正を構成する方法

保存時にESLintエラーを自動修正するWebStormでカスタムファイルウォッチャーを作成しようとしています。 Settings > Tools > File Watchers次の設定で新しいFile Watcherを作成しました：

  • ファイルの種類：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

このエラーを修正する方法は？

node.jsintellij-ideaphpstormwebstormeslint
14
jstice4all

this 記事によると、設定は次のようになります。

  • ファイルの種類：任意（またはJavaScript）
  • スコープ：プロジェクトファイル
  • プログラム：$ ProjectFileDir $/node_modules/.bin/eslint
  • 引数：--fix $ FilePath $
  • 更新する出力パス：$ FileDir $
19
jstice4all

Jstice4allとgotjoshのソリューションを拡張するだけです。

一部のプロジェクトではFileWatcherをESLintに取得できましたが、プラグインで動作しませんでした。拡張： '@ react-native-community'

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

@ react-native-community pluginは、環境変数をロードするためにプロジェクトフォルダー自体から実行する必要があることがわかりますが、ファイルウォッチャーnode_module/eslintパスから実行されます。これを機能させるには、次の設定を追加する必要がありました。

  • 作業ディレクトリ：$ ProjectFileDir $

スクリーンショット構成

1
aelesia