Setting up Prettier

Quickly configure Prettier for your Astro project!

Prettier Plugin for Astro

Start by installing prettier & prettier-plugin-astro using your preferred package manager:

npm

npm install --save-dev prettier prettier-plugin-astro

pnpm

pnpm add -D prettier prettier-plugin-astro

yarn

yarn add --dev prettier prettier-plugin-astro

Next, update your Prettier config in the project’s root to include prettier-plugin-astro plugin. This example will use .prettierrc.json:

.prettierrc.json

{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

That’s it. Run prettier --write . command with your preferred package manager to format all of the astro files in the project.

Additionally if you are using the VSCode Prettier Extension, you can set the following VSCode Config in your User/Workspace Settings:

.vscode/settings.json

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

and now Prettier will format any selected document.

Adding an NPM script

You can use Prettier CLI with your preferred package manager by adding following scripts in package.json of your project’s directory:

package.json

{
  "scripts": {
    "format:check": "prettier --check .",
    "format:write": "prettier --write ."
  }
}

Prettier Plugin for Tailwind CSS

When using the Tailwind CSS integration, there is another dev dependency for automated class sorting: prettier-plugin-tailwindcss.

Start by installing prettier-plugin-tailwindcss using your preferred package manager:

npm

npm install --save-dev prettier-plugin-tailwindcss

pnpm

pnpm add -D prettier-plugin-tailwindcss

yarn

yarn add --dev prettier-plugin-tailwindcss

Next, update the Prettier Config to include following plugins. This example will use .prettierrc:

.prettierrc.json

{
  "plugins": ["prettier-plugin-astro"],
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro",
      }
    }
  ]
}

Make sure to place the Tailwind CSS plugin at the end. Additionally, you might need to reload your VSCode Window if Prettier is not working as expected.