【Visual Studio Code】VSCodeでコード整形を自動化。 Prettierの使い方完全ガイド！

はじめに
VSCode Prettierとは？
1. VSCode　Prettierの主な特徴
VSCode　Prettierの導入手順
まとめ

はじめに

本ブログは初心者向けにPrettier機能について分かり易く紹介しています。本ブログを読めば以下の知識が見に付きます。

Prettierとは何か、なぜ使うべきか
VSCodeでの導入手順と設定方法
Prettierのカスタマイズ方法

VSCode Prettierとは？

プログラミング初心者が最初にぶつかる壁のひとつが「コードの見た目」。インデントがバラバラだったり、スペースや改行のルールが統一されていないと、コードの可読性が下がり、バグの温床にもなります。

そこで登場するのが「Prettier」。Prettierは、コードの見た目を自動で整えてくれるフォーマッター（コード整形ツール）です。

VSCode　Prettierの主な特徴

保存時に自動でコードを整形
複数言語に対応（JavaScript, TypeScript, HTML, CSS, JSONなど）
チーム開発でもルール統一が可能

VSCode　Prettierの導入手順

拡張機能でPrettierをインストール

VSCode左側の「拡張機能」アイコンをクリックして、「検索」欄に「Prettier」を入力
「Prettier – Code formatter」を選択して「インストール」

Format On Saveの設定

保存時に自動整形されるように設定します。

設定画面の検索欄に「Format On Save」と入力
「Editor: Format On Save」にチェックを入れる

Prettierを既定のフォーマッターに設定

複数のフォーマッターがある場合、Prettierを明示的に指定する必要があります。

設定画面で「Default Formatter」と検索
Editorに「Prettier – Code formatter」を設定

Editor
- エディタで開いた通常のソースコード（.js、.ts、.html 等）
Notebook
- Jupyter Notebook形式（.ipynb）
- フォーマッターとしては、Black（Python用）等が使用される

Prettierの標準フォーマット形式（デフォルト設定）

Prettierデフォルト設定は「設定を最小限にして、スタイルの議論をなくす」ことを目的としています。つまり、デフォルト設定のまま使うだけで、十分に整ったコードスタイルが得られるように設計されています。

デフォルトの主な整形ルール

設定項目	デフォルト値	内　容
printWidth	80	1行の最大文字数（折り返し位置）
tabWidth	2	インデント幅（スペース数）
useTabs	false	インデントにタブを使うか（false＝スペース）
semi	true	行末にセミコロンを付ける
singleQuote	falth	文字列をダブルクォートで囲む
trailingComma	“es5”	配列やオブジェクトの末尾にカンマを付ける（ES5準拠）
bracketSpacing	true	オブジェクトリテラルの中括弧の間にスペースを入れる
arrowParens	“always”	アロー関数の引数に括弧を常に付ける
endOfLine	“lf”	改行コード（LF）
htmlWhitespace Sensitivity	“CSS”	CSSのdisplayプロパティに従って空白を扱う

サンプル

保存前（整形前）

<!DOCTYPE html><html><head><title>サンプルページ</title><meta charset="UTF-8"><style>body{background-color:#f0f0f0;}h1{color:blue;}</style></head><body><h1>こんにちは</h1><p>これはテストページです。</p><div id="container"><ul><li>項目1</li><li>項目2</li><li>項目3</li></ul></div><script>document.getElementById("container").style.border="1px solid #ccc";</script></body></html>

保存後（整形後）

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
    <meta charset="UTF-8" />
    <style>
      body {
        background-color: #f0f0f0;
      }
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>こんにちは</h1>
    <p>これはテストページです。</p>
    <div id="container">
      <ul>
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
      </ul>
    </div>
    <script>
      document.getElementById("container").style.border = "1px solid #ccc";
    </script>
  </body>
</html>

VSCode Prettireの設定をカスタマイズする

Prettierはデフォルトでも十分便利ですが、細かい整形ルールを自分好みに変更することもできます。

カスタマイズ設定ファイルの一覧

ファイル形式	ファイル名（例）	備　考
JSON	.prettierrc/.prettierrc.json	最もよく使われる形式
YAML	.prettierrc.yaml/.prettierrc.yml	読みやすさ重視ならこちら
JavaScript	.prettierrc.js/.prettierrc.config.js	動的設定が可能
TypeScript	.prettierrc.ts/.prettierrc.config.ts	TypeScriptプロジェクト向け
TOML	.prettierrc.toml	一部プロジェクトで好まれる
package.json	“prettierrc”キーを追加	小規模プロジェクトに便利

.prettierrc JSON ファイルによるカスタム例

プロジェクトルートに、.prettierrcとい名称のJSONファイルを作成します。

サンプル

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5"
}

主な設定項目
- semi
  - セミコロンを付けるか
- singleQuote
  - シングルクォートを使用するか
- tabWidth
  - インデント幅
- trailingComma
  - 末尾のカンマの扱い
  - “es5″とは、ES5（ECMAScript 5）仕様に準拠した末尾カンマのスタイル。
    - カンマが付く対象は
      - 配列
      - オブジェクトリテラル
      - 関数の引数（ただし一部の環境では非対応）
    - カンマが付かない対象
      - 関数呼び出しの引数
      - 関数宣言の引数
      - JSX属性など

trailingCommaについて
他にも “none”（カンマを付けない）や “all”（可能な限りすべてに付ける）という選択肢がありますが、初心者やチーム開発では “es5” が最もバランスが良いとされています。

整形前（サンプル）
効果を実感して貰うため、あえてインデントやクォート、セミコロン、カンマを乱しています。

const items = [ "apple", "banana", "cherry" ]
function showItems(){
console.log("商品一覧:")
items.forEach(function(item){
console.log(item)
})
}
showItems()

整形後（サンプル）

const items = ['apple', 'banana', 'cherry'];
function showItems() {
    console.log('商品一覧:');
    items.forEach(function (item) {
        console.log(item);
    });
}
showItems();