Skip to content

Migrate from Prettier โ€‹

This guide covers migrating from Prettier to Oxfmt.

Quick start โ€‹

For simple setups, migrate with a single command:

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

Migrate with Skills โ€‹

You can migrate interactively using the migrate-oxfmt skill:

bash
npx skills add https://github.com/oxc-project/oxc --skill migrate-oxfmt

Once installed, run /migrate-oxfmt and the agent will walk you through the full migration.

Before you migrate โ€‹

Oxfmt is compatible with Prettier v3.8 for many configurations.

Key differences:

  • Default printWidth is 100 (Prettier uses 80)
  • Prettier plugins are not supported (though some popular plugins have been implemented natively)
  • Some options are not supported (see config reference)

See Unsupported features for details, and the compatibility matrix for file type support.

Step 1: Upgrade Prettier to v3.8 (optional) โ€‹

Oxfmt's output is closest to Prettier v3.8. Upgrading first minimizes formatting differences.

Step 2: Install 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

Step 3: Migrate configuration โ€‹

Oxfmt uses .oxfmtrc.json, .oxfmtrc.jsonc, or oxfmt.config.ts. Basic example:

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

Run oxfmt --migrate prettier to convert your Prettier config automatically.

prettierrc.js example โ€‹

Before:

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

After (oxfmt.config.ts):

oxfmt.config.ts
ts
import { defineConfig } from "oxfmt";

export default defineConfig({
  singleQuote: true,
  jsxSingleQuote: true,
  printWidth: 80,
});

prettierrc.yaml example โ€‹

Before:

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

After (.oxfmtrc.jsonc):

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

Step 4: Update scripts โ€‹

package.json scripts โ€‹

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

CI workflows โ€‹

diff
  - name: Check formatting
-   run: yarn prettier --check .
+   run: yarn oxfmt --check

Git hooks (husky, lint-staged) โ€‹

In package.json:

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

Step 5: Run formatter โ€‹

sh
npm run format

Uninstall Prettier if it is no longer needed.

Optional steps โ€‹

Update editor integrations โ€‹

See Setup editors.

Update documentation โ€‹

Update references to Prettier in CONTRIBUTING.md, AGENTS.md, and CLAUDE.md if applicable.

Update lint rules โ€‹

Remove eslint-plugin-prettier if present. If needed, it can be replaced by a oxfmt --check job in your CI pipelines.

Note that if you intend to continue using ESLint, you should keep or add eslint-config-prettier to disable styling-related ESLint rules that might conflict with Oxfmt. eslint-config-prettier is different from eslint-plugin-prettier, as it has no new lint rules. It is only a config.

Also, consider migrating to Oxlint.

Update .git-blame-ignore-revs โ€‹

Add the reformatting commit SHA to .git-blame-ignore-revs to hide it from git blame.

Replace .prettierignore with "ignorePatterns" โ€‹

If you no longer use Prettier, you can optionally move its contents from .prettierignore to "ignorePatterns" in your Oxfmt config. Note that .prettierignore applies globally, while ignorePatterns is scoped to the config file it belongs to. In a nested config setup, this may change which files are ignored. See Ignore files for more information.