Configuración del editor de código

Personaliza tu editor de código para mejorar tu experiencia de desarrollo con Astro y desbloquear nuevas funcionalidades.

VS Code

VS Code es un editor de código popular para desarrolladores web, desarrollado por Microsoft. El motor de VS Code también funciona en los editores de código en el navegador como GitHub Codespaces y Gitpod.

Astro funciona en cualquier editor de código. Sin embargo, recomendamos usar VS Code para tus proyectos de Astro. Nosotros mantenemos la extensión oficial de Astro para VS Code que desbloquea nuevas funcionalidades y mejora la experiencia de desarrollo para sus proyectos.

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

Para empezar, instala la extensión de Astro para VS Code.

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

Zed

Zed es un editor de código de código abierto que añadió soporte para Astro en la versión 0.123.2. Puedes instalar la extensión de Astro en la pestaña de Extensiones de la IDE. Esta extensión incluye funciones como resaltado de sintaxis, autocompletado y formateo de código.

IDE de JetBrains

Webstorm es una IDE para JavaScript y TypeScript que añadió soporte para el servidor de lenguaje de Astro en la versión 2024.2. Esta actualización trae características como resaltado de sintaxis, autocompletado y formateo de código.

Instala el plugin oficial a través del Marketplace de JetBrains o buscando “Astro” en la pestaña de Plugins de la IDE. Puedes activar 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 en Webstorm.

Otros editores de código

Nuestra increíble comunidad mantiene extensiones para otros editores de código incluyendo:

Extensión de VS Code para Open VSXoficial - La extensión oficial de VS Code, está disponible en el registro de Open VSX para otras plataformas como VSCodium.
Extensión de NovaComunidad - Provee resaltado de sintaxis y autocompletado para Astro en Nova.
Vim Plugin Comunidad - Provee resaltado de sintaxis, indentación y compatibilidad con folding de código para Astro en Vim o Neovim.
Neovim LSP y TreeSitter Plugins Comunidad - Provee resaltado de sintaxis, análisis de árboles y autocompletado para Astro en Neovim.
Emacs - Ve las instrucciones para Configurar Emacs y Eglot Comunidad para trabajar con Astro
Resaltado de sintaxis de Astro para Sublime Text Comunidad - El paquete Astro para Sublime Text, disponible en el gestor de paquetes de Sublime Text.

Editores de código del navegador

Además de editores de código locales, Astro también funciona en editores de código en el navegador, incluyendo:

StackBlitz y CodeSandbox - editores de código online del navegador, con resaltado de sintaxis incorporado para archivos .astro. ¡No necesita instalación o configuración!
GitHub.dev - te permite instalar la extensión de Astro para VS Code como una extensión web, la cual te da acceso a solo algunas de las características de la extensión completa. Actualmente, solo soporta el resaltado de sintaxis.
Gitpod - es un entorno de desarrollo en la nube en el que puedes instalar la extensión de VS Code oficial desde Open VSX.

Otras herramientas

ESLint

ESLint es un linter popular para JavaScript y JSX. Para activar la compatibilidad con Astro, puedes 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 popular linter para CSS. Existe una configuración de Stylelint mantenida por la comunidad que ofrece soporte para Astro.

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

Prettier

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

Para dar soporte al formateo de archivos .astro fuera del editor (por ejemplo, CLI) o dentro de editores que no soportan nuestras herramientas de editor, instala el plugin oficial de Prettier de Astro.

Instala prettier y prettier-plugin-astro.
- npm
- pnpm
- Yarn
Ventana de terminal
npm install --save-dev prettier prettier-plugin-astro
Ventana de terminal
pnpm add -D prettier prettier-plugin-astro
Ventana de terminal
yarn add --dev prettier prettier-plugin-astro

Crea un archivo de configuración .prettierrc.mjs en la raíz de tu proyecto y añade prettier-plugin-astro a él.

En este archivo, también especifica manualmente el analizador para los archivos Astro.

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

Ejecuta el comando prettier . --write en la terminal para formatear tus archivos.
- npm
- pnpm
- Yarn
Ventana de terminal
npx prettier . --write
Ventana de terminal
pnpm exec prettier . --write
Ventana de terminal
yarn prettier . --write

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

Contribuir

Comunidad