Mitomex Blog

IntelliJ IDEA で IdeaVim を使っているときの Prettier の自動保存を有効にするには

2020-07-25

結論

ファイルを保存するときは :w ではなく、 :wa を使うと Prettier の自動保存が有効になります。

IntelliJ で Prettier を使えるようにする

IntelliJ で Prettier を使うには プラグイン をインストールする必要があります。

プラグインをインストールするとプロジェクトディレクトリ内かグローバルに Prettier がインストールされていれば Prettier が使えます。

Prettier のコードフォーマットを実行する

Prettier を使って整形するには Option + Shift + Command + p を押すと整形されます。

ファイル内で何も選択されていない状態で実行するとそのファイル全体を、ある範囲が選択された状態で実行すると選択された範囲のみ整形されます。

ファイル保存時に Prettier を実行するようにする

ファイル保存時に自動で Prettier を実行するように設定することができます。

Preferences -> Languages & Frameworks -> JavaScript -> Prettier

にある、 Run on save for files にチェックを入れると、その隣りにある入力欄に記述してあるパターンのファイルが保存されたときに自動で Prettier を実行してくれるようになります。

image01

ただここでひとつ注意点があります。

普段、私は IdeaVim プラグインを使っていてファイルを保存するときに :w を使用していました。しかし :w で保存しても Prettier が実行されません。

Prettier を保存時に自動で実行させるには :wa を使用する必要があります。

IntelliJ IDEA で Command + s でファイルを保存するとすべてのファイルが保存されます。

なので、vim コマンドを使って保存するときもすべてのファイルを保存する :wa を使う必要があるのです。

ちょっとした落とし穴でした。。。

参考ページ:WebStorm Setup
参考ページ:WebStorm + IdeaVim: problem with running Prettier on save
参考ページ:Prettier on Save is not triggered with Vim Emulation