Prettier からの移行
このガイドでは、Prettier から Oxfmt への移行について説明します。
WARNING
Oxfmt はベータ版であり、特に複雑な設定には適していない可能性があります。
クイックスタート
簡単な設定の場合、1つのコマンドで移行できます:
$ npm add -D oxfmt@latest && npx oxfmt --migrate=prettier && npx oxfmt$ pnpm add -D oxfmt@latest && pnpm oxfmt --migrate=prettier && pnpm oxfmt$ yarn add -D oxfmt@latest && yarn oxfmt --migrate=prettier && yarn oxfmt$ 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 のインストール
$ npm add -D oxfmt@latest$ pnpm add -D oxfmt@latest$ yarn add -D oxfmt@latest$ bun add -D oxfmt@latest$ deno add -D npm:oxfmt@latestステップ 3:設定の移行
Oxfmt は .oxfmtrc.json または .oxfmtrc.jsonc を使用します。基本的な例:
{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"printWidth": 80,
}oxfmt --migrate prettier を実行すると、あなたの Prettier 設定を自動的に変換できます。
prettierrc.js 例
移行前:
module.exports = {
singleQuote: true,
jsxSingleQuote: true,
};移行後(.oxfmtrc.jsonc):
{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"singleQuote": true,
"jsxSingleQuote": true,
"printWidth": 80,
}prettierrc.yaml 例
移行前:
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true移行後(.oxfmtrc.jsonc):
{
"$schema": "./node_modules/oxfmt/configuration_schema.json",
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"printWidth": 80,
}ステップ 4:スクリプトの更新
package.json のスクリプト
{
"scripts": {
- "format": "prettier --write .",
+ "format": "oxfmt",
- "format:check": "prettier --check ."
+ "format:check": "oxfmt --check"
}
}CI ワークフロー
- name: フォーマットのチェック
- run: yarn prettier --check .
+ run: yarn oxfmt --checkGit ハックス(husky, lint-staged)
package.json で:
"lint-staged": {
- "*": "prettier --write --no-error-on-unmatched-pattern"
+ "*": "oxfmt --no-error-on-unmatched-pattern"
}ステップ 5:フォーマッタの実行
npm run format必要がなくなったら、Prettier をアンインストールしてください。
オプションステップ
エディタの統合を更新する
エディタのセットアップ を参照してください。
ドキュメントの更新
適用される場合は、CONTRIBUTING.md、AGENTS.md、CLAUDE.md 内の Prettier に関する記述を更新してください。
ライントルールの更新
存在する場合、eslint-plugin-prettier を削除してください。必要であれば、CI パイプライン内で oxfmt --check ジョブに置き換えることができます。
なお、ESLint を継続して使用する予定がある場合、必ず コンフリクトするスタイル関連の ESLint ルールを無効化するために eslint-config-prettier を保持または追加してください。eslint-config-prettier は eslint-plugin-prettier とは異なり、新しいルールを導入しません。これは単なる設定ファイルです。
また、Oxlint への移行も検討してください。
.git-blame-ignore-revs の更新
フォーマットの再調整を行ったコミットの SHA を .git-blame-ignore-revs に追加して、git blame からの表示を非表示にすることができます。
.prettierignore を "ignorePatterns" に置き換える
もしあなたがもう Prettier を使っていないのであれば、.prettierignore の内容を、あなたの Oxfmt 設定内の "ignorePatterns" にオプションで移動することができます。詳細は ファイルの無視 を参照してください。
