Configuração do Editor

Personalize seu editor de código para melhorar a experiência de desenvolvedor Astro e destravar novas funcionalidades.

VS Code

Seção intitulada VS Code

VS Code é um editor de código popular para desenvolvedores web, feito pela Microsoft. O motor do VS Code também alimenta editores de código no navegador populares como GitHub Codespaces e Gitpod.

Astro funciona com qualquer editor de código. Entretanto, VS Code é o nosso editor recomendado para projetos Astro. Nós mantemos uma extensão Astro VS Code oficial que destrava diversas funcionalidades-chave e melhorias na experiência do desenvolvedor em projetos Astro.

• Destaque de sintaxe em arquivos .astro.
• Informação de tipos TypeScript em arquivos .astro.
• VS Code Intellisense para preenchimento de código, dicas e mais.

Para começar, instale a extensão Astro VS Code hoje.

Veja como configurar TypeScript em seu projeto Astro.

Zed

Seção intitulada Zed

Zed é um editor de código aberto que adicionou suporte para Astro na versão 0.123.2. Você pode instalar a extensão Astro na aba de Extensões da IDE. Esta extensão inclui funcionalidades como destaque de sintaxe, preenchimento de código e formatação.

IDEs da JetBrains

Seção intitulada IDEs da JetBrains

Webstorm é uma IDE de JavaScript e TypeScript que adicionou suporte para Astro Language Server na versão 2024.2. Essa atualização trás funcionalidades como destaque de sintaxe, preenchimento de código e formatação.

Instale o plugin oficial através do Marketplace JetBrains ou ao procurar por “Astro” na aba de plugins da IDE. Você pode ativar ou desativar o Astro Language Server em Configurações | Linguagens & Frameworks | TypeScript | Astro.

Para mais informações sobre o suporte de Astro no Webstorm, confira a documentação oficial Webstorm Astro.

Outros Editores de Código

Seção intitulada Outros Editores de Código

Nossa comunidade incrível mantém várias extensões para outros editores populares, incluindo:

• Extensão VS Code no Open VSX Oficial - A extensão oficial do Astro para VS Code, disponível no registro Open VSX para plataformas abertas como VSCodium
• Extensão NovaComunidade - Fornece destaque de sintaxe highlighting e preenchimento de código para Astro dentro do Nova
• Plugin Vim Comunidade - Fornece destaque de sintaxe, indentação e suporte para arquivamento de código em Astro dentro do Vim ou Neovim
• Plugins Neovim LSP e TreeSitter Comunidade - Fornece destaque de sintaxe, interpretação treesitter e preenchimento de código em Astro dentro do Neovim
• Emacs - Veja as instruções para Configurar Emacs e Eglot Comunidade com Astro
• Destaque de sintaxe Astro para Sublime Text Comunidade - O pacote Astro para Sublime Text, disponível no gerenciador de pacotes Sublime Text.

Editores no Navegador

Seção intitulada Editores no Navegador

Além dos editores locais, Astro também funciona bem em editores direto no navegador, incluindo:

• StackBlitz e CodeSandbox - editores online que rodam no seu navegador, com destaque de sintaxe embutido para arquivos .astro. Sem instalação ou configuração necessária!
• GitHub.dev - permite que você instale a extensão Astro VS Code como uma extensão web, que te dá acesso a apenas algumas das funcionalidades da extensão completa. Atualmente, apenas o destaque de sintaxe é suportado.
• Gitpod - um ambiente de desenvolvimento completo na nuvem que pode instalar a extensão oficial Astro VS Code do Open VSX.

Outras ferramentas

Seção intitulada Outras ferramentas

ESLint

Seção intitulada ESLint

ESLint é um linter popular para JavaScript e JSX. Para suporte Astro, um plugin mantido pela comunidade pode ser instalado.

Veja o Guia de Usuário do projeto para mais informações sobre como instalar e configurar o ESLint para seu projeto.

Stylelint

Seção intitulada Stylelint

Stylelint é um linter popular para CSS. Uma configuração do Stylelint mantida pela comunidade fornece suporte ao Astro.

Instruções de instalação, integração com editores e informações adicionais podem ser encontradas no README do projeto.

Prettier

Seção intitulada Prettier

Prettier é um formatador popular para JavaScript, HTML, CSS e mais. Se você está utilizando a Extensão Astro VS Code ou o servidor da linguagem Astro dentro de outro editor, a formatação de código com Prettier está inclusa.

Para adicionar suporte para formatação de arquivos .astro fora do editor (como na CLI) ou dentro de editores que não suportam nossas ferramentas de editor, instale o plugin oficial Astro Prettier.

1. Instale prettier e prettier-plugin-astro.

   npm

   npm install --save-dev prettier prettier-plugin-astro

   pnpm

   pnpm add -D prettier prettier-plugin-astro

   Yarn

   yarn add --dev prettier prettier-plugin-astro

2. Crie um arquivo de configuração .prettierrc.mjs no diretório raiz do projeto e adicione prettier-plugin-astro nele.

   Neste arquivo, também especifique manualmente o interpretador para arquivos Astro.

   .prettierrc.mjs

   /** @type {import("prettier").Config} */
   export default {
     plugins: ['prettier-plugin-astro'],
     overrides: [
       {
         files: '*.astro',
         options: {
           parser: 'astro',
         },
       },
     ],
   };

3. Execute o comando prettier . --write no terminal para formatar seus arquivos.

   npm

   npx prettier . --write

   pnpm

   pnpm exec prettier . --write

   Yarn

   yarn prettier . --write

Veja o README do plugin Prettier para mais informações sobre as opções suportadas, como configurar o Prettier dentro do VS Code e mais.