2.2 KiB
✅ Uso do BiomeJS para Autoformatação
Este guia mostra como configurar o BiomeJS para formatar e analisar código JavaScript/TypeScript no seu projeto.
1. Incluir o pacote de configuração comum
Certifique-se de que o pacote p-comuns (ou outro com a configuração compartilhada) esteja disponível no seu projeto. Ele deve conter o arquivo Documentos/biome.json.
pnpm up p-comuns
2. Instalar o Biome com pnpm
pnpm add --save-dev --save-exact @biomejs/biome@2.1.4
🎯 Use
--save-exactpara garantir consistência de versões entre ambientes.
3. Criar o arquivo de configuração na raiz do projeto
Crie um arquivo chamado biome.json com o seguinte conteúdo:
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"extends": ["./node_modules/p-comuns/Documentos/biome.json"],
"files": {
"includes": ["src/**/*.{js,ts,jsx,tsx}"]
}
}
⚠️ Verifique o caminho correto do
extendsrelativo à raiz do seu projeto. Use./sempre que possível para evitar erros de resolução.
4. Adicionar script no package.json
Inclua o comando abaixo em "scripts":
{
"scripts": {
"biome": "pnpm exec biome check --write",
}
}
Isso permite executar:
pnpm biome
O comando irá formatar e aplicar as regras de lint nos arquivos do diretório
src/.
✅ Dica extra: formatar todos os arquivos
Se quiser aplicar o Biome a todo o projeto (não só src/), altere o include:
"includes": ["**/*.{js,ts,jsx,tsx}"]
adicionar em .vscode/settings.json
{ "editor.defaultFormatter": "biomejs.biome", "[javascript]": { "editor.defaultFormatter": "biomejs.biome" }, "[javascriptreact]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescript]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" }, "[json]": { "editor.defaultFormatter": "biomejs.biome" }, "[jsonc]": { "editor.defaultFormatter": "biomejs.biome" }, "[vue]": {"editor.defaultFormatter": "octref.vetur"}, "editor.codeActionsOnSave": { "source.organizeImports.biome": "always", "source.fixAll.biome": "always" } }