Extensão VSCode

Extensão do Biome para o VS Code

O Biome unifica sua pilha de desenvolvimento combinando a funcionalidade de ferramentas separadas. Ele usa um único arquivo de configuração, possui desempenho fantástico e funciona com qualquer pilha. Esta extensão traz o Biome para o seu editor para que você possa:

Formatar arquivos ao salvar ou ao emitir o comando Formatar Documento
Ver lints enquanto digita e aplicar correções de código
Realizar refatorações

Instalação

Você pode instalar a extensão do código acessando a página do Visual Studio Code Market Place da extensão ou a partir do VS Code:

Abra a aba extensões (Exibir → Extensões) e procure por Biome.
Abra a Sobreposição de Abertura Rápida (Ctrl/⌘+P ou Acessar -> Ir para Arquivo), digite ext install biomejs.biome e pressione enter.

Primeiros Passos

Formatador Padrão

Configure o Biome como o formatador padrão para arquivos suportados para garantir que o VS Code use o Biome em vez de outros formatadores que você possa ter instalado. Você pode fazer isso abrindo um JavaScript ou TypeScript e depois:

Abra a Paleta de Comandos (Ctrl/⌘+⇧+P ou Ver → Paleta de Comandos)
Selecione Formatar Documento Com…
Selecione Configurar Formatador Padrão…
Selecione Biome

Você também pode habilitar o Biome apenas para linguagens específicas:

Abra o settings.json: abra a Paleta de Comandos(Ctrl/⌘+⇧+P) e selecione Preferências: Abrir Configurações do Usuário (JSON)
E defina o editor.defaultFormatter como biomejs.biome para a linguagem desejada

{
  "editor.defaultFormatter": "<outro formatador>",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Esta configuração define o Biome como o formatador padrão para arquivos JavaScript. Todos os outros arquivos serão formatados usando <outro formatador>

Resolução de Configuração

A extensão carrega automaticamente o arquivo biome.json do diretório raiz do workspace.

Resolução do Biome

A extensão tenta usar o Biome das dependências locais do seu projeto (node_modules/@biomejs/biome). Recomendamos adicionar o Biome como uma dependência do projeto para garantir que os scripts do NPM e a extensão usem a mesma versão do Biome.

Você também pode especificar explicitamente o binário Biome que a extensão deve usar configurando a configuração biome.lspBin nas opções do seu editor.

Se o projeto não tiver dependência do Biome e nenhum caminho explícito estiver configurado, a extensão usa a versão do Biome incluída em seu pacote.

Uso

Formatar documento

Para formatar um documento inteiro, abra a Paleta de Comandos (Ctrl/⌘+⇧+P) e selecione Formatar Documento.

Para formatar um intervalo de texto, selecione o texto que deseja formatar, abra a Paleta de Comandos (Ctrl/⌘+⇧+P), e selecione _

Formatar Seleção_.

Formatar ao salvar

O Biome respeita a configuração Formatar ao Salvar do VS Code. Para habilitar a formatação ao salvar, abra as configurações (Arquivo -> Preferências -> Configurações), procure por editor.formatOnSave e habilite a opção.

Corrigir ao salvar

O Biome respeita a configuração Ações de Código ao Salvar do VS Code. Para habilitar a correção ao salvar, adicione

{
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit"
  }
}

no settings.json do vscode.

Ordenação de Importações [Experimental]

A extensão Biome do VS Code suporta a ordenação de importações através da ação de código “Organizar Importações”. Por padrão, essa ação pode ser executada usando o atalho de teclado ⇧+Alt+O, ou é acessível através da Paleta de Comandos (Ctrl/⌘+⇧+P) selecionando Organizar Importações.

Você pode adicionar o seguinte à sua configuração do editor se desejar que a ação seja executada automaticamente ao salvar, em vez de chamá-la manualmente:

{
  "editor.codeActionsOnSave":{
    "source.organizeImports.biome": "explicit"
  }
}

Configurações da Extensão

`biome.lspBin`

A opção biome.lspBin substitui o binário Biome usado pela extensão. A pasta do workspace é usada como caminho base se o caminho for relativo.

`biome.rename`

Habilita o Biome para lidar com renomeações no workspace (experimental).

Versionamento

Seguimos as especificações sugeridas pela documentação oficial:

Versões ímpares menores são dedicadas a pré-lançamentos, por exemplo, *.5.*. Versões menores pares são dedicadas a lançamentos oficiais, por exemplo, *.6.*.

Solução de Problemas

Eu instalei @biomejs/biome, mas a extensão mostra um aviso dizendo que não conseguiu resolver a biblioteca.

A biblioteca @biomejs/biome especifica algumas dependências opcionais que são instaladas com base no seu sistema operacional e arquitetura.

No entanto, é possível que a extensão não consiga resolver o binário ao carregar a extensão. Isso é causado - provavelmente - pelo seu gerenciador de pacotes.

Para resolver o problema, tente instalar o binário manualmente. O aviso deve mostrar o binário que pertence à sua máquina.

Se você trabalha em uma equipe que usa diferentes sistemas operacionais/arquiteturas, é aconselhável instalar todos os binários:

@biomejs/cli-darwin-arm64
@biomejs/cli-darwin-x64
@biomejs/cli-linux-arm64
@biomejs/cli-linux-x64
@biomejs/cli-win32-arm64
@biomejs/cli-win32-x64