Prettierとは？インストールから設定、使い方まで初心者向けに全解説

Prettierが自動で整えてくれるもの

Prettierはコードの「見た目」を整えてくれるツールです。

次のようなものを自動で統一してくれます。

• インデント（スペースの量）
• 改行の位置
• セミコロン ; の有無
• クォートの種類（'か"か）
• 1 行の長さ
• カッコの位置

例えば次のようなコードを書いたとします。

const x = { a: 1, b: 2 }

Prettierを使うと次のようになります。

const x = { a: 1, b: 2 }

スペースが入り読みやすくなりました。

• monotein.com/present

PrettierとESLintの違い

Prettier と似たものにESLintがあります。

違いを整理しておきましょう。

---

• ESLint
→ コードの「ルール違反やバグ」を検出する

• Prettier
→ コードの「見た目」を整える（インデント・改行など）

---

ESLintは中身の問題、Prettierは見た目の問題を扱います。

役割が違うので、実際の開発では両方を使うことが一般的です。

使い方は2つ

Prettierの使い方は大きく2つあります。

【1】VS Codeのエクステンションを使う方法（おすすめ）

VS Codeの拡張機能（エクステンション）で「Prettier」と検索して、インストールするだけです。

設定も最小限で済み、ビギナーにはこの方法がおすすめなので、後ほど導入ステップを紹介します。

【2】npmでインストールする方法

プロジェクト単位でPrettierを追加する方法もあります。

次のコマンドでインストールします

npm install --save-dev prettier

チーム開発など、全員の書き方を統一したいときに使われます。

Prettierの設定方法（VS Codeにインストール）

ビギナーのうちはVS Codeのエクステンションが便利なので、これから設定方法を説明します。

---

【1】エクステンションをインストール

下記URLを開き、VS Codeにインストールしましょう。

Prettierリンク

---

【2】設定ファイルを作る

プロジェクトフォルダの最上位（ルート）に.vscodeというフォルダを作りましょう。

その中にsettings.jsonというファイルを作ります。

ここには次の内容を書いて保存します。

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

これだけで、ファイルを保存するたびにPrettierが自動で動きます。

（"editor.formatOnSave": trueが、「保存時に自動整形する」という設定です）

⚫︎ monotein.base.shop/p/00005

整形ルールを自分でカスタマイズしたい場合

上記の設定では、Prettierのデフォルト設定でコードが整形されます。

もし自分の好みに合わせたい場合は、ルートに.prettierrcという設定ファイルを作って行います。

// .prettierrc

{
    "semi": false,
    "singleQuote": false,
    "tabWidth": 4,
    "useTabs": false
}

• "semi": false → 文末にセミコロンをつけない

• "singleQuote": false → シングルクォートではなくダブルクォートを使う

• "tabWidth": 4 → インデントをスペース4つにする

• "useTabs": false → インデントはタブキーではなくスペースキーで行う

特定のファイルを整形したくない場合

Prettierに整形して欲しくないファイルがある場合は、.prettierignoreというファイルをルートに作ります。

そこに除外したいファイルやフォルダを書きましょう。

書き方は.gitignoreと同じです。

# .prettierignore

node_modules
dist

よくある質問

Q1. PrettierとESLintは何が違う？

Prettierは「見た目」を整えるツール、ESLintは「コードのルール違反」を検出するツールです。

---

• インデントや改行を自動で直してくれるのがPrettier

• 「varの代わりにconstを使うべき」といったルールを教えてくれるのがESLint

---

役割が違うので、実際の開発では両方を使うのが一般的です。

ESLintについては下記記事を参考にしてください▼

また近年は、ESLintとPrettier両方の働きをするBiome（バイオーム）が人気です。

下記の記事で紹介しているので参考にしてください▼

Q2. Prettierはフロントエンド開発以外にも使える？

使えます。

なおフロントエンド開発については、HTML、CSS、JSON、Markdown、JavaScriptなど幅広く対応しています。

React開発でよく出てくるファイルのほぼ全てをカバーしていると考えて大丈夫です。

Q3. VS Codeにエクステンションを入れたのに、保存しても自動整形されない

多くの場合、.vscode/settings.jsonの設定が正しく書かれていないことが原因です。

ファイルの場所（プロジェクトのルートに.vscodeフォルダがあるか）と、"editor.formatOnSave": trueが書かれているかを確認してください。

それでも動かない場合は、VS Codeのデフォルトフォーマッターが別のものに設定されている可能性があります。

.vscode/settings.jsonを見て、"editor.defaultFormatter": "esbenp.prettier-vscode"が書かれているかも合わせて確認してください。

---

Prettierが分かったら、次はESLintの記事も読んでみましょう。

Prettierが「見た目」を整えるのに対して、ESLintは「コードのルール違反」を教えてくれるツールです。

この2つを組み合わせることで、コードの品質が上がります。

Prettierの次は、React + Viteの開発環境のセットアップ全体を確認してみましょう▼

環境ツールは整えましたが、Reactの学習そのものが進みません

PrettierやESLintのような周辺ツールは設定できても、React本体の学習で手が止まる人は少なくありません。

今の状況を教えていただければ、次に何をすればいいか、どう進めていけばいいかを個別にお答えします。

「この勉強法で合っているのかな？」という確認だけでも大丈夫です。

下のフォームからご連絡いただければ、三好アキが直接、目を通してお返事します（無料）。