oxfmt

Oxfmt — Oxc フォーマッター

Oxfmt は、JavaScript エコシステム向けの Prettier 互換フォーマッターです。現在、Prettier の JS/TS テストスイートの約 95％に合格しています。JavaScript、JSX、TypeScript、TSX、JSON、JSONC、JSON5、YAML、TOML、HTML、Angular、Vue、CSS、SCSS、Less、Markdown、MDX、GraphQL、Ember、Handlebars をフォーマットします。

oxfmt を使うタイミング

• oxfmt がインストールされているプロジェクトでコードを変更した後
• 新しい JS/TS プロジェクトでフォーマットを設定するとき
• Prettier から oxfmt に移行するとき
• フォーマットルール、エディター連携、CI チェックを設定するとき

クイックリファレンス

インストール

# Pick your package manager
npm add -D oxfmt
pnpm add -D oxfmt
yarn add -D oxfmt
bun add -D oxfmt

package.json にスクリプトを追加します：

{
  "scripts": {
    "fmt": "oxfmt",
    "fmt:check": "oxfmt --check"
  }
}

引数なしで oxfmt を実行すると、現在のディレクトリをフォーマットします（prettier --write . と同様です）。

CLI フラグ

フラグ	用途
--check	書き込みを行わずにフォーマットを確認します（未フォーマットの場合は終了コード 1）
--list-different	変更されるファイルを一覧表示します
--write	フォーマットしてその場で書き込みます（デフォルト）
--init	デフォルト設定で .oxfmtrc.json を作成します
--migrate=prettier	.prettierrc を .oxfmtrc.json に変換します
--migrate=biome	Biome の設定を .oxfmtrc.json に変換します
-c PATH	指定した設定ファイルを使用します
--ignore-path PATH	カスタムの無視ファイルを指定します（複数回指定可能）
--with-node-modules	node_modules/ を含めます（デフォルトではスキップ）
--no-error-on-unmatched-pattern	glob に一致するものがなくても失敗しないようにします
--stdin-filepath PATH	PATH からパーサーを推測して、標準入力をフォーマットします
--threads N	スレッド数（シングルコアの場合は 1 に設定）
--lsp	LSP サーバーを起動します（エディターで使用）

CLI はフォーマットオプションをフラグとしてサポートしていません（例：--no-semi はありません）。代わりに設定ファイルを使用してください。これにより、CLI、エディター、CI 間でフォーマットを統一できます。

設定

Oxfmt は、現在のディレクトリから上位へたどり、.oxfmtrc.json または .oxfmtrc.jsonc を検索します。

基本設定ファイルを生成します：

oxfmt --init

基本オプション

{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 100,       // Line width limit (default: 100, Prettier default is 80)
  "tabWidth": 2,           // Spaces per indent level
  "useTabs": false,        // Tabs vs spaces
  "semi": true,            // Semicolons
  "singleQuote": false,    // Quote style
  "trailingComma": "all",  // Trailing commas in multi-line
  "insertFinalNewline": true
}

注：oxfmt の printWidth のデフォルトは 100 ですが、Prettier のデフォルトは 80 です。移行する場合は、どちらを使うか決めてください。

ファイルごとのオーバーライド

{
  "printWidth": 100,
  "overrides": [
    {
      "files": ["*.test.js", "*.spec.ts"],
      "options": { "printWidth": 120 }
    },
    {
      "files": ["*.json"],
      "excludeFiles": ["package.json"],
      "options": { "tabWidth": 4 }
    }
  ]
}

組み込み機能

これらはデフォルトで無効ですが、設定で有効にできます：

• sortImports — import 文を並べ替えます
• sortTailwindcss — Tailwind CSS クラスを並べ替えます
• sortPackageJson — package.json のフィールドを並べ替えます（デフォルトで有効）

無視パターン

設定ファイルに ignorePatterns を追加するか、.oxfmtignore / .prettierignore ファイルを使用します：

{
  "ignorePatterns": ["dist/", "coverage/", "*.min.js"]
}

.editorconfig のサポート

Oxfmt は次の .editorconfig プロパティを読み取ります（最も近いファイルのみ。マージはしません）：

• end_of_line → endOfLine
• indent_style → useTabs
• indent_size → tabWidth
• max_line_length → printWidth
• insert_final_newline → insertFinalNewline

Prettier からの移行

# Install oxfmt
pnpm add -D oxfmt

# Auto-convert .prettierrc → .oxfmtrc.json
oxfmt --migrate=prettier

# Format everything so the diff is clean
pnpm oxfmt

# Replace Prettier scripts in package.json
# "prettier --write ."  → "oxfmt"
# "prettier --check ."  → "oxfmt --check"

移行後は、生成された .oxfmtrc.json を確認してください。特に、デフォルトが 80 から 100 に変わった printWidth に注意してください。

エディター連携

エディター拡張機能はローカルの oxfmt --lsp を使用するため、oxfmt をプロジェクトにインストールする必要があります。

VS Code / Cursor： VS Code Marketplace から「Oxc」拡張機能をインストールします。チームでの推奨設定：

.vscode/extensions.json：

{ "recommendations": ["oxc.oxc-vscode"] }

.vscode/settings.json：

{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true
}

Zed： Zed の Marketplace から oxc 拡張機能をインストールします。

JetBrains（IntelliJ / WebStorm）： JetBrains Marketplace からインストールします。

Neovim：

• nvim-lspconfig を使用する場合：npm i -g oxfmt を実行し、vim.lsp.enable('oxfmt') を実行します
• conform.nvim を使用する場合：js/ts/json/vue に対して formatters_by_ft を設定します
• coc.nvim を使用する場合：:CocInstall coc-oxc

その他の LSP 対応エディター（Emacs、Helix、Sublime）： oxfmt --lsp を指定します。

LSP 非対応エディター： 標準入力を介して渡します：cat file.js | oxfmt --stdin-filepath file.js

CI の設定

GitHub Actions：

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v6
        with:
          node-version: lts/*
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm run fmt:check

GitLab CI：

oxfmt:
  image: node:lts
  stage: test
  before_script:
    - npm install
  script:
    - npm run fmt:check

自動修正（GitHub）： autofix.ci を使用します。oxfmt（--check なし）を実行し、アクションで修正をコミットします。

pre-commit フック（lint-staged）

{
  "lint-staged": {
    "*": "oxfmt --no-error-on-unmatched-pattern"
  }
}

サポートされていないファイル形式でエラーが発生しないように、--no-error-on-unmatched-pattern を使用してください。

Node.js API

import { format } from "oxfmt";

const result = format("foo.ts", "const   x:string   =   1", {
  semi: false,
  singleQuote: true,
});
console.log(result); // const x: string = 1

コード変更後のワークフロー

oxfmt が有効なプロジェクトでファイルを変更した場合：

1. pnpm oxfmt（またはプロジェクトの fmt スクリプト）を実行して、変更したファイルをフォーマットします
2. CI またはチェックの実行時には、書き込みを行わずに検証するため、代わりに --check を使用します

このフォーマッターはプロジェクト全体を実行しても十分に高速なため、標準入力経由で渡す場合を除き、個別のファイルを指定する必要はありません。