Romeとは
Rust製の新しいコードフォーマッターで、JavaScript / TypeScriptに対応してます。
つい去年正式リリースされたばかりのまだ新しいツールです。
公式ドキュメント
特徴
1. 処理速度が桁違いに速い
Romeの最大の特徴になります。
コードフォーマッターで主流になっているPrettierと比べておよそ25倍の処理速度をほこります。
後で検証してみます。
※公式では85000行のソースコードで検証した時、Prettierでは4.3秒かかったのが、Romeではたったの0.1秒でできたそうです。
最近新しくリリースされているRust製のアプリが他のアプリに比べて圧倒的な速度を出していることをよく耳にしますが、これもその一つですね。
2. シンプルな設定
設定方法はPrettierと同じで、VSCodeのデフォルトフォーマッターに選択、もしくはnpmからインストールすることで使用することができます。
細かな設定もjsonファイルから変更することができます。
3. JavaScripとTypeScritに対応
現在はJavaScript / TypeScript / JSON / JSXに対応してます。
まだHTMLやCSSには対応してないそうです。
4. コードのフォーマット以外にも今後いろいろ使えるらしい
現在はコードフォーマットとLinterとして使うことができますが、今後はテストやコンパイル、バンドルにも対応していくそうです。
今後が楽しみ。
導入方法（VSCode）
1. VSCodeのプラグインからRomeの拡張機能をインストール
2. Default FormatterをRomeに変更
VSCodeの画面左下の歯車ボタンから設定を選択し、検索欄に「Editor Default Formatter」と入力。
セレクトバーの中にRomeがあると思うので、選択。
3. もしVSCode以外を利用してる人はいち早く別のエディターでも使えるように、公式に投票しよう！
これで設定は完了です！
導入方法（npm）
1. romeをインストール
npm install --save-dev --save-exact rome
もしくは
yarn add --dev --exact rome
2. rome.jsonを作成
npx rome init
もしくは
yarn rome init
3. rome.jsonが作成されていることの確認
作成されたrome.jsonを見ると、中には以下のような内容が記載されているかと思います。
{
"$schema": "./node_modules/rome/configuration_schema.json",
"organizeImports": {
"enabled": false
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
これで設定は完了です！
設定できる内容の紹介
1. 基本構成
デフォルトで以下の内容が設定されてます。
"formatter": {
// Romeのフォーマッターを有効にするか無効にするか
"enabled": true or false,
// 構文エラーがあった時もフォーマットをするか
"formatWithErrors": false or true,
// インデントのスタイル。"tab"(半角4つ)か"space"（半角２つ）ですが、spaceの方が良いかなと思います。
"indentStyle": "tab" or "space",
// インデントの大きさ
"indentSize": 2 or 好きな値,
// １行に何文字書けるようにするか
"lineWidth": 80 or 好きな値,
// Romeのフォーマットの対象から外れるファイルパス
"ignore": [] or ["scripts/*.js"]
}
2. その他JavaScript / TypeScriptのみに適用される設定
"javascript": {
"formatter": {
// オブジェクト内のプロパティを引用符で囲む必要があるか
"quoteProperties":"asNeeded" or "preserve",
// 引用符のタイプ
"quoteStyle": "double" or "single",
// 文末のカンマをつけるか、つけないか
"trailingComma":"all" or "es5" or "none",
// 文末にセミコロンを必ずつけるか、必要な時だけつけるか
"semicolons": "asNeeded" or "all",
}
}
その他にもfileやschemaに対する設定もできますが、利用頻度が低そうなのでここでは割愛します。
実際に使ってみた
1. 大量のソースコードを用意
引数で受け取ったスネークケースの文字列をローワーキャメルケースに変える関数を大量にコピペして約4万行になるように作成しました。
2. 実行！
npx rome format src/pages/index.tsx --write
0.15秒でフォーマットしてくれました、速い！
3. じゃあPrettierでは何秒？
npx prettier --write ./src/pages/index.tsx
1.5秒かかりました、10倍違いますね。
実際にフォーマッタを実行してみるとわかるのですが、体感速度が全然違いました。
その他
フォーマットして欲しくないところがある場合
先ほどのような大量のソースコードは時にはフォーマッタをかけたくない時もあるかと思います。
ignoreの欄に以下のようにfileパスを入力するとRomeのフォーマッターの対象から外れます。
"ignore": ["src/pages/*.tsx"]
もしくはコメントアウトで以下の内容を記載すると、Romeのフォーマッターの対象から外してくれるそうです。
// rome-ignore format: the array should not be formatted
以下のURLから実際にPrettierとRomeを比較しながら検証できます。
所感
一つのファイルに大量のソースコードを書く場合はとても良い
静的データやUtility関数を格納してるファイルとかはどうしても行数が長くなってしまいがちです。
PCのスペックにもよるかもしれないですが、Prettierの実行が遅くてストレスに感じてる人がいるかと思います。
そんな人には是非一度試して欲しいです。
設定できる内容はPrettierに比べると少ない
Prettierに比べるとjsonファイルに設定できる項目は少ないですが、普段あまりコアな設定をしてないので、僕にとっては今の種類だけでも十分でした。
細かい設定がない
上記に紐づくことではありますが、複雑な設定は必要なく、VSCodeに設定しておくか、npmからインストールするだけで動かすことができます。
これからに期待！
現状はJavaScriptとTypeScriptだけですが、今後はhtmlやcssといったマークアップ言語や他の言語にも対応して欲しいですね。