AstroプロジェクトでPrettierを使ってコード整形を行う方法

はる

AstroプロジェクトでPrettierを使って、コード整形を行う方法について解説します。Prettierは、コードの書式を自動で整えるツールであり、コードの読みやすさや一貫性を向上させます。

Prettierとprettier-plugin-astroのインストール
1. prettier-plugin-astro
Prettierの設定
Prettierの実行スクリプトを追加
prettierignoreファイルの作成（オプション）
もしも反応しなかったら…
まとめ

Prettierとprettier-plugin-astroのインストール

まず、プロジェクトのルートディレクトリで、以下のコマンドを実行して、Prettierとprettier-plugin-astroをインストールします。

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

または

yarn add --dev prettier prettier-plugin-astro

prettier-plugin-astro

prettier-plugin-astroは、Prettier用のプラグインでAstroの.astroファイルを整形する機能を提供してくれます。

prettier-plugin-astro

A Prettier Plugin for formatting Astro files. Latest version: 0.13.0, last published: 3 months ago. Start using prettier...

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を設定することで、プロジェクトのコード整形を容易に行うことができます。一貫したコードスタイルを維持することで、読みやすさとメンテナンス性が向上します。