migrate-oxfmt

migrate-oxfmt

Popular

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.

22Kstars
1.2Kforks
Updated 7/24/2026
SKILL.md
readonlyread-only
name
migrate-oxfmt
description

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.

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 --migrate below.
  • Dynamic JS/TS config (logic such as environment branches or computed values): --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.
  • Nested per-directory configs: --migrate only 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.json with migrated options
  • Migrate .prettierignore patterns to ignorePatterns
  • Migrate prettier-plugin-tailwindcss options to sortTailwindcss
  • Migrate prettier-plugin-svelte options to svelte (svelteSortOrdersortOrder, svelteAllowShorthandallowShorthand, svelteIndentScriptAndStyleindentScriptAndStyle)
  • Detect prettier-plugin-packagejson and enable sortPackageJson

From Biome

npx oxfmt@latest --migrate biome

This will:

  • Find and read biome.json or biome.jsonc
  • Create .oxfmtrc.json with migrated options
  • Migrate negated patterns from files.includes to ignorePatterns
  • Map Biome's two-level config (formatter.* and javascript.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, a javascript.formatter.* value of the same name takes precedence when present. bracketSameLine is read only from javascript.formatter.bracketSameLine.
  • Options not set in 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):

  • Fails if .oxfmtrc.json or .oxfmtrc.jsonc already exists. Delete it first if you want to re-run.
  • If no source config is found, creates a blank .oxfmtrc.json instead.
  • overrides cannot 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.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: Oxfmt reads .editorconfig automatically for useTabs, tabWidth, endOfLine, insertFinalNewline, printWidth, and singleQuote. Options in .oxfmtrc.json take precedence.
  • CI: Use npx oxfmt@latest --check to enforce formatting in CI.
  • LSP: Run oxfmt --lsp for editor integration via Language Server Protocol.
  • Schema support: Add "$schema": "./node_modules/oxfmt/configuration_schema.json" to .oxfmtrc.json for editor autocompletion.
  • Init: Run npx oxfmt@latest --init to create a default .oxfmtrc.json without migration.

References