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:
Just a note that this still works but you'll likely need the config within
.prettierrc.cjs
instead of.prettierrc.js
👍