Package Exports

prettier-plugin-astro
prettier-plugin-astro/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (prettier-plugin-astro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Prettier Plugin for Astro

Official Prettier plugin adding support for formatting .astro files.

Installation

First install Prettier and the plugin:

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

Then add the plugin to your Prettier configuration:

/** @type {import("prettier").Config} */
export default {
  plugins: ['prettier-plugin-astro'],
};

Recommended configuration

For optimal compatibility with the different package managers and Prettier plugins, we recommend manually specifying the parser to use for Astro files in your Prettier config as shown in the example below:

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

To customize formatting behavior, see the Configuration section below.

Using in VS Code

Note If you're using Astro's VS Code extension, Prettier and this plugin are already included. Only follow the guide below to format using Prettier's official extension.

First install the VS Code Prettier extension and add the following settings to your VS Code configuration:

{
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

The settings above ensure that VS Code is aware that Prettier can be used for Astro files, and sets Prettier as the default formatter for Astro files.

Reporting issues

When submitting issues about formatting your .astro files in VS Code, please specify which extension you are using to format your files: Astro's own extension or the Prettier extension.

Configuration

Most options from Prettier will work with the plugin and can be set in a configuration file or through CLI flags.

Astro Allow Shorthand

Set if attributes with the same name as their expression should be formatted to the short form automatically (for example, if enabled <element name={name} /> will become simply <element {name} />)

Default	CLI Override	API Override
`false`	`--astro-allow-shorthand <bool>`	`astroAllowShorthand: <bool>`

Example `.prettierrc.cjs`

{
  astroAllowShorthand: false;
}

Contributing

Pull requests of any size and any skill level are welcome, no contribution is too small. Changes to the Astro Prettier Plugin are subject to Astro Governance and should adhere to the Astro Style Guide.

See CONTRIBUTING.md for instructions on how to set up your development environment.

prettier-plugin-astro