Ultraciteでリンター設定地獄から解放された話

はじめに

Ultraciteは、ESLint、Biome、Oxlint向けのプロダクショングレードなゼロコンフィグプリセットですね。

正直なところ、リンターの設定って面倒なんですよ。ESLintの.eslintrcを書いて、Prettierとの競合を解消して、プラグインを入れて...という作業に何度時間を溶かしたことか。しかも最近はBiomeやOxlintといった新しい選択肢も出てきて、どれを選ぶか迷う場面も増えてきました。

Ultraciteは「設定なしで本番品質のリンティング環境を構築する」というコンセプトで、この問題を解決しようとしています。しかもAIエージェント対応という、今の時代にマッチした機能も備えている。

個人的には、これからのプロジェクトではこういうツールが標準になっていくんじゃないかと思っています。

Ultraciteとは

Ultraciteは「Production-grade, zero-configuration preset」を掲げるツールです。つまり、設定ファイルを書かなくても、本番で使えるレベルのリンティング環境が手に入る。

特徴的なのは、単一のツールではなく「プリセット」という位置づけであること。ESLint、Biome、Oxlintという3つの異なるツールに対応していて、プロジェクトの特性に応じて選べます。

特徴・メリット

1. ゼロコンフィグで始められる

数百のルールが最適化済みで提供されています。JavaScriptとTypeScriptプロジェクト向けに調整されているので、インストールしたらすぐに使い始められる。

30代になって思うのは、設定に時間をかけるより、コードを書く時間を確保したいということ。Ultraciteはその点で理にかなっています。

2. 3つのツールチェーンをサポート

対応しているツールは以下の3つ：

Biome — オールインワンの整形とリント機能
ESLint + Prettier + Stylelint — 最も成熟したエコシステムで、最大のプラグインサポート
Oxlint + Oxfmt — ESLintより50〜100倍高速で、Oxcエコシステムの一部

プロジェクトによって最適なツールは異なるので、この柔軟性はありがたい。既存のESLint資産を活かしたいプロジェクトもあれば、速度重視で新しいツールを試したいプロジェクトもあるので。

3. Rust製ツールベースで高速

BiomeやOxlintはRustで実装されています。これ、意外と重要で、サブセカンド単位での高速な分析が可能。保存時にリントが走る設定にしていても、ストレスを感じません。

大規模なモノレポでも一瞬で終わるのは、QOL的にかなり上がります。

4. AI対応ルール生成

これが今の時代に刺さる機能。Claude Code、GitHub Copilot、Cursorなど20以上のAIエージェント向けにルールを生成できます。

AIがコードを書く時代になって、「AIと人間で書き方がバラバラ」という問題が出てきている。Ultraciteはこれを解決する。AIと人間の間でコードの一貫性を保てるのは、チーム開発において重要なポイントです。

5. モノレポ対応

複数のパッケージやアプリ間で統一されたツールチェーンを構築できます。設定ファイルの重複を排除できるので、大規模プロジェクトでの管理が楽になる。

各パッケージに.eslintrcをコピーして回る作業から解放されるのは、時短になります。

インストール方法

基本インストール

最もシンプルな方法：

npx ultracite init

これでインタラクティブなセットアップが始まります。フォーマッター/リンター、フレームワーク、エディタ、AIエージェントの選択がガイドされるので、迷うことはないはず。

セットアップで聞かれること

ツールチェーンの選択 — Biome、ESLint+Prettier+Stylelint、Oxlint+Oxfmtから選択
フレームワーク — React、Vue、Svelteなど
エディタ設定 — VS Code、Vim、など
AIエージェント — Claude Code、GitHub Copilot、Cursorなど

個人的には、新規プロジェクトならBiomeを選ぶことが多いですね。速度と設定のシンプルさのバランスが良い。

基本的な使い方

プロジェクト初期化後の構成

npx ultracite initを実行すると、選択したツールに応じて設定ファイルが生成されます。

Biomeを選んだ場合：

your-project/
├── biome.json          # Biome設定
├── .vscode/
│   └── settings.json   # エディタ設定
└── ...

ESLintを選んだ場合：

your-project/
├── eslint.config.js    # ESLint設定
├── .prettierrc         # Prettier設定
├── .vscode/
│   └── settings.json   # エディタ設定
└── ...

日常的なコマンド

生成された設定に基づいて、通常のツールコマンドを使えます。

# Biomeの場合
npx biome check --write ./src

# ESLintの場合
npx eslint --fix ./src

# Oxlintの場合
npx oxlint ./src

package.jsonへの追加例

{
  "scripts": {
    "lint": "biome check ./src",
    "lint:fix": "biome check --write ./src"
  }
}

AI向けルール生成

AIエージェント用のルールファイルを生成する例：

# Claude Code向け
npx ultracite init --ai claude-code

# GitHub Copilot向け
npx ultracite init --ai copilot

これでAIがコードを生成する際にも、プロジェクトのコーディング規約が適用されます。

実践的なユースケース

新規プロジェクトでの導入

新しいプロジェクトを始めるときの流れ：

# プロジェクト作成
mkdir my-project && cd my-project
npm init -y

# Ultraciteで環境構築
npx ultracite init

# → インタラクティブに設定を選択
# → 設定ファイルが自動生成される

# 開発開始
npm run lint

コスパ的に、設定に1時間かけていたのが5分で終わる。この差は大きいです。

モノレポでの活用

Turborepo や pnpm workspacesを使ったモノレポでも、Ultraciteは有効です。

my-monorepo/
├── packages/
│   ├── web/           # Biomeで統一
│   ├── api/           # Biomeで統一
│   └── shared/        # Biomeで統一
├── biome.json         # ルート設定
└── package.json

ルートに設定を1つ置けば、全パッケージに適用される。設定の重複がないのはメンテナンス的に楽です。

AIエージェントとの協業

Claude CodeやGitHub Copilotを使っているチームでの活用：

Ultraciteでプロジェクトを初期化（AI設定込み）
AIがコードを生成
生成されたコードも自動的にリント対象になる
プロジェクト全体でコード品質が統一される

これ、実際にやってみると「AIが書いたコードがなんか違う」という問題がかなり軽減されます。

既存プロジェクトへの導入

既存のESLint設定があるプロジェクトでも、Ultraciteに移行できます：

# 1. Ultraciteで初期化
npx ultracite init

# 2. 既存の設定ファイルをバックアップ/削除
mv .eslintrc.js .eslintrc.js.bak
mv .prettierrc .prettierrc.bak

# 3. 全ファイルをチェック
npm run lint

# 4. 問題なければ古い設定を削除
rm .eslintrc.js.bak .prettierrc.bak

# 5. 古いパッケージを削除
npm uninstall eslint prettier eslint-config-* eslint-plugin-*

どのツールを選ぶべきか

正直な比較をしておきます。

観点	Biome	ESLint + Prettier	Oxlint + Oxfmt
速度	速い	普通	最速
プラグイン	少ない	豊富	少ない
安定性	高い	最も高い	発展途上
設定の複雑さ	シンプル	複雑になりがち	シンプル