Use prettier formatting with Astro (pnpm)

.prettierrc.js

/**
 * @type {import('prettier').Options}
 */
module.exports = {
  plugins: [require.resolve('prettier-plugin-astro')],

  overrides: [
    {
      files: '**/*.astro',
      options: { parser: 'astro' }
    }
  ]
}

_howto.md

Prettier plugins are not auto detected when using pnpm prettier/prettier#8056

So you will get following error:

src/pages/index.astro[error] Couldn't resolve parser "astro"

So let's write down all that I had to do to make it working.

pnpm install -D prettier-plugin-astro@next # ni -D prettier-plugin-astro@next

Now in your package.json add scripts:

"fmt": "prettier --write --plugin-search-dir=. ."

Now replace .prettierrc if you had one (any non-js prettier config) with .prettierrc.js. Add overrides and plugins there:

/**
 * @type {import('prettier').Options}
 */
module.exports = {
  plugins: [require.resolve('prettier-plugin-astro')],

  overrides: [
    {
      files: '**/*.astro',
      options: { parser: 'astro' }
    }
  ]
}

Now this should work:

pnpm fmt # nr fmt

But it will still not work in VSCode, for that go to command pallete (cltr+shift+p) Preferences: Open workspace settings (JSON) and add there:

usually .vscode/settings.json

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

See also:

• withastro/docs#425 (comment)
• withastro/prettier-plugin-astro#97 (comment)
• withastro/prettier-plugin-astro#97 (comment)

package.json

{
  "scripts": {
    "fmt": "prettier --write --plugin-search-dir=. .",
  },
  "devDependencies": {
    "prettier": "^2.7.1",
    "prettier-plugin-astro": "^0.1.0-next.5",
  },
}

settings.json

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

Just a note that this still works but you'll likely need the config within .prettierrc.cjs instead of .prettierrc.js 👍