Formatter や Linter などのツールが統合されたツールチェーン Rome を使ってみる

こんにちは、 Gaji-Labo フロントエンドエンジニアの石垣です。

今回は Rome というツールチェーンのJSライブラリを知ったので、詳細をまとめてみたいと思います。

概要

Rome は Formatter や Linter などのツールが統合されたツールチェーンです。

思想としては、ESLint や Prettier など、開発に必要なツールをそれぞれ導入し設定するのではなく1つのツールチェーンに全てをまとめ、単一の設定ファイルで任意の構成にセッティングすることにより快適な開発体験に繋げることを目的としています。

現在は Formatter と Linter の機能のみですが、今年 Compiler 、Bundler 、 Testing の機能も追加されるようです。

使い方

まずは yarn でプロジェクトに導入し、yarn rome init で設定ファイル rome.json を生成します。

yarn add rome --save-dev
yarn rome init

rome.json はデフォルトでは以下のようになっています。

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

初期状態では Linter のみが有効になっており、Formatter は以下のように別途有効にする必要があります。

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "lineWidth": 120
  }
}

Linter は推奨設定がデフォルトで有効になっているため、そのまま使用できます。
Formatter は Prettier のようにインデントスタイルやシングルクォートを使うかダブルクォートを使うかどうかを設定できます。
公式サイトに Formatter の設定一覧がありますが、個人的にはバリエーションは Prettier と遜色ないと感じました。

設定した状態で、Linter を使う場合は yarn rome check . を、 Formatter を使う場合は yarn rome format . を叩くことでそれぞれ実行できます。

最後に VSCode で使用するには、 VSCode 用の拡張機能を導入します。
これで Linter のエラーをコード上に表示させることができます。

使ってみた感触

やはり React プロジェクトなどで ESLint と Prettier をそれぞれ管理するのは煩雑ではあります。
Rome であれば一緒くたになっているので導入も管理もしやすく、快適な開発体験に繋がるなと思いました。

ただ、現状は ESLint がチェックしてくれる部分を Rome はチェックしてくれない、というところも存在しています。これは今後 Rome が普及すれば改善されるかと思っています。

Formatter 機能に関しては Prettier と遜色なく、実行速度も速いので代替になりうると感じました。

おわりに

今回は Rome というツールチェーンについてまとめてみました。

今後さらなるアップデートが予定されているため、引き続き注視していきたいと思います。