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

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

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

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

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

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

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

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

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

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

PrettierとESLintの違い

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

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

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

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

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

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

使い方は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でコードの見た目を自動化できるように、AIを使えば開発そのものも効率化できます。

「エラーが出たとき」「実装方針に迷ったとき」「コードレビューしてほしいとき」、これらのニーズにReact開発でそのまま使えるAIプロンプトを10個まとめた無料ガイドを配布しています。

⚫︎ monotein.com/present

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

上記の設定では、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

よくある質問（Q & A）

Q1. PrettierとESLintは何が違う？

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

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

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

役割が違うので、実際の開発では両方を使うのが一般的です。ESLintについてはこちらを参照。

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

こちらの記事で紹介しているのチェックしてみましょう。

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

Prettierのような開発ツールと合わせて、現在のフロントエンドの学習ステップも確認してみましょう。

React → TypeScript → Next.jsの順番でスキルを積み上げるためのロードマップを無料で配布しています。

次に進むステップを確認してみましょう▼

⚫︎ monotein.com/present