
Migrate Oxfmt
FreeSeamlessly transition your formatter to Oxfmt.
Free · Opens the source repo
What Migrate Oxfmt does
Migrate Oxfmt is a specialized tool designed to assist developers in transitioning their JavaScript or TypeScript projects from Prettier or Biome to Oxfmt, a high-performance code formatter. This skill is particularly useful for teams looking to adopt Oxfmt's capabilities while retaining their existing formatting configurations from Prettier or Biome. The migration process is streamlined with an automated tool that reads the existing configuration files and generates a new Oxfmt configuration, minimizing manual effort.
The migration process begins with an automated tool that can handle both static and dynamic configurations. For static configurations, users can simply run a command to migrate their settings directly. However, for dynamic configurations that involve logic, the tool provides a snapshot of the settings, which means some manual adjustments may be necessary afterward. This flexibility ensures that users can choose the best approach based on their project's specific needs.
Once the migration is initiated, the tool intelligently maps options from Prettier or Biome to their corresponding Oxfmt settings. It supports a wide range of configurations, making it easier to transition without losing the nuances of the original formatting rules. The generated .oxfmtrc.json file can then be reviewed for any necessary adjustments, ensuring that the project maintains its desired formatting standards. Developers can also take advantage of the detailed documentation provided to understand any changes that may need to be made post-migration.
Overall, Migrate Oxfmt is an essential skill for developers who are looking to switch their project's formatter to Oxfmt without the hassle of manually reconfiguring their settings. It simplifies the migration process and ensures that teams can quickly adapt to the new formatting tool with minimal disruption.
When to use it
Use this tool when you need to switch your JavaScript or TypeScript project's formatter to Oxfmt and want to retain your existing formatting configurations.
When not to use it
This skill is not suitable if you're starting a new project without any existing formatting configurations or if you require extensive customization that the automated tool cannot handle.
What you can build with it
Migrating a Large Codebase
When transitioning a large JavaScript codebase from Prettier to Oxfmt, this skill automates the migration process, saving time and reducing errors.
Switching Formatters in a Team Project
In a collaborative environment, use this skill to ensure all team members can easily switch to Oxfmt while maintaining consistent formatting.
Updating Project Formatting Standards
If your organization decides to adopt Oxfmt for its formatting needs, this skill provides a straightforward way to migrate existing projects.
How to install Migrate Oxfmt
View source1. Install with the skills CLI
npx skills add oxc-project/oxc/migrate-oxfmt --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by oxc-projectThis skill guides you through migrating a JavaScript/TypeScript project from Prettier or Biome to Oxfmt.
Overview
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.
Step 1: Run Automated Migration
First, decide whether the automated tool fits:
- Static root config (JSON/YAML, or a JS/TS config that just exports a plain object): use
--migratebelow. - Dynamic JS/TS config (logic such as environment branches or computed values):
--migratewrites only a resolved snapshot of the values — the logic does not survive. Migrate manually instead, porting the logic tooxfmt.config.tswith the option mappings in this guide. - Nested per-directory configs:
--migrateonly handles the config found from the current directory. Migrate the nested ones manually (see "Nested Config" in Step 2).
From Prettier
npx oxfmt@latest --migrate prettier
This will:
- Find and read your Prettier config (any format Prettier supports)
- Create
.oxfmtrc.jsonwith migrated options - Migrate
.prettierignorepatterns toignorePatterns - Migrate
prettier-plugin-tailwindcssoptions tosortTailwindcss - Migrate
prettier-plugin-svelteoptions tosvelte(svelteSortOrder→sortOrder,svelteAllowShorthand→allowShorthand,svelteIndentScriptAndStyle→indentScriptAndStyle) - Detect
prettier-plugin-packagejsonand enablesortPackageJson
From Biome
npx oxfmt@latest --migrate biome
This will:
- Find and read
biome.jsonorbiome.jsonc - Create
.oxfmtrc.jsonwith migrated options - Migrate negated patterns from
files.includestoignorePatterns - Map Biome's two-level config (
formatter.*andjavascript.formatter.*) to oxfmt options
Biome 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):
- For
formatter.*options in the table, ajavascript.formatter.*value of the same name takes precedence when present.bracketSameLineis read only fromjavascript.formatter.bracketSameLine. - Options not set in
biome.jsonare written to.oxfmtrc.jsonwith Biome's default values explicitly (e.g.printWidth: 80,useTabs: true), so the output preserves Biome's formatting behavior.
Notes (both sources):
- Fails if
.oxfmtrc.jsonor.oxfmtrc.jsoncalready exists. Delete it first if you want to re-run. - If no source config is found, creates a blank
.oxfmtrc.jsoninstead. overridescannot be auto-migrated for either source and must be converted manually (a warning is printed if detected).
Step 2: Review Generated Config
After migration, review the generated .oxfmtrc.json for these key differences:
printWidth
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.
Unsupported Options (Prettier only)
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 |
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.
sortPackageJson (Prettier only)
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.
embeddedLanguageFormatting (Prettier only)
Embedded language formatting (e.g., CSS-in-JS) generally works, but some formatting may differ from Prettier.
overrides
The overrides field cannot be auto-migrated from either Prettier or Biome. Convert manually:
{
"overrides": [
{
"files": ["*.md"],
"excludeFiles": ["CHANGELOG.md"],
"options": { "tabWidth": 4 }
}
]
}
(excludeFiles is optional.)
Nested Config
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).
Prettier-Compatible Options
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
Step 3: Configure Oxfmt Extensions
Oxfmt offers features not available in Prettier:
sortImports
Sort import statements, inspired by eslint-plugin-perfectionist/sort-imports (disabled by default):
{
"sortImports": {
"partitionByNewline": true,
"newlinesBetween": false
}
}
Other options: partitionByComment, sortSideEffects, order, ignoreCase, internalPattern, groups, customGroups.
sortTailwindcss
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 |
Other Extensions
| 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) |
Step 4: Update CI and 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
Common CLI Options
| 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 |
File Type Coverage
- JS/TS, JSON/JSONC/JSON5, CSS/SCSS/Less, GraphQL: Formatted natively by oxfmt
- TOML: Formatted natively (via taplo)
- HTML, YAML, Markdown, Vue, Svelte, etc.: Delegated to Prettier internally (when using
npx oxfmt)
Tips
- Config file:
.oxfmtrc.jsoncandoxfmt.config.tsare also supported as auto-discovered config file names, in addition to.oxfmtrc.json.--migrateand--initonly 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: Oxfmt reads
.editorconfigautomatically foruseTabs,tabWidth,endOfLine,insertFinalNewline,printWidth, andsingleQuote. Options in.oxfmtrc.jsontake precedence. - CI: Use
npx oxfmt@latest --checkto enforce formatting in CI. - LSP: Run
oxfmt --lspfor editor integration via Language Server Protocol. - Schema support: Add
"$schema": "./node_modules/oxfmt/configuration_schema.json"to.oxfmtrc.jsonfor editor autocompletion. - Init: Run
npx oxfmt@latest --initto create a default.oxfmtrc.jsonwithout migration.
References
Frequently asked questions about Migrate Oxfmt
Similar skills
React Composition Patterns
Streamline your React component architecture with proven patterns.
Pester Should Migration
Easily convert Pester v5 assertions to v6 syntax.
Radix to Base UI Migration
Seamlessly migrate React components from Radix UI to Base UI.
Migrate Next.js to Vinext
Seamlessly transition your Next.js projects to Vinext.
WinUI 3 Migration Guide
Streamline your UWP to WinUI 3 migration process.
Refactor
Enhance code maintainability without altering behavior.
