VSCodeでAstroを使うための設定 • barorin&?

はじめに

VSCodeでAstroの開発にするために必要不可欠なPrettierの設定方法です。

方法

Prettierインストール

$ npm install --save-dev prettier prettier-plugin-astro

.prettierrc.jsの設定

プロジェクトフォルダの直下に作成する。

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

VSCode設定

拡張機能

Astro公式の拡張機能です。
Astro

settings.jsonの設定

settings.jsonに以下を追加する。これで.astroファイルを保存するたびにPrettierが動作します。

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

参照

エディタのセットアップ