Prettier は、html, css, js ファイルをフォーマットします。
## 1. VSCode の拡張機能「Prettier – Code formatter」をインストール
サイドバー [ EXTENSIONS ] の検索窓から、「prettier」を検索し、「Prettier – Code formatter」をインストールします。
※ VSCode に「Prettier – Code formatter」をインストールしただけでは動きません。
## 2. VSCode の Prettier 設定
左下の歯車マークから [ Settings ] 画面を開き、以下の設定を行います。
> Format On Save : 有効
ファイルを保存するときに、ファイルをフォーマットします。
> Default Formatter: Prettier – Code formatter
デフォルトフォーマッターとして、ほかのフォーマッターよりも優先されるようになります。
## 3. 【重要】VSCode のウィンドウ画面をリロード
コマンドパレットを開き、[ Reload Window ] と入力すると、VSCode がリロードされます。
コマンドパレットのショートカット：
> ctrl + shift + p（Windows の場合）
> command + shift + p（Mac の場合）
## 4. Prettier 設定ファイルを作成
prettier を適用したいプロジェクトディレクトリの直下に.prettierrc.json（設定ファイル）をつくります。
.prettierrc.json ファイルに以下の内容を記述して保存します。
“`
{
“singleQuote”: true,
“bracketSpacing”: true,
“jsxBracketSameLine”: false,
“trailingComma”: “es5”,
“semi”: false
}
“`
※ .prettierrc.json ファイル内で javascript ファイルのようなコメントアウトを使うと、エラーが発生します。
## 5. 挙動確認
プロジェクトディレクトリ内に挙動確認用ファイル（test.js）ファイルをつくり、以下の内容を記述します。
“`
‘use strict’;
console.log( “prettier practice” );
“`
ファイルを保存した時、行末尾のセミコロンが削除されていれば設定完了です。
Git で.prettierrc.json ファイルを push しておけば、コードの書き方をある程度統一することができます。
## 参考サイト
[Prettier の導入方法 フロントエンド開発で必須のコード整形ツール](https://ics.media/entry/17030/ ‘Prettier の導入方法 フロントエンド開発で必須のコード整形ツール’)
[【自動整形】VSCode で Prettier を使う方法【設定必要です】](https://ralacode.com/blog/post/vscode-prettier/ ‘【自動整形】VSCode で Prettier を使う方法【設定必要です】’)
[VSCode でファイル保存時に Prettier を走らせる方法](https://zenn.dev/k_kazukiiiiii/articles/670ebae0005872 ‘VSCodeでファイル保存時にPrettierを走らせる方法’)
[【VSCode】Prettier の使い方＆おすすめ設定を紹介](https://ma-vericks.com/blog/vscode-prettier/ ‘【VSCode】Prettierの使い方＆おすすめ設定を紹介’)
[Prettier – Code formatter 【インストール・設定・使い方・機能しない時の対処方】](https://digitor.jp/textbook/vscode-prettier/ ‘Prettier – Code formatter 【インストール・設定・使い方・機能しない時の対処方】’)
[Prettierの設定オプションについてまとめてみた](https://zenn.dev/rescuenow/articles/c07dd571dfe10f “Prettierの設定オプションについてまとめてみた”)
