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.
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.
npx oxfmt@latest --migrate prettier
This will:
.oxfmtrc.json with migrated options.prettierignore patterns to ignorePatternsprettier-plugin-tailwindcss options to sortTailwindcssprettier-plugin-packagejson and enable sortPackageJsonnpx oxfmt@latest --migrate biome
This 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") |
formatter.bracketSameLine | bracketSameLine |
formatter.bracketSpacing | bracketSpacing |
formatter.attributePosition ("multiline") | singleAttributePerLine (true) |
Notes (both sources):
.oxfmtrc.json 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.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 |
experimentalOperatorPosition | Not supported in JS/TS files yet |
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:
{
"overrides": [
{
"files": ["*.md"],
"options": { "tabWidth": 4 }
}
]
}
Oxfmt does not support nested configuration files (e.g., a separate .oxfmtrc.json in a subdirectory). If your project used per-directory Prettier or Biome configs, consolidate them using overrides with file glob patterns, or run oxfmt separately per directory with different working directories.
These options transfer directly with the same behavior:
tabWidth, useTabs, semi, singleQuote, jsxSingleQuote, quoteProps, trailingComma, arrowParens, bracketSpacing, bracketSameLine, endOfLine, proseWrap, htmlWhitespaceSensitivity, singleAttributePerLine, vueIndentScriptAndStyle
Oxfmt offers features not available in Prettier:
Sort import statements, inspired by eslint-plugin-perfectionist/sort-imports (disabled by default):
{
"sortImports": {
"partitionByNewline": true,
"newlinesBetween": false
}
}
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 |
Replace formatter commands with oxfmt:
# 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
| 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).editorconfig automatically for useTabs, tabWidth, endOfLine, insertFinalNewline, and printWidth. 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.