import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

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

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.

import ReadMore from '~/components/ReadMore.astro';

Veja como configurar TypeScript em seu projeto Astro.

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

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

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

• Extensão VS Code no Open VSX - A extensão oficial do Astro para VS Code, disponível no registro Open VSX para plataformas abertas como VSCodium
• Extensão Nova - Fornece destaque de sintaxe highlighting e preenchimento de código para Astro dentro do Nova
• Plugin Vim - 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 - 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 com Astro
• Destaque de sintaxe Astro para Sublime Text - O pacote Astro para Sublime Text, disponível no gerenciador de pacotes Sublime Text.

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

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

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

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.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npm install --save-dev prettier prettier-plugin-astro ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add -D prettier prettier-plugin-astro ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add --dev prettier prettier-plugin-astro ``` </Fragment> </PackageManagerTabs>

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. ```js title=".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.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx prettier . --write ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec prettier . --write ``` </Fragment> <Fragment slot="yarn"> ```shell yarn prettier . --write ``` </Fragment> </PackageManagerTabs>

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.