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
Seção intitulada VS CodeVS 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 complementação de código, dicas e mais.
Para começar, instale a extensão Astro para VS Code hoje.
IDEs da JetBrains
Seção intitulada IDEs da JetBrainsSuporte inicial para Astro foi lançado no WebStorm 2023.1. Você pode instalar o plugin oficial no JetBrains Marketplace ou pesquisando por “Astro” na aba de Plugins da IDE. Este plugin inclui funcionalidades como syntax highlighting, code completion e formatação, com planos para adicionar funcionalidades ainda mais avançadas no futuro. Ele está também disponível em todos as outras IDEs da JetBrains com suporte para JavaScript.
Outros Editores de Código
Seção intitulada Outros Editores de CódigoNossa 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 - Oferece syntax highlighting e autocompletar de código para o Astro dentro do Nova
- Plugin para Vim Comunidade - Oferece syntax highlighting, indentação e code folding para Astro dentro do Vim ou Neovim
- Plugins Neovim LSP e TreeSitter Comunidade - Oferece syntax highlighting, treesitter parsing e autocompletar de código para Astro dentro do Neovim
- Emacs - Consulte as instruções para Configurar o Emacs e o Eglot Comunidade para funcionar com o Astro
- Syntax highlighting do Astro para o Sublime Text Comunidade - O pacote Astro para o Sublime Text, disponível no gerenciador de pacotes do Sublime Text.
Editores no Navegador
Seção intitulada Editores no NavegadorAlém dos editores locais, o 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.
Outras ferramentas
Seção intitulada Outras ferramentasESLint
Seção intitulada ESLintESLint é 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.
Stylelint
Seção intitulada StylelintStylelint é um linter popular para CSS. Uma configuração do Stylelint mantida pela comunidade adiciona 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 PrettierPrettier é um popular formatador para JavaScript, HTML, CSS e mais. Se você está utilizando a Extensão do Astro para VS Code ou o servidor da linguagem do Astro em outro editor, formatação de código com Prettier está inclusa.
Para adicionar suporte para formatação de arquivos .astro fora do editor (por exemplo, CLI) ou em editores que não suportam nossas ferramentas de editor, instale o plugin oficial do Prettier para Astro.
Para começar, primeiro instale Prettier e o plugin:
npm install --save-dev prettier prettier-plugin-astropnpm add -D prettier prettier-plugin-astroyarn add --dev prettier prettier-plugin-astroPrettier 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.
Learn