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の設定オプションについてまとめてみた”)