【Prettier】コードを自動で整えるツールの使い方（ビギナー向け）

Prettierとは？コードを自動で整えるツール

コードを書いていると、次のような問題が出てきます。

▶︎ スペースが多かったり少なかったり、バラバラになる

▶︎ セミコロンがあったりなかったりと、一貫性がない

▶︎ コードの見た目が悪いけど、直す時間がもったいない

これを解決するのがPrettier（プリティア）です。

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

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

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

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

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

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

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

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

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

使い方は2つ

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

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

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

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

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が、「保存時に自動整形する」という設定です）

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

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

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

# .prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

• "semi": true → 文末にセミコロンをつける

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

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

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

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

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

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

// .prettierignore

node_modules
dist

よくある質問（Q & A）

Q1. PrettierとESLintは何が違うの？

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

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

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

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

ESLintについてはこちらの記事で紹介しているので、目を通してください。

Q2. PrettierはJavaScriptやTypeScript以外にも使える？

使えます。

HTML、CSS、JSON、Markdownなど、フロントエンドでよく使うファイル形式には幅広く対応しています。

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つを組み合わせることで、コードの品質が上がります。

React・TypeScript・Next.jsがどういう順番でつながっているか、2026年のフロントエンド学習の道筋をまとめたロードマップも無料で配布しています▼

⚫︎ monotein.com/present