✅ 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-exact para 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 extends relativo à 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" } }