prettier-plugin-astro

Qué es

prettier-plugin-astro es el plugin oficial mantenido por el equipo de Astro que añade soporte a Prettier para formatear archivos .astro. Está escrito en TypeScript, se distribuye en npm y funciona como complemento de Prettier, que se instala como dependencia par (peer dependency). Da formato tanto al frontmatter JavaScript/TypeScript como al marcado del componente.

Para qué sirve

• Formatear de manera consistente los componentes .astro de un proyecto.
• Aplicar Prettier al frontmatter y al template dentro del mismo archivo.
• Integrar el formateo en editores como VS Code mediante la extensión de Prettier.
• Mantener un estilo de código homogéneo en equipos que trabajan con Astro.

Cuándo usarlo

Es la opción recomendada cuando ya usas Prettier en tu proyecto Astro y quieres que también respete los archivos .astro. La extensión oficial de Astro para VS Code ya lo incluye, por lo que este paquete es especialmente útil si formateas por CLI, en hooks de pre-commit o en CI, o si prefieres la extensión genérica de Prettier en lugar de la de Astro.

Ejemplo

Instalación y configuración básica:

npm i --save-dev prettier prettier-plugin-astro

En el archivo de configuración de Prettier (por ejemplo prettier.config.mjs):

export default {
  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

Después, basta con ejecutar Prettier de forma normal:

npx prettier --write .

Puntos clave

• Plugin oficial mantenido dentro de la organización withastro.
• Da formato al frontmatter y al marcado del componente en un solo paso.
• Opción astroAllowShorthand para convertir atributos a su forma abreviada.
• Opción astroSkipFrontmatter para omitir el formateo del frontmatter si usas otra herramienta como Biome.

Ten en cuenta

Requiere tener Prettier instalado como dependencia par. Si ya usas la extensión oficial de Astro para VS Code, el formateo de .astro viene incluido y puede que no necesites configurarlo aparte. Para que funcione bien con la extensión genérica de Prettier conviene declarar el parser astro mediante un override y, en algunos casos, ajustar prettier.documentSelectors en VS Code. El proyecto se publica bajo licencia MIT.