Zenn
🍚

PrettierもESLintも要らなくなる!?Romeを紹介!

2023/02/08に公開
3件
TypeScript
ESLint
Prettier
Rome
tech

この記事を読む前に

最初に

JavaScript、TypeScript のリンター・フォーマッターとしてそれぞれ ESLint、Prettier が有名ですが、それを統合した Rome というのがあるのを知っていますでしょうか?

ESLint と Prettier をそれぞれ設定しなくてよいので、環境構築がスムーズになります。Rome は Prettier にインスパイアされているので、Prettier と似た使い心地です。

https://rome.tools/

Rome とは？

Romeとはリンターとフォーマッターを統一したツールです。
2023 年 2 月 7 日現在、JavaScript と TypeScript に対応しています。今後は JSON、HTML、マークダウン、CSS に順次対応していくようです。

また、現在はリンターとフォーマッターのみですが、コンパイラ・バンドラー・テストの機能も追加されていくようです。いろんなツールをインストールしたりアップデートしたりすると依存関係の解消の手間が発生する場合があるので、1 つのツールをインストールするだけで環境が整うのは楽でありがたいですね！

Babel を開発したSebastian McKenzie氏が創設しており、Yarn を開発していた人も開発に参加しているので、信頼できるツールです。

特徴

実行速度が早い

Rust で書かれているので実行速度が速いです。
ベンチマークを見てみると Prettier と比較して最大で25倍、ESLint と比較して約15倍高速になるようです。

構成が簡単

Prettier と ESLint のそれぞれの構成ファイルを設定する必要がありません。rome.jsonにまとめて記載できます。
細かい設定方法についてはこちらをご確認ください。

rome.json
{
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "lineWidth": 120
  },
  "linter": {
    "enabled": false
  }
}

エラーが分かりやすい

エラーの場所を適切に表示してくれます。分かりやすい動画が公式サイトにあるのでそちらを見ていただきたいですが、ESLint ではエラーの強調表示が消える場合でも、Rome は強調表示されたままです。

また、エラー内容が分かりやすく表示されます。詳細はこちら。どこがエラーなのかだけでなく、どうしてエラーなのかを表示してくれるので、エラーの解消もしやすくなります。

導入してみる

今回はcreate-react-appでプロジェクトを作り、Romeをインストールします。

環境

  • Windows11 home
  • node v16.16.0
  • create-react-app @5.0.1

create-react-app

以下のコマンドをターミナルに入力します。

npx create-react-app rome-sample --template typescript

念のため rome-sample に移動して実行してみましょう。

cd rome-sample
npm start

Rome をインストール

vscode で rome-sample フォルダを開きます。
vscode でターミナルを開いて以下のコマンドを入力します。

npm install --save-dev rome

以下のコマンドを入力してrome.jsonを作成します。

npx rome init

するとrome.jsonが作成されます。デフォルトでは linter のみ設定されています。

  • enabled を true で linter を有効にします
  • recommended を true で推奨ルールを有効にします
rome.json
{
  "$schema": "./node_modules/rome/configuration_schema.json",
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

formatter を設定

rome.json に以下を追記します。

  • enabled を true で formatter を有効にします
  • formatWithErrors を true で構文エラーのあるドキュメントをフォーマットします
  • indentStyle を space でインデントをスペースにします
rome.json
{
  "$schema": "./node_modules/rome/configuration_schema.json",
  "linter": {
    //
  },
  "formatter":{
    "enabled": true,
    "formatWithErrors": true,
    "indentStyle": "space"
  }
}

javascript を設定

これを設定すると JavaScript と TypeScript ファイルのみに適用されます。
rome.json に以下を追記します。

  • quoteStyle を double で文字列リテラルを表すときダブルクォーテーションで表示されます
  • trailingComma を all で複数行のコンマ区切りの構文構造では常に末尾にコンマを追加します
  • semicolons を always で各ステートメントの最後に常にセミコロンを追加します。
rome.json
{
  "$schema": "./node_modules/rome/configuration_schema.json",
  "linter": {
    //
  },
  "formatter":{
    //
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "trailingComma": "all",
      "semicolons": "always"
    }
  }
}

vscode の拡張機能を追加

Romeには vscode の拡張機能があります。この拡張機能をインストールします。

https://marketplace.visualstudio.com/items?itemName=rome.rome

vscode の Default Formatter を Rome にする

  1. 設定画面を開きます。
  2. 検索フォームにformatterと入力します。
  3. Editor:Default Formatterが表示されます。リストの中から Rome を選択します。

ついでに Format On Save も有効に

この設定は任意です。
ファイルを保存したときに formatter が機能するようにします。

  1. 設定画面を開きます。
  2. 検索フォームにFormat On Saveと入力します。
  3. Editor:Format On Saveにチェックを入れます。

使ってみる

実際に動作を見てみましょう。
rome-sample\src\App.tsxを開いてみると、import がシングルクォーテーションになっています。

App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

これを変更せずに保存するとシングルクォーテーションがダブルクォーテーションで保存されます。

App.tsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";

rome-sample\src\App.tsxに次のコードを追加します。
以下のようなエラーが発生します。

  • if 条件文で代入しようとしているが、定数なのでできません
  • return null;には到達しません。
App.tsx
function testFunc() {
  const constant = 100;
  if ((constant = 100)) {
    console.log("constant = ", constant);
  }
  try {
    return 0;
  } catch {
    return -1;
  }
  return null;
}

vscode のターミナルで以下を実行します。

npx rome check src\App.tsx

以下のようにエラーが表示されます。どこがエラーなのか、どうしてエラーなのかを適切に表示してくれます。

src\App.tsx:15:3 lint/correctness/noUnreachable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × This code will never be reached ...

    13 │     return -1;
    14 │   }
  > 15 │   return null;
       │   ^^^^^^^^^^^^
    16 │ }
    17 │

  i ... because either this statement ...

     9 │   }
    10 │   try {
  > 11 │     return 0;
       │     ^^^^^^^^^
    12 │   } catch {
    13 │     return -1;

  i ... or this statement will return from the function beforehand

    11 │     return 0;
    12 │   } catch {
  > 13 │     return -1;
       │     ^^^^^^^^^^
    14 │   }
    15 │   return null;


src\App.tsx:7:8 lint/correctness/noConstAssign ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Can't assign constant because it's a constant

    5 │ function testFunc() {
    6 │   const constant = 100;
  > 7 │   if ((constant = 100)) {
      │        ^^^^^^^^
    8 │     console.log("constant = ", constant);
    9 │   }

  i This is where the variable is defined as constant

    5 │ function testFunc() {
  > 6 │   const constant = 100;
      │         ^^^^^^^^
    7 │   if ((constant = 100)) {
    8 │     console.log("constant = ", constant);


Checked 1 file(s) in 1379µs
Found 2 error(s)
Error: some errors were emitted while running checks

Format On Saveは使わずにターミナルからフォーマットしたいひとは以下のコマンドを入力するとフォーマットしてくれます。

npx rome format src\App.tsx --write

フォーマット前後の差分を見たい場合は、--writeをつけずに実行すると差分が表示されます。

npx rome format src\App.tsx

また、Rome には CI 用のコマンドが用意されています。
このコマンドを入力すると、リンターを実行し、ファイルのフォーマットを検証します。

npx rome ci src\App.tsx

最後に

Prettier と ESLint の代わりになりそうなRomeを紹介しました。
依存関係の解消を行わなくてよいので管理が楽になりそうです。
細かい設定をしたい人は Prettier と ESLint を使うのが良いでしょう。
会社のプロジェクトに使うのは気が引けますが、個人開発で使う分には面白そうです。
個人的にはテスト機能が追加されるのがありがたいので、ぼちぼち動向を追いながら使っていこうと思います。
読んでいただきありがとうございました!

更新履歴

  • 2023 年 2 月 13 日　「この記事を読む前に」を追加

Discussion

mossan_hoshimossan_hoshi

Rome、資金がショートしたのか給料が払えなくなり主要なエンジニアが複数人抜け出しているとの事。
雲行きが結構怪しくなっている印象です。

【ポッドキャストmozaic.fmでこの話題を取り上げているエピソード(該当箇所は開始1分14秒頃)】 https://mozaic.fm/episodes/114/monthly-ecosystem-202302.html

【主要エンジニアによる辞めます発言】https://twitter.com/MichaReiser/status/1613474278808162304