VSCodeで保存時に.astroファイルをPrettierでフォーマットする方法

バージョン情報

• astro ^3.2.0
• prettier ^3.0.3
• prettier-plugin-astro ^0.12.0
• Prettier（VSCode拡張機能）v10.1.0

手順

パッケージのインストール

pnpm add -D prettier prettier-plugin-astro

所属コミュニティの先生がpnpm使っていたので真似して使ってみました。

prettier設定ファイル追加

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

pluginsとoverridesは決まり文句的な感じで書けばOKです。

VSCode設定

基本設定のjsonファイルに追記します。
💡MacユーザーならCommand＋Shift＋Pを同時に押して、preferenceと入力すると出てくると思います。

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

これで*.astroファイルを保存するとPrettierが効いてフォーマットされるはずです！

もしできなかった場合は、一度VSCodeを再起動すると効くかもしれません。

感想

Prettierインストールすれば動くやろ〜って感じでやってみて時間を溶かしました。🤦🏻‍♀️
公式ドキュメント読むって大事ね。

参考

Astro公式ドキュメントのエディターセットアップ解説
https://docs.astro.build/ja/editor-setup/#prettier

公式のAstro PrettierプラグインGitHub
https://github.com/withastro/prettier-plugin-astro