migrate-oxfmt

This skill guides you through migrating a JavaScript/TypeScript project from Prettier or Biome to Oxfmt.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "migrate-oxfmt" with this command: npx skills add oxc-project/oxc/oxc-project-oxc-migrate-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

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

  • 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" )

formatter.bracketSameLine

bracketSameLine

formatter.bracketSpacing

bracketSpacing

formatter.attributePosition ("multiline" ) singleAttributePerLine (true )

Notes (both sources):

  • Fails if .oxfmtrc.json 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.

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

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"], "options": { "tabWidth": 4 } } ] }

Nested Config

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.

Prettier-Compatible Options

These options transfer directly with the same behavior: tabWidth , useTabs , semi , singleQuote , jsxSingleQuote , quoteProps , trailingComma , arrowParens , bracketSpacing , bracketSameLine , endOfLine , proseWrap , htmlWhitespaceSensitivity , singleAttributePerLine , vueIndentScriptAndStyle

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 } }

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

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: Formatted natively by oxfmt

  • TOML: Formatted natively (via taplo)

  • CSS, HTML, YAML, Markdown, GraphQL, etc.: Delegated to Prettier internally (when using npx oxfmt )

Tips

  • EditorConfig: Oxfmt reads .editorconfig automatically for useTabs , tabWidth , endOfLine , insertFinalNewline , and printWidth . 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

  • CLI Reference

  • Config File Reference

  • Unsupported Features

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

migrate-oxlint

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

arxiv-paper-writer

Use this skill whenever the user wants Claude Code to write, scaffold, compile, debug, or review an arXiv-style academic paper, especially survey papers with LaTeX, BibTeX citations, TikZ figures, tables, and PDF output. This skill should trigger for requests like writing a full paper, creating an arXiv paper project, turning a research topic into a LaTeX manuscript, reproducing the Paper-Write-Skill-Test agent-survey workflow, or setting up a Windows/Linux Claude Code paper-writing loop.

Archived SourceRecently Updated
Coding

cli-proxy-troubleshooting

排查 CLI Proxy API(codex-api-proxy)的配置、认证、模型注册和请求问题。适用场景包括:(1) AI 请求报错 unknown provider for model, (2) 模型列表中缺少预期模型, (3) codex-api-key/auth-dir 配置不生效, (4) CLI Proxy 启动后 AI 无法调用, (5) 认证成功但请求失败或超时。包含源码级排查方法:模型注册表架构、认证加载链路、 SanitizeCodexKeys 规则、常见错误的真实根因。

Archived SourceRecently Updated
Coding

visual-summary-analysis

Performs AI analysis on input video clips/image content and generates a smooth, natural scene description. | 视觉摘要智述技能,对传入的视频片段/图片内容进行AI分析,生成一段通顺自然的场景描述内容

Archived SourceRecently Updated