はる
AstroプロジェクトでPrettierを使って、コード整形を行う方法について解説します。Prettierは、コードの書式を自動で整えるツールであり、コードの読みやすさや一貫性を向上させます。
Prettierとprettier-plugin-astroのインストール
まず、プロジェクトのルートディレクトリで、以下のコマンドを実行して、Prettierとprettier-plugin-astroをインストールします。
npm install --save-dev prettier prettier-plugin-astroまたは
yarn add --dev prettier prettier-plugin-astroprettier-plugin-astro
prettier-plugin-astroは、Prettier用のプラグインでAstroの.astroファイルを整形する機能を提供してくれます。
prettier-plugin-astro
A Prettier Plugin for formatting Astro files. Latest version: 0.14.1, last published: a month ago. Start using prettier-...
www.npmjs.com
Prettierの設定
次に、プロジェクトのルートディレクトリに.prettierrcファイルを作成し、Prettierの設定を追加します。以下は一例です。
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid",
"proseWrap": "always"
}Prettierの実行スクリプトを追加
package.jsonファイルに、Prettierを実行するスクリプトを追加します。
"scripts": {
"format": "prettier --write ."
}これで、npm run formatまたはyarn formatを実行することで、プロジェクト全体のコードを整形できるようになります。
prettierignoreファイルの作成（オプション）
プロジェクトのルートディレクトリに.prettierignoreファイルを作成し、Prettierが整形すべきでないファイルやディレクトリを指定できます。例えば、以下のように記述できます。
node_modules
dist
.cacheもしも反応しなかったら…
もしもスクリプトではなく使っているエディターで自動整形が行えない場合は、エディターの再起動を行ってみてください。そうすると、反応されるようになります。
まとめ
AstroプロジェクトでPrettierとprettier-plugin-astroを設定することで、プロジェクトのコード整形を容易に行うことができます。一貫したコードスタイルを維持することで、読みやすさとメンテナンス性が向上します。
