|
| 1 | +--- |
| 2 | +name: migrate-oxfmt |
| 3 | +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. |
| 4 | +--- |
| 5 | + |
| 6 | +This skill guides you through migrating a JavaScript/TypeScript project from Prettier or Biome to [Oxfmt](https://oxc.rs/docs/guide/usage/formatter). |
| 7 | + |
| 8 | +## Overview |
| 9 | + |
| 10 | +Oxfmt is a high-performance, Prettier-compatible code formatter. Most Prettier options are supported directly. |
| 11 | + |
| 12 | +An automated migration tool is built into oxfmt, supporting both Prettier and Biome as migration sources. |
| 13 | + |
| 14 | +## Step 1: Run Automated Migration |
| 15 | + |
| 16 | +### From Prettier |
| 17 | + |
| 18 | +```bash |
| 19 | +npx oxfmt@latest --migrate prettier |
| 20 | +``` |
| 21 | + |
| 22 | +This will: |
| 23 | + |
| 24 | +- Find and read your Prettier config (any format Prettier supports) |
| 25 | +- Create `.oxfmtrc.json` with migrated options |
| 26 | +- Migrate `.prettierignore` patterns to `ignorePatterns` |
| 27 | +- Migrate `prettier-plugin-tailwindcss` options to `sortTailwindcss` |
| 28 | +- Detect `prettier-plugin-packagejson` and enable `sortPackageJson` |
| 29 | + |
| 30 | +### From Biome |
| 31 | + |
| 32 | +```bash |
| 33 | +npx oxfmt@latest --migrate biome |
| 34 | +``` |
| 35 | + |
| 36 | +This will: |
| 37 | + |
| 38 | +- Find and read `biome.json` or `biome.jsonc` |
| 39 | +- Create `.oxfmtrc.json` with migrated options |
| 40 | +- Migrate negated patterns from `files.includes` to `ignorePatterns` |
| 41 | +- Map Biome's two-level config (`formatter.*` and `javascript.formatter.*`) to oxfmt options |
| 42 | + |
| 43 | +Biome option mapping: |
| 44 | + |
| 45 | +| Biome | oxfmt | |
| 46 | +| ----------------------------------------------------------- | --------------------------------- | |
| 47 | +| `formatter.indentStyle` (`"tab"`/`"space"`) | `useTabs` (`true`/`false`) | |
| 48 | +| `formatter.indentWidth` | `tabWidth` | |
| 49 | +| `formatter.lineWidth` | `printWidth` | |
| 50 | +| `javascript.formatter.quoteStyle` | `singleQuote` | |
| 51 | +| `javascript.formatter.jsxQuoteStyle` | `jsxSingleQuote` | |
| 52 | +| `javascript.formatter.quoteProperties` (`"asNeeded"`) | `quoteProps` (`"as-needed"`) | |
| 53 | +| `javascript.formatter.trailingCommas` | `trailingComma` | |
| 54 | +| `javascript.formatter.semicolons` (`"always"`/`"asNeeded"`) | `semi` (`true`/`false`) | |
| 55 | +| `javascript.formatter.arrowParentheses` (`"asNeeded"`) | `arrowParens` (`"avoid"`) | |
| 56 | +| `formatter.bracketSameLine` | `bracketSameLine` | |
| 57 | +| `formatter.bracketSpacing` | `bracketSpacing` | |
| 58 | +| `formatter.attributePosition` (`"multiline"`) | `singleAttributePerLine` (`true`) | |
| 59 | + |
| 60 | +Notes (both sources): |
| 61 | + |
| 62 | +- Fails if `.oxfmtrc.json` already exists. Delete it first if you want to re-run. |
| 63 | +- If no source config is found, creates a blank `.oxfmtrc.json` instead. |
| 64 | +- `overrides` cannot be auto-migrated for either source and must be converted manually. |
| 65 | + |
| 66 | +## Step 2: Review Generated Config |
| 67 | + |
| 68 | +After migration, review the generated `.oxfmtrc.json` for these key differences: |
| 69 | + |
| 70 | +### printWidth |
| 71 | + |
| 72 | +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. |
| 73 | + |
| 74 | +### Unsupported Options (Prettier only) |
| 75 | + |
| 76 | +These Prettier options are skipped during migration: |
| 77 | + |
| 78 | +| Option | Status | |
| 79 | +| ------------------------------ | ------------------------------------------------ | |
| 80 | +| `endOfLine: "auto"` | Not supported. Use `"lf"` or `"crlf"` explicitly | |
| 81 | +| `experimentalTernaries` | Not supported in JS/TS files yet | |
| 82 | +| `experimentalOperatorPosition` | Not supported in JS/TS files yet | |
| 83 | + |
| 84 | +### sortPackageJson (Prettier only) |
| 85 | + |
| 86 | +Enabled by default in oxfmt, but the migration tool disables it unless `prettier-plugin-packagejson` was detected. Review whether you want this enabled. |
| 87 | + |
| 88 | +Note: Oxfmt's sorting algorithm differs from `prettier-plugin-packagejson`. |
| 89 | + |
| 90 | +### embeddedLanguageFormatting (Prettier only) |
| 91 | + |
| 92 | +Embedded language formatting (e.g., CSS-in-JS) generally works, but some formatting may differ from Prettier. |
| 93 | + |
| 94 | +### overrides |
| 95 | + |
| 96 | +The `overrides` field cannot be auto-migrated from either Prettier or Biome. Convert manually: |
| 97 | + |
| 98 | +```json |
| 99 | +{ |
| 100 | + "overrides": [ |
| 101 | + { |
| 102 | + "files": ["*.md"], |
| 103 | + "options": { "tabWidth": 4 } |
| 104 | + } |
| 105 | + ] |
| 106 | +} |
| 107 | +``` |
| 108 | + |
| 109 | +### Nested Config |
| 110 | + |
| 111 | +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. |
| 112 | + |
| 113 | +### Prettier-Compatible Options |
| 114 | + |
| 115 | +These options transfer directly with the same behavior: |
| 116 | +`tabWidth`, `useTabs`, `semi`, `singleQuote`, `jsxSingleQuote`, `quoteProps`, `trailingComma`, `arrowParens`, `bracketSpacing`, `bracketSameLine`, `endOfLine`, `proseWrap`, `htmlWhitespaceSensitivity`, `singleAttributePerLine`, `vueIndentScriptAndStyle` |
| 117 | + |
| 118 | +## Step 3: Configure Oxfmt Extensions |
| 119 | + |
| 120 | +Oxfmt offers features not available in Prettier: |
| 121 | + |
| 122 | +### sortImports |
| 123 | + |
| 124 | +Sort import statements, inspired by `eslint-plugin-perfectionist/sort-imports` (disabled by default): |
| 125 | + |
| 126 | +```json |
| 127 | +{ |
| 128 | + "sortImports": { |
| 129 | + "partitionByNewline": true, |
| 130 | + "newlinesBetween": false |
| 131 | + } |
| 132 | +} |
| 133 | +``` |
| 134 | + |
| 135 | +### sortTailwindcss |
| 136 | + |
| 137 | +Replaces `prettier-plugin-tailwindcss`. Auto-migrated with renamed options: |
| 138 | + |
| 139 | +| Prettier (top-level) | oxfmt (`sortTailwindcss.*`) | |
| 140 | +| ---------------------------- | --------------------------- | |
| 141 | +| `tailwindConfig` | `config` | |
| 142 | +| `tailwindStylesheet` | `stylesheet` | |
| 143 | +| `tailwindFunctions` | `functions` | |
| 144 | +| `tailwindAttributes` | `attributes` | |
| 145 | +| `tailwindPreserveWhitespace` | `preserveWhitespace` | |
| 146 | +| `tailwindPreserveDuplicates` | `preserveDuplicates` | |
| 147 | + |
| 148 | +### Other Extensions |
| 149 | + |
| 150 | +| Option | Default | Description | |
| 151 | +| -------------------- | ------- | ---------------------------------------------------------------------------- | |
| 152 | +| `insertFinalNewline` | `true` | Whether to add a final newline at end of file | |
| 153 | +| `sortPackageJson` | `true` | Sort `package.json` keys. Set `{ "sortScripts": true }` to also sort scripts | |
| 154 | + |
| 155 | +## Step 4: Update CI and Scripts |
| 156 | + |
| 157 | +Replace formatter commands with oxfmt: |
| 158 | + |
| 159 | +```bash |
| 160 | +# Before (Prettier) |
| 161 | +npx prettier --write . |
| 162 | +npx prettier --check . |
| 163 | + |
| 164 | +# Before (Biome) |
| 165 | +npx biome format --write . |
| 166 | +npx biome check . |
| 167 | + |
| 168 | +# After |
| 169 | +npx oxfmt@latest |
| 170 | +npx oxfmt@latest --check |
| 171 | +``` |
| 172 | + |
| 173 | +### Common CLI Options |
| 174 | + |
| 175 | +| Prettier / Biome | oxfmt | |
| 176 | +| ----------------------------------------------- | -------------------------------------------- | |
| 177 | +| `prettier --write .` / `biome format --write .` | `oxfmt` (default: cwd, `--write` mode) | |
| 178 | +| `prettier --check .` / `biome check .` | `oxfmt --check` | |
| 179 | +| `prettier --list-different .` | `oxfmt --list-different` | |
| 180 | +| `prettier --config path` | `oxfmt --config path` | |
| 181 | +| `prettier --ignore-path .prettierignore` | `oxfmt --ignore-path .prettierignore` | |
| 182 | +| `cat file \| prettier --stdin-filepath=file.ts` | `cat file \| oxfmt --stdin-filepath=file.ts` | |
| 183 | + |
| 184 | +### File Type Coverage |
| 185 | + |
| 186 | +- JS/TS: Formatted natively by oxfmt |
| 187 | +- TOML: Formatted natively (via taplo) |
| 188 | +- CSS, HTML, YAML, Markdown, GraphQL, etc.: Delegated to Prettier internally (when using `npx oxfmt`) |
| 189 | + |
| 190 | +## Tips |
| 191 | + |
| 192 | +- EditorConfig: Oxfmt reads `.editorconfig` automatically for `useTabs`, `tabWidth`, `endOfLine`, `insertFinalNewline`, and `printWidth`. Options in `.oxfmtrc.json` take precedence. |
| 193 | +- CI: Use `npx oxfmt@latest --check` to enforce formatting in CI. |
| 194 | +- LSP: Run `oxfmt --lsp` for editor integration via Language Server Protocol. |
| 195 | +- Schema support: Add `"$schema": "./node_modules/oxfmt/configuration_schema.json"` to `.oxfmtrc.json` for editor autocompletion. |
| 196 | +- Init: Run `npx oxfmt@latest --init` to create a default `.oxfmtrc.json` without migration. |
| 197 | + |
| 198 | +## References |
| 199 | + |
| 200 | +- [CLI Reference](https://oxc.rs/docs/guide/usage/formatter/cli.html) |
| 201 | +- [Config File Reference](https://oxc.rs/docs/guide/usage/formatter/config-file-reference.html) |
| 202 | +- [Unsupported Features](https://oxc.rs/docs/guide/usage/formatter/unsupported-features.html) |
0 commit comments