はじめに
VSCodeでAstroの開発にするために必要不可欠なPrettierの設定方法です。
方法
Prettierインストール
$ npm install --save-dev prettier prettier-plugin-astro
.prettierrc.jsの設定
プロジェクトフォルダの直下に作成する。
// ./.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"
}