prettier-plugin-astro

0.14.1 verified Sat Apr 25 auth: no javascript

Official Prettier plugin for formatting Astro (.astro) files. Current stable version 0.14.1, released October 2024, with minor/patch releases every few months. Key differentiator: it's the official Astro team plugin, supporting Astro-specific syntax like frontmatter, components, and expressions. Alternatives like prettier-plugin-astro-organize-imports offer additional sorting. Requires Node ^14.15.0 || >=16.0.0 and Prettier >=3.0 (breaking change in v0.11.0).

Common errors

error Cannot find module 'prettier-plugin-astro' ↓

cause Plugin not installed or not specified correctly in prettier config.

fix

Run npm i --save-dev prettier prettier-plugin-astro and ensure config has plugins: ['prettier-plugin-astro'].

error Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prettier' ↓

cause Prettier not installed or version incompatible.

fix

Install a compatible version of Prettier: npm i --save-dev prettier (3.x recommended).

error Unexpected closing bracket '}' ↓

cause Parser not set to 'astro', so Prettier uses a different parser (e.g., babel) for .astro files.

fix

Add override for *.astro files with parser: 'astro' in your Prettier config.

Warnings

breaking prettier-plugin-astro v0.11.0 drops support for Prettier 2.x; only Prettier 3.x is supported. ↓

fix Upgrade Prettier to 3.x (npm i prettier@latest) or stick with prettier-plugin-astro <=0.10.0

gotcha If not specifying parser in overrides, Prettier may not associate .astro files with this plugin, causing formatting errors. ↓

fix Add overrides to your Prettier config: { files: '*.astro', options: { parser: 'astro' } }

deprecated The `astro-allow-shorthand` option was renamed to `astroAllowShorthand` in recent versions. ↓

fix Use `astroAllowShorthand` in your Prettier config instead of the old CLI flag.

breaking In v0.12.0, line breaks and indentation inside class attributes are no longer deleted, which may change existing formatting. ↓

fix Review and re-format existing .astro files after upgrade.

Install

npm install prettier-plugin-astro

yarn add prettier-plugin-astro

pnpm add prettier-plugin-astro

Imports

(Config)
wrong
```
Using require() in .prettierrc.cjs without proper export
```
correct
```
export default { plugins: ['prettier-plugin-astro'] }
```
Config is not imported; the plugin is specified by name in prettier config. For TypeScript, use `import('prettier').Config` type.

Quickstart

Installation and configuration of prettier-plugin-astro for formatting .astro files.

// Initialize in an Astro project
// 1. Install
// npm i --save-dev prettier prettier-plugin-astro

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

// 3. Format
// npx prettier --write 'src/**/*.astro'