PIYO - Tech & Life -

WebStormでファイルを保存する度にESLintする

みんなも使ってるESList。自動でFixできるところはどんどん勝手に直して欲しい。WebStormならそんな想いを実現してくれることがわかりました。

(※ちなみにJetBrainsのIDEならどれでも対応しているはずです。RubyMineでも似たようなことができるでしょう)

1. File Watcherを使う

File Watcherという、ファイルを監視する仕組みがあることを知りました。

File WatcherはWebStormシステムで、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行します。 WebStormは、このような一般的な一般的なサードパーティのツール(コンパイラ、コンプレッサ、プリティファクタなど)のための定義済みのFile Watcherテンプレートを提供します。他のサードパーティのツールを実行するようにカスタムFile Watcherを設定することもできます。 (ページ内の概要をGoogle翻訳)

設定のしかた

  • Preferenceを開く
  • 「File Watcher」と検索
  • Tools以下のFile Wathchersが見つかる
  • 下にある+ボタンを押す

変更時に何をするのかを設定する画面となります。

↓画像枠の部分にESLintのコマンドとコマンドの引数、再読込するパスなどを指定します。他にもオプションが幾つかあるので必要に応じて設定します。

これで保存のたびにESLintがかかります。

2. ショートカットを上書きする

ショートカットを上書きすることでWebStormにある「Fix ESlint Problem」というコマンド(アクション?)を保存のたびに呼ぶ方法です。

ちょっと見づらくなってしまってますが、「Fix ESLint Problem」のコマンドのショートカットを「⌘S」に割り当てています。通常「保存(Save All)」に使われるショートカットです。

これを乗っ取る(=元のは削除)することで保存したつもりがESlintをかけていた、という状態になります。

終わり

最近はなんとなく2の方を使っています。

FileWatcherの仕組みは他にも活用方法がありそうでいいなーと思ってます。そういえば昔はRails開発でファイルを変更したら自動的に該当箇所をテストするようなことやってたなーというのを思い出したり。