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

Sección titulada 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

Sección titulada 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

Sección titulada IDE de JetBrains

El soporte inicial para Astro llegó a Webstorm 2023.1. Puedes instalar el plugin oficial a través de la página de plugins de Jetbrains o buscando “Astro” en la pestaña de Plugins y beneficiarte de las funciones tales como resaltado de sintaxis, formateo y autocompletado de código, con planes para agregar más funciones avanzadas en el futuro. También está disponible para las otras IDEs de Jetbrains con soporte para Javascript.

Otros editores de código

Sección titulada 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

Sección titulada 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

Sección titulada Otras herramientas

ESLint

Sección titulada 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

Sección titulada 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

Sección titulada 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.

1. Instala prettier y prettier-plugin-astro.

   npm

   npm install --save-dev prettier prettier-plugin-astro

   pnpm

   pnpm add -D prettier prettier-plugin-astro

   Yarn

   yarn add --dev prettier prettier-plugin-astro

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

   .prettierrc.mjs

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

3. Ejecuta el comando prettier . --write en la terminal para formatear tus archivos.

   npm

   npx prettier . --write

   pnpm

   pnpm exec prettier . --write

   Yarn

   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.