Skip to content

Prettier からの移行

このガイドでは、Prettier から Oxfmt への移行について説明します。

WARNING

Oxfmt はベータ版であり、特に複雑な設定には適していない可能性があります。

クイックスタート

簡単な設定の場合、1つのコマンドで移行できます:

bash
$ npm add -D oxfmt@latest && npx oxfmt --migrate=prettier && npx oxfmt
bash
$ pnpm add -D oxfmt@latest && pnpm oxfmt --migrate=prettier && pnpm oxfmt
bash
$ yarn add -D oxfmt@latest && yarn oxfmt --migrate=prettier && yarn oxfmt
bash
$ bun add -D oxfmt@latest && bunx oxfmt --migrate=prettier && bunx oxfmt

移行の前準備

多くの設定において、Oxfmt は Prettier v3.8 と互換性があります。

主な違い:

  • デフォルトの printWidth は 100(Prettier は 80 を使用)
  • Prettier プラグインはサポートされていません(ただし、一部の人気プラグインはネイティブ実装されています)
  • 一部のオプションはサポートされていません(設定リファレンス を参照)

詳細については 非対応機能 を参照してください。

ステップ 1:Prettier を v3.8 にアップグレードする(任意)

Oxfmt の出力は、最も Prettier v3.8 に近くなります。最初にアップグレードすることで、フォーマットの差を最小限に抑えることができます。

ステップ 2:Oxfmt のインストール

bash
$ npm add -D oxfmt@latest
bash
$ pnpm add -D oxfmt@latest
bash
$ yarn add -D oxfmt@latest
bash
$ bun add -D oxfmt@latest
bash
$ deno add -D npm:oxfmt@latest

ステップ 3:設定の移行

Oxfmt は .oxfmtrc.json または .oxfmtrc.jsonc を使用します。基本的な例:

.oxfmtrc.jsonc
jsonc
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 80,
}

oxfmt --migrate prettier を実行すると、あなたの Prettier 設定を自動的に変換できます。

prettierrc.js

移行前:

prettierrc.js
js
module.exports = {
  singleQuote: true,
  jsxSingleQuote: true,
};

移行後(.oxfmtrc.jsonc):

.oxfmtrc.jsonc
jsonc
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 80,
}

prettierrc.yaml

移行前:

prettierrc.yaml
yaml
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

移行後(.oxfmtrc.jsonc):

.oxfmtrc.jsonc
jsonc
{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
}

ステップ 4:スクリプトの更新

package.json のスクリプト

diff
{
  "scripts": {
-   "format": "prettier --write .",
+   "format": "oxfmt",
-   "format:check": "prettier --check ."
+   "format:check": "oxfmt --check"
  }
}

CI ワークフロー

diff
  - name: フォーマットのチェック
-   run: yarn prettier --check .
+   run: yarn oxfmt --check

Git ハックス(husky, lint-staged)

package.json で:

diff
"lint-staged": {
- "*": "prettier --write --no-error-on-unmatched-pattern"
+ "*": "oxfmt --no-error-on-unmatched-pattern"
}

ステップ 5:フォーマッタの実行

sh
npm run format

必要がなくなったら、Prettier をアンインストールしてください。

オプションステップ

エディタの統合を更新する

エディタのセットアップ を参照してください。

ドキュメントの更新

適用される場合は、CONTRIBUTING.mdAGENTS.mdCLAUDE.md 内の Prettier に関する記述を更新してください。

ライントルールの更新

存在する場合、eslint-plugin-prettier を削除してください。必要であれば、CI パイプライン内で oxfmt --check ジョブに置き換えることができます。

なお、ESLint を継続して使用する予定がある場合、必ず コンフリクトするスタイル関連の ESLint ルールを無効化するために eslint-config-prettier を保持または追加してください。eslint-config-prettiereslint-plugin-prettier とは異なり、新しいルールを導入しません。これは単なる設定ファイルです。

また、Oxlint への移行も検討してください。

.git-blame-ignore-revs の更新

フォーマットの再調整を行ったコミットの SHA を .git-blame-ignore-revs に追加して、git blame からの表示を非表示にすることができます。

.prettierignore"ignorePatterns" に置き換える

もしあなたがもう Prettier を使っていないのであれば、.prettierignore の内容を、あなたの Oxfmt 設定内の "ignorePatterns" にオプションで移動することができます。詳細は ファイルの無視 を参照してください。