Saltearse al contenido

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

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.

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

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.

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

    Ventana de terminal
    npm install --save-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.

    Ventana de terminal
    npx 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

¿Qué tienes en mente?

Comunidad