🚀

初学者でもわかる！！コードフォーマッター「Prettier」

に公開
JavaScript
初心者
初学者
Prettier
tech

はじめに

本記事を見つけてくださり、ありがとうございます🙇
今回は、コードフォーマッターの1つである「Prettier」についてご紹介します。

こんな方に見てほしい！

・プログラミング初学者
・Prettierのインストールと設定につまずいている方

Prettierとは？

Prettierは、書いたコードを決まったルールに従って、
自動で「きれいな形」に整形してくれるツールです。

Prettierの公式HPを見てみると、その特徴がわかります。

Prettierって何？

・意見を持ったコード整形ツール
・多くのプログラミング言語に対応
・ほとんどのエディタと統合可能
・項目が少ない

なぜ使うのか？

・コードが保存時に整形される
・コードレビューでスタイルについての議論が不要になる
・時間と労力を節約できる
・他にもたくさん

Step1.インストール

まずは、Prettierをインストールしてみましょう。
今回はコマンド操作の練習も兼ねて、コマンドでのインストール方法を紹介します。

※インストール方法は、2025年11月19日時点の公式ドキュメントを参考にしています。

ツールや、ライブラリをインストールするときに非常に重要なのが、「package.jsonと同じ階層にあるディレクトリでコマンドを実行すること」です。誤った場所で実行してしまうと正しく動作しなかったり、エラーが発生してしまいます。
コマンドを叩く前にカレントディレクトリを確認することをおすすめします。

1-1.カレントディレクトリを確認する

bash
pwd

1-2.Prettierをインストールする

bash
npm install --save-dev --save-exact prettier

Step2.機能を設定する

2-1.設定画面での設定

下記のショートキーを押すと、設定画面が表示されます。

macOSの場合
command ＋　,(カンマ)
windowsOSの場合
ctrl + ,(カンマ)

設定画面を開くと、以下の設定が表示されます。
それぞれの設定スコープには役割があるので、理解しておくといいと思います。

スコープ 設定範囲
👤ユーザー VSCOde全体で設定（プロジェクト横断で適用する
👥ワークスペース 開いている特定のプロジェクトのみ適用する

ワークスペースを選択し、以下のように選択してください。
・FormatOnSave：☑️
・DefaultFormatter：Prettier - Code formatter
すると、ルートディレクトリに.vscode/settings.jsonが作成されます。

ファイルの中身が下記のようになっていると思います。

.vscode/settings.json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

2-2.機能をカスタマイズする

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

上記コマンドを実行すると、.prettierrcファイルが作成されます。

作成したファイルに機能を書いていきます。
Prettierにはいくつかの機能がありますが、今回は、主要な機能を4つ抜粋し紹介します。

.prettierrc
{
    //ファイル保存時に、コード整形を実行
    "editor.formatOnSave": true,
　　//文字列にシングルクオートを使用する
    "singleQuote": true,
　　//インデントの幅を、半角スペース2つ分にする
    "tabWidth": 2,
　　//文末にセミコロンをつける
    "semi":true
}

Step3.使ってみよう

サンプルコードとして、下記のようにしてみます。

保存すると、、、

きれいなj.son形式にコードを整形してくれました！
Prettierは、一貫性のあるきれいなコードを維持できるようコーディングをサポートしてくれます。

Step4.ignoring code

Prettierも.gitignoreのように実行から除外することができます。

4-1.指定のファイルを対象外にする

ルートディレクトリ（package.jsonと同じ階層にあるディレクトリ）で下記コマンドを実行し、
.prettierignoreファイルを作成します。

bash
touch .prettierignore

/node_modulesや.git、build、coverageなど、直接編集しないファイルや、
自動整形されることで、エラーが発生し、プロジェクトに影響を及ぼす可能性があるフォルダは
先んじて除外することをおすすめします。

4-2. 特定のコードを対象外にする

対象から外したいコードの上にコメントアウトしてみましょう。
保存しても、コード整形されず、自分が書いたコードが優先されます。

app.js
// prettier-ignore

さいごに

お疲れ様でした！
最後まで、ご覧いただきありがとうございました。

学習の助けになれば嬉しく思います！

Discussion