npx skills add ...
npx skills add oxc-project/oxc --skill migrate-oxfmt
Guide for migrating a project from Prettier or Biome to Oxfmt. Use when asked to migrate, convert, or switch a JavaScript/TypeScript project's formatter from Prettier or Biome to Oxfmt.
npx skills add oxc-project/oxc --skill migrate-oxfmt
This skill guides you through migrating a JavaScript/TypeScript project from Prettier or Biome to Oxfmt.
Oxfmt is a high-performance, Prettier-compatible code formatter. Most Prettier options are supported directly.
An automated migration tool is built into oxfmt, supporting both Prettier and Biome as migration sources.
First, decide whether the automated tool fits:
--migrate below.--migrate writes only a resolved snapshot of the values — the logic does not survive. Migrate manually instead, porting the logic to oxfmt.config.ts with the option mappings in this guide.--migrate only handles the config found from the current directory. Migrate the nested ones manually (see "Nested Config" in Step 2).This will:
.oxfmtrc.json with migrated options.prettierignore patterns to ignorePatternsprettier-plugin-tailwindcss options to sortTailwindcssprettier-plugin-svelte options to svelte (svelteSortOrder → sortOrder, svelteAllowShorthand → allowShorthand, svelteIndentScriptAndStyle → indentScriptAndStyle)prettier-plugin-packagejson and enable sortPackageJsonThis will:
biome.json or biome.jsonc.oxfmtrc.json with migrated optionsfiles.includes to ignorePatternsformatter.* and javascript.formatter.*) to oxfmt optionsBiome option mapping:
| Biome | oxfmt |
|---|---|
formatter.indentStyle ("tab"/"space") | useTabs (true/false) |
formatter.indentWidth | tabWidth |
formatter.lineWidth | printWidth |
javascript.formatter.quoteStyle | singleQuote |
javascript.formatter.jsxQuoteStyle | jsxSingleQuote |
javascript.formatter.quoteProperties ("asNeeded") | quoteProps ("as-needed") |
javascript.formatter.trailingCommas | trailingComma |
javascript.formatter.semicolons ("always"/"asNeeded") | semi (true/false) |
javascript.formatter.arrowParentheses ("asNeeded") | arrowParens ("avoid") |
javascript.formatter.bracketSameLine | bracketSameLine |
formatter.bracketSpacing | bracketSpacing |
formatter.attributePosition ("multiline") | singleAttributePerLine (true) |
Notes (Biome):
formatter.* options in the table, a javascript.formatter.* value of the same name takes precedence when present. bracketSameLine is read only from javascript.formatter.bracketSameLine.biome.json are written to .oxfmtrc.json with Biome's default values explicitly (e.g. printWidth: 80, useTabs: true), so the output preserves Biome's formatting behavior.Notes (both sources):
.oxfmtrc.json or .oxfmtrc.jsonc already exists. Delete it first if you want to re-run..oxfmtrc.json instead.overrides cannot be auto-migrated for either source and must be converted manually (a warning is printed if detected).After migration, review the generated .oxfmtrc.json for these key differences:
Prettier and Biome default is 80, oxfmt default is 100. The migration tool sets printWidth: 80 if not specified in your source config. Decide whether to keep 80 or adopt 100.
These Prettier options are skipped during migration:
| Option | Status |
|---|---|
endOfLine: "auto" | Not supported. Use "lf" or "crlf" explicitly |
experimentalTernaries | Not supported in JS/TS files yet |
requirePragma, insertPragma | Not supported |
parser, filepath | Not applicable to oxfmt |
Regex values (e.g. "/^my-/") in tailwindFunctions / tailwindAttributes are also skipped with a warning — oxfmt only supports literal strings there.
Enabled by default in oxfmt, but the migration tool disables it unless prettier-plugin-packagejson was detected. Review whether you want this enabled.
Note: Oxfmt's sorting algorithm differs from prettier-plugin-packagejson.
Embedded language formatting (e.g., CSS-in-JS) generally works, but some formatting may differ from Prettier.
The overrides field cannot be auto-migrated from either Prettier or Biome. Convert manually:
(excludeFiles is optional.)
Oxfmt supports nested configuration files: a .oxfmtrc.json in a subdirectory applies to files under that directory. Pass --disable-nested-config to opt out and use only the root config.
However, --migrate only migrates the config found from the current directory — it does not walk subdirectories. If the project has per-directory Prettier or Biome configs, you must migrate each one yourself: convert each nested config to a .oxfmtrc.json in the same directory manually (using the option mappings in this guide).
These options transfer directly with the same behavior:
printWidth, tabWidth, useTabs, semi, singleQuote, jsxSingleQuote, quoteProps, trailingComma, arrowParens, bracketSpacing, bracketSameLine, objectWrap, endOfLine, proseWrap, htmlWhitespaceSensitivity, singleAttributePerLine, vueIndentScriptAndStyle, embeddedLanguageFormatting
Oxfmt offers features not available in Prettier:
Sort import statements, inspired by eslint-plugin-perfectionist/sort-imports (disabled by default):
Other options: partitionByComment, sortSideEffects, order, ignoreCase, internalPattern, groups, customGroups.
Replaces prettier-plugin-tailwindcss. Auto-migrated with renamed options:
| Prettier (top-level) | oxfmt (sortTailwindcss.*) |
|---|---|
tailwindConfig | config |
tailwindStylesheet | stylesheet |
tailwindFunctions | functions |
tailwindAttributes | attributes |
tailwindPreserveWhitespace | preserveWhitespace |
tailwindPreserveDuplicates | preserveDuplicates |
| Option | Default | Description |
|---|---|---|
insertFinalNewline | true | Whether to add a final newline at end of file |
sortPackageJson | true | Sort package.json keys. Set { "sortScripts": true } to also sort scripts |
jsdoc | disabled | Format JSDoc comments. Set true or an options object for fine-grained control |
svelte | disabled | Svelte formatting options, replacing prettier-plugin-svelte (auto-migrated) |
Replace formatter commands with oxfmt:
| Prettier / Biome | oxfmt |
|---|---|
prettier --write . / biome format --write . | oxfmt (default: cwd, --write mode) |
prettier --check . / biome check . | oxfmt --check |
prettier --list-different . | oxfmt --list-different |
prettier --config path | oxfmt --config path |
prettier --ignore-path .prettierignore | oxfmt --ignore-path .prettierignore |
cat file | prettier --stdin-filepath=file.ts | cat file | oxfmt --stdin-filepath=file.ts |
npx oxfmt).oxfmtrc.jsonc and oxfmt.config.ts are also supported as auto-discovered config file names, in addition to .oxfmtrc.json. --migrate and --init only generate .oxfmtrc.json; keep it as-is unless the user explicitly asks for another format or the source config had logic to preserve (see Step 1)..editorconfig automatically for useTabs, tabWidth, endOfLine, insertFinalNewline, printWidth, and singleQuote. Options in .oxfmtrc.json take precedence.npx oxfmt@latest --check to enforce formatting in CI.oxfmt --lsp for editor integration via Language Server Protocol."$schema": "./node_modules/oxfmt/configuration_schema.json" to .oxfmtrc.json for editor autocompletion.npx oxfmt@latest --init to create a default .oxfmtrc.json without migration.{
"sortImports": {
"partitionByNewline": true,
"newlinesBetween": false
}
}# Before (Prettier)
npx prettier --write .
npx prettier --check .
# Before (Biome)
npx biome format --write .
npx biome check .
# After
npx oxfmt@latest
npx oxfmt@latest --check