Configuração do Editor

Customize seu editor de código para melhorar a sua experiência de desenvolvimento com Astro e desfrute de novas funcionalidades.

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

Astro funciona com qualquer editor de código. Porém, VS Code é o nosso editor recomendado para projetos Astro. Nós mantemos uma extensão Astro oficial para VS Code que permite desfrutar de várias funcionalidades-chave e melhorias na experiência do desenvolvedor em projetos Astro.

• Syntax highlighting para arquivos .astro.
• Informação de tipos do TypeScript para arquivos .astro.
• VS Code Intellisense para acabamento de código, dicas e mais.

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

📚 Veja como configurar TypeScript em seu projeto Astro.

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

• Extensão para VS Code na 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 para NovaComunidade - Providencia syntax highlighting e completação de código para Astro dentro do Nova
• Plugin para Vim Comunidade - Providencia syntax highlighting, indentação e code folding para Astro dentro do Vim ou Neovim
• Plugins Neovim LSP e TreeSitter Comunidade - Providencia syntax highlighting, treesitter parsing e completação de código para Astro dentro do Neovim

Nós adoraríamos dar suporte à IDE WebStorm. Infelizmente, ela não suporta servidores de linguagem e nós não temos a capacidade de escrever e manter uma extensão completamente separada em uma linguagem diferente da nossa base de código.Visite a issue relevante do suporte da JetBrains, para dar upvote no ticket, verificar o progresso e encontrar soluções alternativas da comunidade.

A futura IDE Fleet da JetBrains irá suportar servidores de linguagem e nossas ferramentas atualmente disponíveis serão capazes de ser executadas nele sem nenhum problema.

Em adição a editores locais, Astro também funciona bem em editores hospedados no navegador, incluindo:

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

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

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

Prettier é um popular formatador para JavaScript, HTML, CSS e mais. Para adicionar suporte para formatação de arquivos .astro, utilize o plugin oficial do Prettier para Astro.

Para começar, primeiro instale Prettier e o plugin:

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

Prettier irá automaticamente detectar o plugin e usá-lo para processar arquivos .astro quando você executá-lo:

prettier --write .

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