RubyMine の Prettier プラグインで自動フォーマットする

環境

• RubyMine 2018.3 EAP

目標

*.vue ファイルが保存されたら、Prettier で自動フォーマットされること。
※他のファイルタイプも同様の手順で設定できます

手順

• File Watchers をインストール
• Prettier をインストール
• File Watchers を設定する

File Watchers と Prettier のインストール

• Preferences > Plugins
  • File Watchers で検索すると、Search Results に２つとも出てくるのでインストールしましょう。

File Watchers の設定

• Preferences > Tools > File Watchers
  • + ボタンで設定を追加しましょう（未作成の場合）

• Edit Watcher

  • 設定を下記の通り設定します（ファイルタイプが Vue.js Template の場合）

  項目	設定値
  File type	Vue.js Template
  Scope	Current File
  Program	$ProjectFileDir$/node_modules/.bin/prettier
  Arguments	--write $FilePathRelativeToProjectRoot$
  Output paths to refresh	$FilePathRelativeToProjectRoot$
  Working directory	$ProjectFileDir$

  • Advanced Options の Auto-save edited files to trigger the watcher はオフにします。
  • ※プロジェクトルートの node_modules/.bin 配下に prettier が存在する前提です。
    • 無ければ npm install prettier --save-dev でインストールしましょう。

以上