Theme
SD MILIEU

2019-3-10

[PHPStorm]ESLintで保存時にAutoFix

手順

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

  • 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 CLIやLaravel 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 の警告も消せる。