• HOME
  • [Astro]prettierでコード整形をする方法について
TomoyaOkada

[Astro]prettierでコード整形をする方法について

記事をシェアする

Astroでもprettierを使ってコード整形をすることができます。

📁モジュールのインストール

yarn add prettier-plugin-astro prettier



💭各種設定の追加

プロジェクトのルートに .prettierrc.cjsを作成していください。
その中に以下の記述を追加します。

module.exports = {
  plugins: [require.resolve("prettier-plugin-astro")],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro",
      },
    },
  ],
};



vscodeにもprettierを入れている方は、package.jsonに以下を追加

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



以上になります。
コード整形が上手くいかない時は、vscodeを再起動したりして確認してみてください。




記事をシェアする