prettier-plugin-astro

Add prettier-plugin-astro to the plugins array in your Prettier configuration.

Recommended Configuration: For optimal compatibility across different package managers and plugins, manually specify the astro parser for .astro files using the overrides property.

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

To format .astro files, you must install both prettier and prettier-plugin-astro as development dependencies. After installation, you must register the plugin in your Prettier configuration file.

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

The plugin provides two specific options to control Astro-specific formatting behavior. These can be set via a Prettier configuration file, CLI flags, or the Prettier API.

{
  "astroAllowShorthand": false,
  "astroSkipFrontmatter": false
}

The plugin defines defaultOptions and exports an options object for configuration. By default, the plugin uses a tabWidth of 2.

const defaultOptions = {
	tabWidth: 2,
};

export { defaultOptions, options };

The prettier-plugin-astro provides two configuration options to customize how .astro files are formatted. These options can be added to your Prettier configuration file (e.g., .prettierrc, .prettierrc.json, or .prettierrc.cjs).

{
  "astroAllowShorthand": true,
  "astroSkipFrontmatter": true
}

Use these options to customize how the plugin handles shorthand attributes and frontmatter.

| Option | Default | CLI Override | API Override |
| ------- | ------- | ------------ | ------------ |
| `astroAllowShorthand` | `false` | `--astro-allow-shorthand <bool>` | `astroAllowShorthand: <bool>` |
| `astroSkipFrontmatter` | `false` | `--astro-skip-frontmatter <bool>` | `astroSkipFrontmatter: <bool>` |

The printClassNames utility reformats a string of class names. It splits the input by newlines, trims each line, and ensures that internal whitespace within a line is collapsed to a single space, while preserving leading indentation.

printClassNames('  class1   class2\n  class3'); // Returns '  class1 class2\n  class3'

You can check if a tag-like node uses Astro's special directives for setting content via attributes. This is useful for determining how content should be handled during formatting.

hasSetDirectives(node); // Returns true if attributes include 'set:html' or 'set:text'

The plugin distinguishes between block and inline elements to manage whitespace sensitivity.

• Block Elements: These are typically element nodes where the tag name is in the blockElements list. If htmlWhitespaceSensitivity is set to ignore in Prettier options, all tags (elements, custom-elements, components, fragments) are treated as block elements.
• Inline Elements: Nodes that are TagLikeNode (element, component, custom-element, or fragment) but are NOT block elements and are NOT inside a <pre> tag or non-formattable attribute.

When dealing with content types (like in script tags), the plugin can infer which Prettier built-in parser to use based on the type attribute string.

Mapping logic:

• module, text/javascript, text/babel, application/javascript $\rightarrow$ babel
• application/x-typescript $\rightarrow$ babel-ts
• text/markdown $\rightarrow$ markdown
• text/html $\rightarrow$ html
• text/x-handlebars-template $\rightarrow$ glimmer
• *json, *importmap, speculationrules $\rightarrow$ json
• Default $\rightarrow$ babel-ts

inferParserByTypeAttribute('text/javascript'); // Returns 'babel'

The getPreferredQuote utility determines whether to use single (') or double (") quotes for a string, based on a preferred quote and the existing content of the string. It aims to minimize the need for escaping quotes by choosing the quote character that appears less frequently in the raw content.

getPreferredQuote(rawContent, preferredQuote); // Returns { quote, regex, escaped }