oxc-project/migrate-oxfmt

O que migrate-oxfmt faz?

Guia para migrar um projeto do Prettier ou Biome para o Oxfmt. Use quando solicitado a migrar, converter ou trocar o formatador de um projeto JavaScript/TypeScript do Prettier ou Biome para o Oxfmt.

Visão Geral

O Oxfmt é o formatador de código do projeto Oxc, um conjunto de ferramentas de alto desempenho para JavaScript/TypeScript. Esta skill orienta a migração de um projeto que atualmente usa Prettier ou Biome para usar o Oxfmt.

Motivação

O Oxfmt é significativamente mais rápido que o Prettier e o Biome, oferecendo formatação quase instantânea para projetos grandes. Além disso, é compatível com a maioria das configurações e opções de formatação do Prettier, facilitando a migração.

Pré-requisitos

• Node.js 16+ ou Rust (para instalação via cargo)
• Projeto JavaScript/TypeScript existente com formatação via Prettier ou Biome

Instalação

Usando npm

npm install --save-dev oxfmt

Usando pnpm

pnpm add --save-dev oxfmt

Usando yarn

yarn add --dev oxfmt

Usando cargo (para instalação global)

cargo install oxfmt

Configuração

Substitua as configurações existentes do Prettier ou Biome:

Prettier

1. Remova o arquivo .prettierrc (ou .prettierrc.json, .prettierrc.js)
2. Remova o arquivo .prettierignore
3. Crie um arquivo .oxfmtrc na raiz do projeto:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

Biome

1. Remova a seção formatter do arquivo biome.json
2. Crie um arquivo .oxfmtrc na raiz do projeto (veja exemplo acima)

Opções de linha de comando

# Verificar formatação (similar ao --check do Prettier)
oxfmt --check "src/**/*.{js,ts,jsx,tsx}"

# Formatando arquivos no lugar
oxfmt --write "src/**/*.{js,ts,jsx,tsx}"

# Listar arquivos com formatação incorreta
oxfmt --list-different "src/**/*.{js,ts,jsx,tsx}"

Atualização do package.json

Substitua os scripts no package.json:

"scripts": {
-  "format": "prettier --write \"src/**/*.{js,ts,jsx,tsx}\"",
+  "format": "oxfmt --write \"src/**/*.{js,ts,jsx,tsx}\"",
-  "format:check": "prettier --check \"src/**/*.{js,ts,jsx,tsx}\"",
+  "format:check": "oxfmt --check \"src/**/*.{js,ts,jsx,tsx}\""
}

Diferenças de Formatação

• Comentários: Oxfmt preserva todos os comentários, similar ao Prettier
• Strings: Oxfmt usa aspas simples por padrão (configurável)
• Vírgulas: Suporte a trailingComma "all"
• Quebras de linha: Oxfmt usa lf por padrão (configurável)

Integração com Editores

Áreas de trabalho com suporte a LSP (como VS Code) podem usar o Oxfmt através do plugin oficial do Oxc. Alternativamente, configure o editor para executar o Oxfmt na formatação automática.

Solução de Problemas

• Erro de configuração: Verifique se o arquivo .oxfmtrc está no formato JSON válido
• Incompatibilidade de sintaxe: Oxfmt suporta JavaScript (ES2022+), TypeScript, JSX e TSX. Se houver erro com recursos mais novos, certifique-se de que o parser suporta essas características
• Performance: Para projetos muito grandes, use globs mais específicos para limitar a varredura de arquivos

Veja Também

• Documentação oficial do Oxfmt
• Guia de migração do Prettier
• Comparação de performance