WebStormでRomeを使うHow to - yasudacloudの日記

ReactのプロジェクトにRomeのフォーマッターを採用しようとしたところ、JetBrains系IDEにはまだプラグインがないようで。

そこでとりあえずWebStormの設定をごにょごにょしてReformat Codeできないか検証してみました。

結論から言うと1.Run Configurationsの方法と2.外部ツールの方法の２パターンで実現できました。後者がおすすめです。

まずReactプロジェクトを作ります。

create-react-app sample_reaect --template typescript

Romeをインストールします。

npm i rome

これで終わり。

最初に思いついたのは⌘ + R（コマンド + R）でnpmやシェルを実行ができるのでこれで設定できるのでは？と考えました。画面右上のこの部分ですね。

まずはpackage.jsonのscriptsにromeの実行を記述します。例えば

"scripts": {
  "format": "rome format --write "
},

みたいな感じ。次にEdit Configuration Settingsを開いてScriptsの部分をformatにします。

そして下のArgumentsに$FilePath$という変数を設定します。これは先ほどのrome format --writeのコマンドの後ろに”今開いているファイルの絶対パス”を付けてくれます。この動的なパラメータがないと毎回src全体をフォーマットするような羽目になってしまいます。

最後にフォーマットをかけるショートカットを設定します。

Settings→KeymapからRunを選択してお好みのショートカットキーを入力します。私の好みは⌘ + ⇧ + R（コマンド + Shift + R）です。

これでコードフォーマットしてみたところ、変更前のReformat Codeに比べて体感的に0.5〜1秒くらい遅い気がします。Romeの実行自体はマイクロ秒とかの単位で爆速ですがRun自体が遅いようです。

このやり方でちょっと良いのはRun Configurationsを使っているため設定をGit管理できるという点です。詳しくはこちら

プロジェクトルートにシェルスクリプトreformat.shを作成します。

./node_modules/.bin/rome format --write $1

romeの実行に$1という引数を渡しています。

次にSettings→Tools→External Toolsを選択し、+から新規作成します。

Programにreformat.shのファイルパスを入力、Argumentsに先ほど同様$FilePath$を入力、Working directoryに$ProjectFileDir$を入力します。

こちらのショートカットキー設定はさっきのNameで直接検索できるようです。

こっちのフォーマットは体感的に結構早いです。

今回の例ではただrome formatをかけただけですが、シェルスクリプトなので自由に拡張できるのが利点です。ただ、External Toolsの設定は.ideaのどこに設定されてるかよくわからず謎でした。

2. 外部ツールの方法のコードフォーマットのデモ。約150KB 6,000行くらいの適当なコードを一度圧縮してから実行しました。

開いているファイルに対してフォーマットをかける分には十分そうです。

Settings→Tools→Actions on SaveのReformat codeにチェック入れるだけ・・と思いきやこちらはデフォルトのReformat CodeなのでRomeではありません。。

おそらくプラグイン化なりしないと実現できないと思ってますが、良い方法ご存知の方いたら教えてくださいm(_ _)m