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 CodeVS 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 JetBrainsEl 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ódigoNuestra 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
Editores de código del navegador
Sección titulada Editores de código del navegadorAdemá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 herramientasESLint
Sección titulada ESLintESLint 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 StylelintStylelint 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 PrettierPrettier 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 install --save-dev prettier prettier-plugin-astropnpm install -D prettier prettier-plugin-astroyarn add --dev prettier prettier-plugin-astroPrettier 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.
Learn