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.

By oxc-project · 3,806 installs

npx skills add oxc-project/oxc --skill migrate-oxfmt

Source repository · Upstream listing

This skill guides you through migrating a project from Prettier or Biome to [Oxfmt](https://oxc.rs/docs/guide/usage/formatter). 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 config (JSON, 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, and the logic does not survive (a warning is printed). Port the logic to oxfmt.config.ts manually with the option mappings in this guide. Nested per directory configs: migrate only handles the config in the current directory. Run it again in each nested directory (see "Nested Config" in Step 2). From Prettier This will: Find your Prettier config in the current directory, in the same order as Prettier Supported: package.json ( prettier field), .prettierrc (JSON only), .prettierrc.json , and JS/TS configs ( .prettierrc. , prettier.config. ) Shareable configs (e.g. "prettier": "@company/prettier config" ) are resolved YAML, JSON5 and TOML configs are not supported. Convert them to JSON or JS first Create .oxfmtrc.json with migrated options Only Prettier compatible options are migrated, others are skipped with a warning Migrate overrides overrides[].options.parser is migrated to associations[].language Migrate .prettierignore patterns to ignorePatterns Migrate prettier plugin tailwindcss options to sortTailwindcss Migrate prettier plugin svelte options to svelte ( svelteSortOrder → sortOrder , svelteAllowShorthand → allowShorthand , svelteIndentScriptAndStyle → indentScriptAndStyle ) Migrate prettier plugin astro options to astro ( astroAllowShorthand → allowShorthand , astroSkipFrontmatter → skipFrontmatter , astroCompressHTML → compressHTML ) Detect prettier plugin packagejson and enable sortPackageJson Skip other plugins with a warning Notes (Prettier): Fails if no Prettier config is found in the current directory. Use init to create a blank .oxfmtrc.json instead. The generated .oxfmtrc.json may not be formatted yet. Run oxfmt after migration. From 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. If no Biome config is found, creates a blank .oxfmtrc.json instead. overrides cannot be auto migrated and must be converted manually (a warning is printed if detected). Notes (both sources): Fails if an Oxfmt config ( .oxfmtrc.json , .oxfmtrc.jsonc , oxfmt.config.ts or oxfmt.config.mts ) already exists. Delete it first if you want to re run. 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) Any option not in "Prettier Compatible Options" below is skipped with a warning, including options of unsupported plugins (e.g. importOrder ). Notable ones: Option Status endOfLine: "auto" Not supported. Use "lf" or "crlf" explicitly experimentalTernaries Not supported requirePragma , insertPragma Not supported parser Skipped at top level. In overrides , migrated to associations if known plugins Only known plugins are migrated (see Step 1) 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. overrides Prettier overrides are auto migrated. Unsupported options in them are skipped with a warning, so review the result. overrides[].options.parser is migrated to associations , which tells Oxfmt which language to use for matched files: language is a Shiki language id (as in Markdown code fences), not a Prettier parser name (e.g. angular html instead of angular , typescript instead of babel ts ). Biome overrides cannot be auto migrated. Convert manually: ( excludeFiles is optional.) Nested Config Oxfmt supports nested configuration files: a config 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 in the current directory, and does not walk subdirectories. If the project has per directory Prettier or Biome configs, run migrate in each of those directories. Prettier Compatible Options These options transfer directly with the same behavior: printWidth , tabWidth , useTabs , semi , singleQuote , jsxSingleQuote , quoteProps , trailingComma , arrowParens , bracketSpacing , bracketSameLine , objectWrap , experimentalOperatorPosition , 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): 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) astro disabled Astro formatting options, replacing prettier plugin astro (auto migrated) associations [] Format matched files as the given language (e.g. .svg as html ) Step 4: Update CI and Scripts Replace formatter commands with Oxfmt: 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, YAML, Markdown, TOML: Formatted natively by Oxfmt HTML, Vue, Svelte, Astro, 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. Nearest one only, does not respect root 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](https://oxc.rs/docs/guide/usage/formatter/cli.html) [Config File Reference](https://oxc.rs/docs/guide/usage/formatter/config file reference.html) [Unsupported Features](https://oxc.rs/docs/guide/usage/formatter/unsupported features.html)