90 lines
2.2 KiB
Markdown
90 lines
2.2 KiB
Markdown
## ✅ Uso do BiomeJS para Autoformatação
|
|
|
|
Este guia mostra como configurar o [BiomeJS](https://biomejs.dev) 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`
|
|
|
|
```bash
|
|
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:
|
|
|
|
```json
|
|
{
|
|
"$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"`:
|
|
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"biome": "pnpm exec biome check --write",
|
|
}
|
|
}
|
|
```
|
|
|
|
Isso permite executar:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```json
|
|
"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"
|
|
}
|
|
}
|