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.

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.

El próximo Fleet IDE de JetBrains también soportará servidores de lenguaje y, como consecuencia, nuestras herramientas actuales podrán ejecutarse allí sin ningún problema.

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

Para comenzar, primero instala Prettier y el plugin:

npm

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

pnpm

pnpm install -D prettier prettier-plugin-astro

Yarn

yarn add --dev prettier prettier-plugin-astro

Prettier detectará automáticamente el plugin y lo usará para procesar los archivos .astro cuando lo ejecutes:

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.

Uso con pnpm

Debido a problemas dentro de Prettier, el plugin no se detectará automáticamente al usar pnpm. Para que encuentre el plugin, se debe agregar el siguiente parámetro al ejecutar Prettier:

prettier --write . --plugin=prettier-plugin-astro

También se requieren configuraciones adicionales cuando se usa Prettier dentro de VS Code. Consulta el README del plugin para obtener más información.