Pular para o conteúdo

Configuração do Editor

Personalize seu editor de código para melhorar a experiência de desenvolvimento com 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 populares no navegador como GitHub Codespaces e Gitpod.

Astro funciona com qualquer editor de código. Entretanto, VS Code é o nosso editor recomendado para projetos Astro. 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 (EN) em seu projeto Astro.

Zed

Zed é um editor de código multijogador de alta performance, otimizado para velocidade e grandes projetos. Sua extensão Astro inclui funcionalidades como destaque de sintaxe para arquivos .astro, preenchimento de código, formatação, diagnósticos e ir para a definiçã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 traz 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 Oficial - A extensão oficial do Astro para VS Code, disponível no registro Open VSX para plataformas abertas como VSCodium
  • 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.
  • Extensão NovaComunidade - Fornece destaque de sintaxe e preenchimento de código para Astro dentro do Nova

Editores no Navegador

Além dos editores locais, Astro também funciona bem em editores diretamente 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.

Biome

Biome é um linter e formatador tudo em um para a web. O Biome atualmente tem suporte experimental para arquivos .astro, e pode ser usado para executar lint e formatar o frontmatter em arquivos .astro.

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 install --save-dev prettier prettier-plugin-astro

  2. Crie um arquivo de configuração .prettierrc.mjs(ou .prettierrc.json, .prettierrc.mjs, ou outros formatos suportados) no diretório raiz do projeto e adicione prettier-plugin-astro nele.

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

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

  3. Opcionalmente, você pode instalar outros plugins do Prettier no seu projeto, e adicionar eles no arquivo de configuração. Esses plugins adicionais podem precisar ser listados em uma ordem específica. Por exemplo, se você usa Tailwind, prettier-plugin-tailwindcss precisa ser o último plugin do Prettier no array de plugins

    {
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss" // precisa ser o último 
  ],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

  4. Execute o comando no terminal para formatar seus arquivos.

    npx 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.

dprint

dprint é um formatador de código altamente configurável que suporta várias linguagens, incluindo JavaScript, TypeScript, CSS, e muito mais. O suporte para arquivos .astro pode ser adicionado usando o plugin markup_fmt.

Contribua Comunidade Sponsor