😕

【Prettier+Astro】AstroをPrettierがフォーマットしてくれない問題を解決する

2024/12/04に公開

VS Code

Prettier

Astro

tech

PrettierがAstroをフォーマットしてくれない

Astroを使って開発していたとき、PrettierがAstroで動いてくれませんでした。
公式のドキュメントでは、以下のように書かれています。

PrettierはJavaScript、HTML、CSSなどのための人気のフォーマッターです。Astro VS Code拡張機能や他のエディタ内でAstro言語サーバーを使用している場合、Prettierによるコードのフォーマット機能は含まれています。

いやいや、でも動かないねん...
で、調べてみるとどうも一手間かかる模様。

とりあえず弄ってみる(失敗)

以下の記事を参考に弄る。

とりあえず.prettierrcとsettings.jsonを弄ればどうにかなりそう

設定(.prettierrc、settings.json)

.prettierrc

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

settings.json

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

フォーマット(失敗)

で、フォーマットをしてみる。

[error] No parser could be inferred for file "index.astro".

う～ん...? parserにastroを指定しているはずなのにどうして？

原因

どうもpnpmが悪さをしているみたいです。ソースはここ。

解決方法

先ほどのページ(コメント)に解決策も書いてくれています。node_modules内のファイルを直接指定するといいみたい。

なので、

.prettierrc

- "plugins": ["prettier-plugin-astro"],
+ "plugins": ["./node_modules/prettier-plugin-astro/dist/index.js"],

こうすればok。
'./node_modules/prettier-plugin-astro'だと、ESMがどうのこうので怒られました。怒りはCommonJSにぶつけます。

フォーマット(成功！)

src/components/Card.astro 124ms
src/pages/404.astro 41ms
src/pages/index.astro 29ms
src/pages/layouts/Layout.astro 34ms
src/pages/user/[id].astro 10ms

無事にフォーマットが通りましたとさ。