skillZs
LIVE SKILL TAGS
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
REAL INSTALL DATA
← back to all skills
oxc-project/oxc2.8k installs

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.

How do I install this agent skill?

npx skills add https://github.com/oxc-project/oxc --skill migrate-oxfmt
view source ↗

Is this agent skill safe to install?

  • Gen Agent Trust Hubpass

    The skill provides a legitimate guide for migrating JavaScript/TypeScript project formatters to Oxfmt. It utilizes standard developer tools and official project resources without any detected security risks.

  • Socketpass

    No alerts

  • Snykwarn

    Risk: MEDIUM · No issues

  • Runlayerpass

    1 file scanned · No issues

  • ZeroLeakspass

    Score: 93/100 · 2 sections analyzed

What does this agent skill do?

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:

Biomeoxfmt
formatter.indentStyle ("tab"/"space")useTabs (true/false)
formatter.indentWidthtabWidth
formatter.lineWidthprintWidth
javascript.formatter.quoteStylesingleQuote
javascript.formatter.jsxQuoteStylejsxSingleQuote
javascript.formatter.quoteProperties ("asNeeded")quoteProps ("as-needed")
javascript.formatter.trailingCommastrailingComma
javascript.formatter.semicolons ("always"/"asNeeded")semi (true/false)
javascript.formatter.arrowParentheses ("asNeeded")arrowParens ("avoid")
javascript.formatter.bracketSameLinebracketSameLine
formatter.bracketSpacingbracketSpacing
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:

OptionStatus
endOfLine: "auto"Not supported. Use "lf" or "crlf" explicitly
experimentalTernariesNot supported in JS/TS files yet
experimentalOperatorPositionNot supported in JS/TS files yet
requirePragma, insertPragmaNot supported
parser, filepathNot 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.*)
tailwindConfigconfig
tailwindStylesheetstylesheet
tailwindFunctionsfunctions
tailwindAttributesattributes
tailwindPreserveWhitespacepreserveWhitespace
tailwindPreserveDuplicatespreserveDuplicates

Other Extensions

OptionDefaultDescription
insertFinalNewlinetrueWhether to add a final newline at end of file
sortPackageJsontrueSort package.json keys. Set { "sortScripts": true } to also sort scripts
jsdocdisabledFormat JSDoc comments. Set true or an options object for fine-grained control
sveltedisabledSvelte 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 / Biomeoxfmt
prettier --write . / biome format --write .oxfmt (default: cwd, --write mode)
prettier --check . / biome check .oxfmt --check
prettier --list-different .oxfmt --list-different
prettier --config pathoxfmt --config path
prettier --ignore-path .prettierignoreoxfmt --ignore-path .prettierignore
cat file | prettier --stdin-filepath=file.tscat 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

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/oxc-project/oxc/migrate-oxfmt">View migrate-oxfmt on skillZs</a>