[PHPStorm]ESLintで保存時にAutoFix

手順

端末ごとに1回だけやればいい

  • ESLintの自動修正+保存のマクロを登録

プロジェクト毎にやる

  • PHPStormでESLintを利用するようにする
  • エイリアスを利用している場合は、PHPStormにエイリアスを認識させるためのファイルを配置

詳細

ESLintの自動修正+保存のマクロを登録

キーマップの設定からFix ESLint Problemsに対して適当なショートカットを設定。設定したショートカットはマクロ経由でしか使わないので本当に適当でいい。

Edit > Macros > Start Macro Recordingで、Fix ESLint Problems(先程設定したショートカット) > Command+Sを実行。Edit > Macros > Stop Macro Recordingをし適当な名前でマクロを保存。

最後に、キーマップの設定からCommand+Sに作成したマクロを登録することで保存と同時にESLintのFixが実行されるようになる。

PHPStormでESLintを利用するようにする

Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLintでESLintの設定を開き、Enableにチェックを入れる

エイリアスを利用している場合は、PHPStormにエイリアスを認識させるためのファイルを配置

import SomeClass from '@/SomeClass'といった感じで@をエイリアスとして使用することが多いが、プロジェクト内のwebpack.config.jsにエイリアスの指定がされていない場合はPHPStormが認識してくれない。例えばVue CLILaravel Mixを使用しているときとか。

なので、以下のような内容のファイルをプロジェクトに配置して、@をエイリアスとして認識させる。(Laravel Mixでの例)

// PHPStormにaliasを認識させるためのファイル
System.config({
  paths: {
    '@/*': 'resources/assets/js/*',
  },
})

Vue CLIの場合だとPreference > Languages & Frameworks > Webpack > webpack configuration fileから/Users/xxxx/project/node_modules/@vue/cli-service/webpack.config.jsといった感じでVue CLIのconfigを読むようにして解決する方法もある。(Laravel Mixだと無理)

トラブルシューティング

スタンダードスタイルなのに、「セミコロンがないよ」って警告が出る

PHPStormデフォ機能のコードスタイルチェックが、何故かESLintがあるのに勝手に働いてしまう時がある。

Preference > Editor > Inspections > JavaScript > Code Style IssuesからUnterminated Statementのチェックを外せば警告が出なくなる。

同様の方法でVueテンプレート内にでる大量のHTMLの警告も消せる。