Prettier の代替として Rome 触ってみた
はじめに
こんにちは、旅行 PF 部エンジニアの奥田です。
この記事では、Prettier の 10 倍速いと言われるRomeを触っていきます。
ここまで圧倒的な速度を喧伝されては気になるのは人の性…さっそく触っていきます！
Rome とは
フロントエンド開発のツールチェインを 1 つに統一することを目指しているプロジェクトです。
Babel,ESLint,webpack,Prettier,Jest などのツールを置き換えることを目的にしています。
速度もそうですが、昔 ESLint や webpack・Prettier の設定に消耗した者としては期待せざるを得ません。
インストール
npm でインストールができます。依存関係がないためインストールもすぐ終わるので試しやすいです。
今回はv0.10.1を触っていきます。
$ npm install -g rome@next
$ rome
Rome CLI v0.10.1-next
COMMANDS:
- check
- ci
- format
- init
- help
OPTIONS:
--no-colors Disable the formatting of markup (print everything as plain text)
--use-server Connect to a running instance of the Rome daemon server
また、VSCode の拡張でも試すことができます。
Rome の歴史
- 2020 年 8 月に JavaScript でのベータ版が発表
- 2021 年 9 月に Rust で書き換えられることが発表
- 2022 年 4 月に Rust での Formatter がリリースされました！
- 2022 年 6 月に Rust での Linter と CI がリリースされました！
- 2022 年 11 月に Rust での正式リリースが予定されています！
2 年前に発表され、JavaScript から Rust へ書き換えられ今に至ります。
現在の状況
利用できるのは 2 つになります。
- Formatter
- Linter
書き換え以前は、JSON にも対応していましたが、現在対応しているのは JavaScript,TypeScript,JSX の 3 つになっています。
現在も開発が積極的に行われており、月に 1 度リリースされており今後の開発が期待されます。
| Language | Parsing | Formatting | Linting |
|---|---|---|---|
| JavaScript | ✅ | ✅ | ✅ |
| TypeScript | ✅ | ✅ | ✅ |
| JSX | ✅ | ✅️ | ✅ |
| JSON | 🚫 | 🚫 | 🚫 |
| HTML | 🚫 | 🚫 | 🚫 |
| CSS | 🚫 | 🚫 | 🚫 |
| Markdown | 🚫 | 🚫 | 🚫 |
現状の強み
Rome の強みとして、圧倒的な速さがあります。
ドキュメントでも述べられていますが、既存のフォーマッターである Prettier と比べて 10 倍は速いです。
NestJS のプロジェクトで実行した結果は下記になりました。
| Rome | Prettier | |
|---|---|---|
| 時間(s) | 0.85 | 16.17 |
$ rome format --write --skip-errors apps/backend
Formatted 2140 files in 728ms
Done in 0.85s.
圧倒的に速く、実行をしているのか疑うレベルです。ですが実行されています。
利用できる設定
| Options/Formatter(デフォルト) | Rome | Prettier |
|---|---|---|
| 1 行の文字数 | 80 | 80 |
| インデントサイズ | 2 | 2 |
| インデントスタイル | タブ | スペース |
| セミコロン | 付ける | 付ける |
| クォートスタイル | ダブル | ダブル |
| オブジェクトプロパティのクォート | 必要なら | 必要なら |
Prettier と比較しても設定として、問題なく実用できる設定が揃っています。
Prettier との互換性を意識しており、移行しやすいのも良いですね。
個人的には、 Python の Black と同じく設定が少ないことに、好感を持っています。
詳しい差は実際に動かした方がわかりやすいので、プレイグラウンドで確かめてください。
設定ファイル(rome.json)
rome.jsonに設定を記述することで.prettierrcと同じく設定を参照してくれます。
{
"formatter": {
"indentStyle": "tab",
"lineWidth": 120,
"ignore": ["scripts/*.js"]
},
"linter": {
"enabled": false,
"ignore": ["scripts/*.js"]
}
}
Linter と CI
新しくリリースされた Linter と CI について軽く紹介します。
Linter
公式に記載されているルールに基づき、Lint を実行してくれます。
Linter と Formatter の設定をするのは手間なので、1 つのツールで整うのは最高です。
--fixでの書き込みにも対応しています。
$ rome check src
error[js/noUnusedVariables]: This variable is unused.
┌─ src/App.tsx:1:20
│
1 │ import { useState, useEffect } from "react";
│ ^^^^^^^^^
= note: Unused variables usually are result of incomplete refactoring, typos and other source of bugs.
CI
CI はそのまま CI 用のコマンドで、Formatter と Linter を実行してくれるコマンドになります。
rome ci srcは、rome format src && rome check srcと同じように動作する CI 用のコマンドになっています。
Rome の目指すツールチェインの統一という目標の一端が垣間見えます。
一度の構文解析で Linter と Formatter を実行できるツールには、出会ったことがなかったので面白い感覚です。
今後のアップデート
Rome は v0.10.0 で Prettier との互換性が 90%を超え、最後の実験版リリースという発表がされました。
11 月のリリースは v10.0.0となり、正式なリリースになります。
Rome は GitHub 上に公開されているので次のアップデート情報も見ることができます。
マイルストーンを見る限り次に力を入れていくのは、Liter のように見えます。
さいごに
次回が正式なリリースということで、これからもアップデートが楽しみです。
活発に開発されているので、今後に期待しつつ細かいプロジェクトでは積極的に使っていこうと思います！
インストールも早いので気軽に試すことができますので、ぜひ試してみてください！
Discussion