Configuración del editor

Personaliza tu editor de código para mejorar la experiencia del desarrollador con Astro y desbloquear nuevas funciones.

VS Code

VS Code es un editor de código popular para desarrolladores web, creado por Microsoft. El motor de VS Code también impulsa editores de código populares en el navegador como GitHub Codespaces.

Astro funciona con cualquier editor de código. Sin embargo, VS Code es nuestro editor recomendado para proyectos de Astro. Mantenemos una extensión oficial de Astro para VS Code que desbloquea varias funciones clave y mejoras en la experiencia de desarrollo para proyectos de Astro.

Resaltado de sintaxis para archivos .astro.
Información de tipos de TypeScript para archivos .astro.
VS Code IntelliSense para autocompletado de código, sugerencias y más.

Para comenzar, instala la extensión oficial de Astro para VS Code hoy mismo.

Mira cómo configurar TypeScript en tu proyecto de Astro.

Zed

Zed es un editor de código multijugador de alto rendimiento que está optimizado para la velocidad y proyectos grandes. Su extensión de Astro incluye funciones como resaltado de sintaxis para archivos .astro, autocompletado de código, formateo, diagnósticos e ir a la definición.

IDEs de JetBrains

WebStorm es un IDE de JavaScript y TypeScript que agregó soporte para el Servidor de Lenguaje de Astro en la versión 2024.2. Esta actualización trae funciones como resaltado de sintaxis, autocompletado de código y formateo.

Instala el plugin oficial a través de JetBrains Marketplace o buscando "Astro" en la pestaña de Plugins del IDE. Puedes alternar el servidor de lenguaje en Settings | Languages & Frameworks | TypeScript | Astro.

Para obtener más información sobre el soporte de Astro en WebStorm, consulta la documentación oficial de Astro para WebStorm.

Otros editores de código

Nuestra increíble comunidad mantiene varias extensiones para otros editores populares, que incluyen:

Extensión de VS Code en Open VSX Oficial - La extensión oficial de Astro para VS Code, disponible en el registro Open VSX para editores como Cursor o VSCodium.
Plugin de Vim Comunidad - Proporciona resaltado de sintaxis, sangría y soporte para plegado de código para Astro dentro de Vim o Neovim.
Plugins de Neovim LSP y TreeSitter Comunidad - Proporciona resaltado de sintaxis, análisis sintáctico con TreeSitter y autocompletado de código para Astro dentro de Neovim.
Emacs - Consulta las instrucciones de Configuración de Emacs y Eglot Comunidad para trabajar con Astro.
Resaltado de sintaxis de Astro para Sublime Text Comunidad - El paquete de Astro para Sublime Text, disponible en el gestor de paquetes de Sublime Text.
Extensión de Nova Comunidad - Proporciona resaltado de sintaxis y autocompletado de código para Astro dentro de Nova.

Editores en el navegador

Además de los editores locales, Astro también funciona bien en editores alojados en el navegador, que incluyen:

StackBlitz y CodeSandbox - editores en línea que se ejecutan en tu navegador, con soporte integrado de resaltado de sintaxis para archivos .astro. ¡No requiere instalación ni configuración!
GitHub.dev - te permite instalar la extensión de Astro para VS Code como una extensión web, lo que te da acceso solo a algunas de las características de la extensión completa. Actualmente, solo se admite el resaltado de sintaxis.

Otras herramientas

ESLint

ESLint es un linter popular para JavaScript y JSX. Para el soporte de Astro, se puede instalar un plugin mantenido por la comunidad.

Consulta la Guía del usuario del proyecto para obtener más información sobre cómo instalar y configurar ESLint para tu proyecto.

Stylelint

Stylelint es un linter popular para CSS. Una configuración de Stylelint mantenida por la comunidad proporciona soporte para Astro.

Las instrucciones de instalación, la integración con el editor y la información adicional se pueden encontrar en el archivo README del proyecto.

Biome

Biome es un linter y formateador todo en uno para la web. Biome actualmente tiene soporte experimental para archivos .astro y se puede usar para analizar y formatear el frontmatter en archivos .astro.

Prettier

Prettier es un formateador popular para JavaScript, HTML, CSS y más. Si estás usando la extensión de Astro para VS Code, el formateo de código con Prettier está incluido.

Para agregar soporte para formatear archivos .astro fuera del editor (p. ej. CLI) o dentro de editores que no admiten nuestras herramientas de edición, instala el plugin oficial de Prettier para Astro.

Instala prettier y prettier-plugin-astro.
- npm
- pnpm
- Yarn
Ventana de la terminal
npm install --save-dev --save-exact prettier prettier-plugin-astro
Ventana de la terminal
pnpm add --save-dev --save-exact prettier prettier-plugin-astro
Ventana de la terminal
yarn add --dev --exact prettier prettier-plugin-astro
Crea un archivo de configuración .prettierrc (o .prettierrc.json, .prettierrc.mjs u otros formatos compatibles) en la raíz de tu proyecto y agrégale prettier-plugin-astro.

En este archivo, también especifica manualmente el analizador (parser) para los archivos de Astro.
.prettierrc
```
{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}
```
Opcionalmente, instala otros plugins de Prettier para tu proyecto y agrégalos al archivo de configuración. Es posible que estos plugins adicionales deban enumerarse en un orden específico. Por ejemplo, si usas Tailwind, prettier-plugin-tailwindcss debe ser el último plugin de Prettier en el array de plugins.
.prettierrc
```
{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss" // needs to be last
  ],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}
```
Ejecuta el siguiente comando en tu terminal para dar formato a tus archivos.
- npm
- pnpm
- Yarn
Ventana de la terminal
npx prettier . --write
Ventana de la terminal
pnpm exec prettier . --write
Ventana de la terminal
yarn exec prettier . --write

Consulta el README del plugin de Prettier para obtener más información sobre las opciones admitidas, cómo configurar Prettier dentro de VS Code y más.

dprint

dprint es un formateador de código altamente configurable que admite muchos lenguajes, incluidos JavaScript, TypeScript, CSS y más. El soporte para archivos .astro se puede agregar usando el plugin markup_fmt.

Contribuir Comunidad Patrocinar