VS Code インデント自動整形の設定方法

By /

はい、承知いたしました。VS Codeのインデント自動整形の設定方法について、約5000語の詳細な解説を含む記事を作成し、ここに直接表示します。

VS Code徹底解説：インデント自動整形のすべて – 読みやすく、保守しやすいコードを保つための設定方法

プログラミングにおいて、コードのインデントは単なる見た目の問題ではありません。それはコードの構造を視覚的に表現し、可読性を高め、チーム開発においては一貫性を保つための極めて重要な要素です。特にPythonのようにインデントが構文そのものに影響を与える言語では、正確なインデントが不可欠です。

Microsoftが開発する高機能なソースコードエディタ、Visual Studio Code（VS Code）は、強力なコード整形機能を内蔵しており、インデントの自動整形もその中核をなす機能の一つです。しかし、その設定は多岐にわたり、単に「インデントを4スペースにする」といった簡単な話に留まりません。様々な言語、異なるプロジェクトの規約、そして個人の好みに合わせて、最適な整形設定を確立する必要があります。

この記事では、VS Codeにおけるインデント自動整形の機能、設定方法、そしてその背後にある概念について、約5000語にわたり徹底的に掘り下げて解説します。基本的なエディタ設定から、言語固有の設定、外部フォーマッターの活用、.editorconfigによるプロジェクト標準化、さらにはトラブルシューティングまで、VS Codeを使ってクリーンで整然としたコードを維持するために必要な知識を網羅します。

はじめに：なぜインデント整形が重要なのか？

コーディング規約の中で、インデントスタイル（タブかスペースか、スペース何個か）は最も議論になりやすいトピックの一つです。しかし、そのスタイルが何であれ、一貫性を持って適用されていることが重要です。

  1. 可読性の向上: 整然としたインデントは、コードブロックの始まりと終わり、ネストの深さを視覚的に明確にします。これにより、コードの流れや構造を素早く理解できるようになり、バグの発見や修正が容易になります。
  2. 保守性の向上: コードが理解しやすければ、将来的な機能追加や改修の際にも、既存コードの解析にかかる時間を短縮できます。
  3. チーム開発での一貫性: 複数の開発者が一つのプロジェクトに関わる場合、インデントスタイルが統一されていないと、コードが混在し、Gitの差分管理（diff）が読みにくくなったり、無用なコード変更が発生したりします。統一された整形ルールは、チーム全体の生産性を向上させます。
  4. 構文的な要件（一部言語）: PythonやYAMLのような言語では、インデントがコードのブロック構造を定義します。誤ったインデントは構文エラーや論理エラーに直結します。

VS Codeの自動整形機能を活用することで、手作業でのインデント調整の負担をなくし、常に規約に沿ったコードスタイルを維持することが可能になります。

第1章：VS Codeのインデント操作と基本機能

VS Codeは、単に自動整形を行うだけでなく、手動でのインデント操作や、入力中のインデント調整など、様々なインデント関連機能を提供しています。これらの基本機能を理解することは、自動整形設定を効果的に利用する上で役立ちます。

1.1 手動でのインデント操作

  • 行のインデント: 行頭にカーソルを置いて Tab キーを押すと、その行が現在のインデント設定（タブまたは指定数のスペース）分だけ右に移動します。
  • 行のアウトデント: 行頭にカーソルを置いて Shift + Tab キーを押すと、その行が現在のインデント設定分だけ左に移動します。
  • 複数行のインデント/アウトデント: 複数の行を選択した状態で Tab または Shift + Tab を押すと、選択したすべての行に対してインデントまたはアウトデントが実行されます。
  • インデントガイドライン: エディタには、インデントレベルを示す縦の破線が表示されます。これは editor.renderIndentGuides 設定でオン/オフできます（デフォルトはオン）。
  • 括弧ペアの色付けとインデント: editor.bracketPairColorization.enabled を有効にすると、括弧のペアが同じ色で表示され、コードブロックの範囲が視覚的に分かりやすくなります。これはインデント構造の把握に役立ちます。

1.2 自動インデント（入力中の挙動）

VS Codeは、コードを入力している最中にも、ある程度の自動インデントを行います。例えば、波括弧 {} や丸括弧 () のペアを入力したり、特定のキーワード（if, for, function など）の後にエンターキーを押したりすると、次の行が適切なインデントレベルになるように調整されます。

この自動インデントの挙動は、主に言語モードと、その言語モードに関連付けられたインデントルールによって制御されます。細かい挙動は言語によって異なりますが、基本的な設定は後述するエディタ設定や言語固有設定に依存します。

1.3 ドキュメント全体の整形（Format Document）

これは最も頻繁に使う機能の一つです。開いているファイル全体のコードスタイルを、設定されているフォーマットルールに従って自動的に整形します。

  • ショートカットキー:
    • Windows: Shift + Alt + F
    • macOS: Shift + Option + F
    • Linux: Ctrl + Shift + I
  • コマンドパレット: Ctrl + Shift + P (macOS: Cmd + Shift + P) を開き、「Format Document」と入力して実行することもできます。

このコマンドを実行すると、VS Codeは現在のアクティブなファイルに対して設定されているデフォルトのフォーマッター（後述）を使用し、コード全体のインデント、スペース、改行などを規約に従って調整します。

1.4 選択範囲の整形（Format Selection）

ファイル全体ではなく、コードの一部だけを整形したい場合に便利な機能です。

  • ショートカットキー:
    • Windows: Ctrl + K の後に Ctrl + F (キーを順番に押す)
    • macOS: Cmd + K の後に Cmd + F
    • Linux: Ctrl + K の後に Ctrl + F
  • コマンドパレット: 「Format Selection」と入力して実行。

整形したいコードブロックを選択した状態でこのコマンドを実行すると、選択範囲のみが整形されます。これは、他の部分に影響を与えずに、一時的にコピー＆ペーストしたコードや、手作業で編集した部分だけを整形したい場合に役立ちます。

第2章：VS Code設定によるインデント制御の基本

VS Codeのインデントを含むコード整形設定は、settings.jsonというファイルに記述されます。この設定には、ユーザー全体に適用される「ユーザー設定」と、特定のプロジェクト（ワークスペース）にのみ適用される「ワークスペース設定」があります。まずは基本的な設定項目を見ていきましょう。

2.1 設定画面を開く方法

VS Codeの設定は、以下のいずれかの方法で開くことができます。

  1. GUIで開く:
    • ファイル > ユーザー設定 > 設定 (Windows/Linux)
    • Code > 設定 > 設定 (macOS)
    • 左下の歯車アイコンをクリックし、「設定」を選択
      この方法で開くと、設定項目がカテゴリ別に整理されたGUIが表示されます。ここで「editor」や「format」といったキーワードで検索すると関連設定が見つかります。
  2. settings.json を直接編集する:
    • コマンドパレット (Ctrl + Shift + P) を開き、「Open User Settings (JSON)」または「Open Workspace Settings (JSON)」と入力して実行します。
      この方法で開くと、生のJSON形式で設定ファイルを編集できます。多くの設定を一度に行う場合や、他の開発者と設定を共有する場合は、JSONファイルを直接編集する方が効率的です。

本記事では、主にsettings.jsonを編集する方法で設定を説明します。GUI設定画面を利用している場合でも、各項目の説明に対応する設定名（例: editor.tabSize）をGUIの検索ボックスに入力すれば、同じ設定項目を見つけることができます。

2.2 主要なインデント関連設定項目

settings.json ファイルに記述する主要なインデント関連の設定項目は以下の通りです。

editor.tabSize

これは、タブ文字 (\t) が画面上で何個のスペース幅として表示されるか、または editor.insertSpaces が true の場合に、Tab キーを押したときや自動インデントで挿入されるスペースの数を定義します。

  • 型: number
  • デフォルト値: 4

例：タブ幅を2スペースにする場合

json
{
"editor.tabSize": 2
}

editor.insertSpaces

これは、インデントにタブ文字 (\t) を使用するか、それとも指定された数のスペースを使用するかを決定します。

  • 型: boolean

  • デフォルト値: true

  • true: インデントにはスペースが使用されます。editor.tabSize で指定された数のスペースが挿入されます。

  • false: インデントにはタブ文字 (\t) が使用されます。editor.tabSize は、タブ文字が画面上で表示される幅を決定しますが、実際のファイル内容にはタブ文字が記録されます。

例：インデントにタブ文字を使用する場合

json
{
"editor.insertSpaces": false
}

スペースを使うかタブを使うかは、プログラミングコミュニティで長年議論されているテーマです。

  • スペースの利点:
    • どのエディタや環境で開いても、常に同じ見た目になります（editor.tabSize の設定に依存しない）。
    • 異なるインデント幅を混ぜて使う（例: 2スペースと4スペース）場合に、構造が崩れにくいです。
  • タブの利点:
    • アクセシビリティが高い：ユーザーは自分の好みに合わせてタブ幅を設定できます（例: 視覚障碍のある方が大きなタブ幅でコード構造を把握しやすくするなど）。
    • ファイルサイズが小さくなる可能性があります（深いインデントの場合、スペースよりもタブ文字一つの方がバイト数が少ない）。
    • インデントとアライメント（コード内の要素を揃えること）を区別しやすくなります。インデントはタブ、アライメントはスペースと使い分けるスタイルがあります。

多くの現代的なコーディング規約（特にJavaScriptやWeb開発関連）ではスペースの使用が推奨される傾向にありますが、Pythonでは4スペース、Go言語ではタブなど、言語やコミュニティによって標準は異なります。プロジェクトやチームの規約に従うことが最も重要です。

editor.detectIndentation

これは、ファイルを開いたときに、そのファイルの内容（既存のインデントスタイル）を解析して、editor.tabSize と editor.insertSpaces の設定を自動的に上書きするかどうかを決定します。

  • 型: boolean

  • デフォルト値: true

  • true: ファイルを開くと、VS Codeはファイル内のインデントに使われている文字（タブかスペースか）と、その幅（スペースの場合）を検出します。検出されたスタイルがユーザーまたはワークスペース設定と異なる場合、VS Codeは一時的にそのファイルのインデント設定を検出されたスタイルに合わせます。これにより、異なるインデントスタイルを持つファイルを開いても、すぐに違和感なく編集を開始できます。ステータスバーには、現在のファイルのインデント設定（例: “Spaces: 2”, “Tab Size: 4″）が表示され、クリックすると設定を変更することも可能です。

  • false: ファイル内容に関わらず、ユーザーまたはワークスペース設定で指定された editor.tabSize と editor.insertSpaces が常に使用されます。

通常は true に設定しておくと便利ですが、プロジェクト全体で特定のインデントスタイルを強制したい場合は、false にして .editorconfig やワークスペース設定でスタイルを固定する方法もあります。

editor.formatOnSave

ファイルを保存する際に、自動的にコード整形を実行するかどうかを決定する、非常に便利な設定です。

  • 型: boolean

  • デフォルト値: false

  • true: ファイルを保存するたびに、「Format Document」コマンドを実行したのと同じように、コード全体が設定されたフォーマットルールに従って整形されます。

  • false: 保存時には自動整形は行われません。手動で「Format Document」を実行する必要があります。

この設定を true にすることは強く推奨されます。 コードを書き終えて保存するだけで整形が完了するため、手作業での整形漏れを防ぎ、常にきれいなコードを保つことができます。

例：保存時に自動整形を有効にする場合

json
{
"editor.formatOnSave": true
}

editor.formatOnPaste

コードをエディタにペーストした際に、自動的に整形を実行するかどうかを決定します。

  • 型: boolean

  • デフォルト値: false

  • true: 外部からコードをコピーしてエディタに貼り付けた際に、ペーストされたコードブロックが自動的に整形されます。

  • false: ペースト時には自動整形は行われません。

他の場所からコードをコピーしてくることが多い場合に便利です。

例：ペースト時に自動整形を有効にする場合

json
{
"editor.formatOnPaste": true
}

editor.formatOnType

入力中に、特定の文字（例: セミコロン ; や波括弧 } など）を入力した際に、その直前のコードブロックなどが自動的に整形されるかどうかを決定します。この機能はフォーマッターがサポートしている必要があります。

  • 型: boolean

  • デフォルト値: false

  • true: 入力中に自動整形が実行されます。

  • false: 入力中の自動整形は行われません。

この設定を有効にすると、入力の邪魔になる場合もあるため、好みが分かれます。多くの場合は editor.formatOnSave だけで十分でしょう。

例：入力中に自動整形を有効にする場合

json
{
"editor.formatOnType": true
}

editor.defaultFormatter

これは、言語ごとに使用するデフォルトのフォーマッターを指定する設定です。特定の言語に対して、どの拡張機能が提供するフォーマッターを使用するかを設定します。

  • 型: string
  • デフォルト値: null

フォーマッターは拡張機能として提供されることがほとんどです。例えば、JavaScript/TypeScriptファイルに対してPrettierというフォーマッターを使いたい場合、Prettier拡張機能のIDを指定します。拡張機能のIDは通常、発行者名.拡張機能名 の形式です（例: esbenp.prettier-vscode）。

この設定は、言語固有の設定として記述することが一般的です（後述の第4章を参照）。

例：JavaScriptファイルに対してPrettierをデフォルトフォーマッターとして設定する場合

json
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

この設定がない場合、VS Codeはその言語に対してインストールされているフォーマッターの中から、優先順位やユーザーの選択に基づいて自動的に一つを選択しようとします。しかし、意図しないフォーマッターが使われることを避けるため、明示的に指定することが推奨されます。

第3章：言語固有のインデント設定

プロジェクトやファイルの種類（言語）によって、インデントスタイルやフォーマットルールは異なります。例えば、Pythonでは4スペースが一般的ですが、HTMLやCSSでは2スペースが使われることがあります。VS Codeでは、言語ごとに異なる設定を適用することができます。

3.1 言語IDとは

VS Codeは、開いているファイルの種類を「言語ID」で識別します。例えば、.js ファイルは javascript、.py ファイルは python、.html ファイルは html といった言語IDを持ちます。ステータスバーの右下にも現在のファイルの言語IDが表示されます。

設定ファイル (settings.json) では、この言語IDをキーとして、その言語に固有の設定を記述することができます。

3.2 言語固有設定の記述方法

言語固有の設定は、settings.json のルートに [languageId] の形式でブロックを追加して記述します。このブロック内に記述された設定は、指定された言語IDを持つファイルを開いている場合にのみ適用されます。

例：JavaScriptファイルだけタブ幅を2にする（他のファイルはデフォルトの4）

“`json
{
“editor.tabSize”: 4, // 全体に適用される設定 (デフォルト値と同じだが例として)
“editor.insertSpaces”: true, // 全体に適用される設定 (デフォルト値と同じだが例として)

"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true // 明示的に記述しても良いし、全体設定を継承しても良い
},
"[python]": {
    "editor.tabSize": 4, // Pythonファイルは4スペース
    "editor.insertSpaces": true
}

}
“`

この例では、JavaScriptファイルを開いたときは editor.tabSize が2になり、Pythonファイルを開いたときは4になります。その他の言語のファイルを開いたときは、グローバルな設定（[javascript] や [python] ブロックの外側に記述された設定）が適用されます。

言語固有の設定ブロック内で、グローバル設定と同じ項目を記述すると、その言語に対してはグローバル設定が上書きされます。記述されていない項目は、グローバル設定が継承されます。

3.3 主要言語におけるインデント設定例と言語ID

よく使われる言語とその一般的なインデントスタイル、そしてVS Codeでの言語IDと設定例をいくつか紹介します。

  • JavaScript / TypeScript:

    • 言語ID: javascript, typescript
    • 一般的なインデント: 2スペースまたは4スペース
    • 設定例（2スペース）：
      json
      {
      "[javascript]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "esbenp.prettier-vscode" // フォーマッター指定例
      },
      "[typescript]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
      }

  • Python:

    • 言語ID: python
    • 一般的なインデント: 4スペース (PEP 8 推奨)
    • 設定例（4スペース）：
      json
      {
      "[python]": {
      "editor.tabSize": 4,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "ms-python.python" // Python拡張機能のフォーマッター
      }
      }

  • HTML:

    • 言語ID: html
    • 一般的なインデント: 2スペースまたは4スペース
    • 設定例（2スペース）：
      json
      {
      "[html]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "vscode.html-language-features" // VS Code組み込みのHTMLフォーマッター
      }
      }

  • CSS / SCSS / Less:

    • 言語ID: css, scss, less
    • 一般的なインデント: 2スペースまたは4スペース
    • 設定例（2スペース）：
      json
      {
      "[css]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "vscode.css-language-features" // VS Code組み込みのCSSフォーマッター
      },
      "[scss]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "vscode.css-language-features"
      },
      "[less]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "vscode.css-language-features"
      }
      }

  • JSON:

    • 言語ID: json, jsonc (コメント付きJSON)
    • 一般的なインデント: 2スペースまたは4スペース
    • 設定例（2スペース）：
      json
      {
      "[json]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "vscode.json-language-features" // VS Code組み込みのJSONフォーマッター
      },
      "[jsonc]": {
      "editor.tabSize": 2,
      "editor.insertSpaces": true,
      "editor.defaultFormatter": "vscode.json-language-features"
      }
      }

このように、言語ごとに推奨されるスタイルに合わせて editor.tabSize と editor.insertSpaces を設定し、必要に応じて editor.defaultFormatter を指定します。

第4章：フォーマッターの活用

VS Code自体にも基本的な整形機能はありますが、より高度でカスタマイズ可能な整形を行いたい場合、または言語固有の詳細な規約（例: セミコロンの有無、引用符の種類、オブジェクトのプロパティ間のスペースなど）に従いたい場合は、拡張機能として提供される「フォーマッター」を利用するのが一般的です。

4.1 フォーマッターとは？ なぜ外部フォーマッターを使うのか？

フォーマッターは、ソースコードを特定のコーディング規約に従って自動的に整形するツールです。VS Codeの組み込みフォーマッターは基本的なインデントやスペース調整を行いますが、外部のフォーマッターは以下のようなより詳細なルールに基づいた整形が可能です。

  • インデントスタイルと幅（タブ/スペース、数）
  • 最大行長による改行
  • 引用符のスタイル（シングルクォート/ダブルクォート）
  • セミコロンの有無
  • オブジェクト、配列、関数の引数などの要素間のスペースや改行
  • 不要なスペースや空行の削除
  • コードブロックのスタイル（波括弧の置き方など）

多くのプログラミング言語には、コミュニティで広く使われている標準的なフォーマッターが存在します。これらのフォーマッターをVS Codeから利用することで、その言語のデファクトスタンダードなコーディングスタイルを簡単に適用できます。

4.2 代表的なフォーマッターの紹介

  • Prettier:
    • 多くのWeb技術（JavaScript, HTML, CSS, JSON, GraphQL, Markdownなど）に対応した人気のフォーマッターです。
    • 特徴は「Opinionated」であること。設定項目が比較的少なく、「ほとんどの状況でこれがベスト」というスタイルを強制することで、スタイルの議論を減らすことを目指しています。
    • VS Code拡張機能: esbenp.prettier-vscode
  • ESLint (フォーマット機能):
    • 主にJavaScript/TypeScript向けのリンターですが、eslint-plugin-prettier や eslint-config-prettier といったプラグインと組み合わせることで、フォーマッターとしても機能させることができます。リンティング（コード品質や潜在的なエラーのチェック）とフォーマットを一つのツールで管理したい場合に便利です。
    • VS Code拡張機能: dbaeumer.vscode-eslint
  • Black:
    • Python専用の「Uncompromising」なフォーマッターです。Prettierと同様に設定項目が非常に少なく、PEP 8に準拠した一貫したスタイルを強制します。
    • 通常はPythonパッケージとしてインストールし、VS CodeのPython拡張機能や専用拡張機能経由で利用します。
    • VS Code拡張機能例: ms-python.python (設定でBlackを指定), cschleiden.vscode-black-formatter
  • autopep8 / yapf:
    • こちらもPython向けのフォーマッターです。Blackよりは設定の柔軟性があります（特にautopep8はPEP 8に違反している箇所のみを修正することを目指しています）。
    • VS CodeのPython拡張機能から利用可能です。
  • Beautify:
    • JavaScript, HTML, CSSなどをサポートするフォーマッターです。Prettierよりも設定の自由度が高いのが特徴です。
    • VS Code拡張機能: hookyqr.beautify

これらのフォーマッターは、VS Codeの拡張機能マーケットプレイスからインストールして使用します。

4.3 フォーマッター拡張機能のインストール

  1. VS Codeのアクティビティバー（左側のアイコンが並んだバー）から「拡張機能」アイコン（四角が並んだアイコン）をクリックします。
  2. 検索ボックスに、インストールしたいフォーマッター名（例: “Prettier”）を入力します。
  3. 検索結果から目的の拡張機能（発行者名を確認）を見つけ、「Install」ボタンをクリックします。

インストールが完了したら、VS Codeを再起動することが推奨されます。

4.4 editor.defaultFormatter の設定

インストールしたフォーマッターを特定の言語で使用するためには、editor.defaultFormatter 設定でそのフォーマッターの拡張機能IDを指定します。これは前述の通り、言語固有の設定として記述するのが一般的です。

例：JavaScriptとTypeScriptでPrettierを使用し、PythonでBlackを使用する場合

“`json
{
“editor.formatOnSave”: true, // 保存時整形はグローバルで有効にしておくのが便利

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // インデントサイズなどはPrettierの設定ファイルで定義することが多いが、
    // VS Codeの基本設定が優先される場合もあるので注意。
    // "editor.tabSize": 2,
    // "editor.insertSpaces": true
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // "editor.tabSize": 2,
    // "editor.insertSpaces": true
},
"[python]": {
    "editor.defaultFormatter": "ms-python.python" // Python拡張機能が提供するフォーマッターを利用
    // または、Black専用拡張機能を使う場合: "editor.defaultFormatter": "cschleiden.vscode-black-formatter"
    // Blackは通常4スペースを強制するため、editor.tabSizeはBlackの設定より優先されないことが多い。
    // "editor.tabSize": 4,
    // "editor.insertSpaces": true
}

}
“`

editor.defaultFormatter が設定されていない場合、VS Codeは複数のフォーマッターがインストールされているときに、どのフォーマッターを使うか確認するメッセージを表示したり、内部的な優先順位に基づいて自動的に選択したりします。意図したフォーマッターを確実に使用するためには、明示的な指定が最も確実です。

4.5 フォーマッター固有の設定ファイルとの連携

多くの強力なフォーマッター（特にPrettier, Black, ESLintなど）は、プロジェクトのルートディレクトリに専用の設定ファイル（例: .prettierrc, .eslintrc.js, pyproject.toml など）を置くことで、より詳細なフォーマットルールを設定できるようになっています。

これらの設定ファイルは、VS Codeの settings.json よりも高い優先順位を持つことが一般的です。つまり、settings.json で editor.tabSize: 2 と設定していても、Prettierの設定ファイル（.prettierrc）で tabWidth: 4 と設定されていれば、Prettierが適用されるファイルでは4スペースのインデントが使用されます。

これは、プロジェクト固有のフォーマットルールをチーム内で共有し、エディタや開発環境に依存せず一貫したスタイルを保つために非常に重要な仕組みです。

フォーマッターの設定方法の詳細は各フォーマッターのドキュメントを参照する必要がありますが、例えばPrettierでインデント幅を2スペースにする設定は、.prettierrc ファイルに以下のように記述します（JSON形式の場合）：

json
{
"tabWidth": 2,
"useTabs": false
}

このように、settings.json で editor.defaultFormatter を指定したら、そのフォーマッターの挙動は、フォーマッター固有の設定ファイルで制御するのが最も一般的で推奨される方法です。VS Codeの editor.tabSize や editor.insertSpaces は、フォーマッターが設定されていない言語や、VS Code組み込み機能を使う場合に主に効果を発揮すると理解しておくと良いでしょう。

第5章：.editorconfigによるプロジェクト標準化

これまでの設定は、VS Codeの機能に依存していました。しかし、プロジェクトによってはVS Code以外のエディタ（Sublime Text, Atom, IntelliJ IDEAなど）を使用する開発者がいるかもしれません。エディタが異なると、同じeditor.tabSizeのような設定項目があっても、その設定方法や挙動が異なります。

ここで登場するのが .editorconfig です。.editorconfigは、異なるエディタやIDEの間でコーディングスタイル（特にインデントスタイル）の標準化を支援するためのファイルフォーマットです。

5.1 .editorconfigとは？ その利点

.editorconfig は、プロジェクトのルートディレクトリ、またはサブディレクトリに配置される設定ファイル（.editorconfigという名前）です。このファイルには、ファイルの種類やパスに基づいて、インデントスタイル、文字エンコーディング、行末文字などの設定を記述します。

  • 利点:
    • エディタ非依存: .editorconfigプラグインが提供されていれば、VS Codeだけでなく、主要なほとんどのエディタやIDEで同じ設定を読み込んで適用できます。
    • プロジェクト全体での一貫性: リポジトリにコミットして共有することで、チームメンバー全員が同じコーディングスタイルで開発できます。
    • 設定の一元管理: プロジェクト固有のスタイル設定を、.editorconfig ファイル一つにまとめることができます。

VS Codeで .editorconfig を利用するためには、EditorConfig for VS Code拡張機能をインストールする必要があります。

5.2 EditorConfig for VS Code拡張機能のインストール

  1. VS Codeの拡張機能ビューを開きます。
  2. 検索ボックスに「EditorConfig」と入力します。
  3. 「EditorConfig for VS Code」という拡張機能を見つけ、「Install」をクリックします。

この拡張機能をインストールすると、VS Codeはプロジェクトディレクトリにある .editorconfig ファイルを自動的に読み込み、その設定をエディタに適用するようになります。

5.3 .editorconfig ファイルの記述方法

.editorconfig ファイルはINIファイル形式に似ています。ファイルはヘッダー（セクション名）とプロパティのペアで構成されます。

  • ヘッダー（セクション名）: ファイルパスのパターンを指定します。グロブパターンが使用できます（例: *.js, src/**/*.py, {*.html,*.css}）。[*] はすべてのファイルにマッチします。
  • プロパティ: そのセクションにマッチするファイルに適用される設定項目を記述します。

主要なプロパティ：

  • indent_style: インデントスタイルを指定します。「space」または「tab」。
  • indent_size: インデント幅をスペース数で指定します。indent_style が space の場合に使用されます。
  • tab_width: タブ文字の幅をスペース数で指定します。indent_style が tab の場合に使用されます。指定されていない場合、通常 indent_size と同じ値が使用されます。
  • end_of_line: 行末文字を指定します。「lf」 (Line Feed, \n)、「cr」 (Carriage Return, \r)、「crlf」 (Carriage Return + Line Feed, \r\n)。
  • charset: 使用する文字エンコーディングを指定します（例: utf-8, utf-8-bom, utf-16le, utf-16be, ascii）。
  • trim_trailing_whitespace: 行末の不要なスペースを自動的に削除するかどうかを指定します。「true」または「false」。
  • insert_final_newline: ファイルの最後に改行を挿入するかどうかを指定します。「true」または「false」。
  • max_line_length: 最大行長を指定します（多くのエディタがサポートしていますが、VS CodeのEditorConfig拡張機能は直接このプロパティを処理しません。リンターなどでチェックすることが多いです）。

.editorconfig ファイルは、より具体的なパスのセクションが、より一般的なパスのセクションの設定を上書きします。また、エディタはディレクトリツリーを遡って .editorconfig ファイルを探し、最初に見つけた root=true が設定された .editorconfig ファイルがあるディレクトリまでを探索します。

例：.editorconfig ファイルの内容

“`editorconfig

トップレベルのEditorConfigファイルであることを示す

root = true

すべてのファイルに適用される設定

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

JavaScriptとCSSファイルに適用される設定

[*.{js,css}]
indent_style = space
indent_size = 2

Pythonファイルに適用される設定

[*.py]
indent_style = space
indent_size = 4

Makefileに適用される設定（タブを使用）

[Makefile]
indent_style = tab
tab_width = 8

README.mdのようなMarkdownファイルに適用される設定 (特別なインデントなし)

[*.md]
indent_style = space
indent_size = 4 # Markdownのリストや引用のためのインデントは通常4
“`

この .editorconfig ファイルをプロジェクトのルートに配置すると、EditorConfig拡張機能がインストールされたVS Codeは、各ファイルを開いたときにこれらの設定を読み込み、エディタのインデントやスペース関連の挙動を自動的に調整します。

5.4 .editorconfigとVS Code設定の優先順位

EditorConfig for VS Code拡張機能が有効な場合、.editorconfig ファイルで設定された項目は、ほとんどのVS Codeの基本設定（editor.tabSize, editor.insertSpaces など）よりも優先されます。

優先順位 (おおまか):

  1. フォーマッター固有の設定ファイル (例: .prettierrc)
  2. .editorconfig ファイル
  3. VS Codeのワークスペース設定 (.vscode/settings.json)
  4. VS Codeのユーザー設定 (settings.json)
  5. VS Codeのデフォルト設定

したがって、プロジェクト固有のインデントスタイルをチーム全体で共有したい場合は、.editorconfig ファイルを作成し、そこに標準スタイルを記述するのが最も効果的です。そして、VS Codeの settings.json やワークスペース設定では editor.formatOnSave: true と editor.defaultFormatter を設定し、整形ツール自体を統一するというアプローチが推奨されます。これにより、異なるエディタを使う開発者も、同じVS CodeとPrettier/Blackを使う開発者も、最終的にコミットされるコードは同じスタイルになります。

第6章：ワークスペース設定によるプロジェクト固有の設定

VS Codeの設定は、グローバルなユーザー設定と、特定のプロジェクト（ワークスペース）にのみ適用されるワークスペース設定に分けられます。ワークスペース設定は、そのプロジェクトのルートディレクトリ直下の .vscode という隠しフォルダの中に settings.json という名前で保存されます。

6.1 ユーザー設定 vs ワークスペース設定

  • ユーザー設定: VS Code全体に適用される設定です。どのプロジェクトを開いても有効になります。個人のコーディングスタイルやエディタの使い勝手に関する設定（テーマ、フォント、キーバインド、一般的なエディタ挙動など）は通常ここに記述します。
  • ワークスペース設定: 現在開いている特定のプロジェクトにのみ適用される設定です。プロジェクト固有のパス設定、拡張機能の設定、そしてプロジェクト固有のコーディングスタイル設定はここに記述するのが適切です。ワークスペース設定はユーザー設定よりも優先されます。

6.2 .vscode/settings.json の作成と利用

ワークスペース設定は、プロジェクトのルートディレクトリに .vscode フォルダを作成し、その中に settings.json ファイルを作成することで有効になります。

例：プロジェクトAの .vscode/settings.json

json
{
// プロジェクトAに特化した設定
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode", // プロジェクトAでPrettierを使う
"[python]": {
"editor.defaultFormatter": "ms-python.python" // プロジェクトAではPython拡張機能のフォーマッターを使う
}
}

この設定は、この .vscode/settings.json ファイルを含むフォルダをワークスペースとして開いている場合にのみ有効です。他のプロジェクトを開いた場合は、ユーザー設定やそのプロジェクト固有のワークスペース設定が適用されます。

6.3 チーム開発における .vscode/settings.json の重要性

.vscode/settings.json をGitリポジトリなどでチームメンバーと共有することで、プロジェクト固有の設定（どのフォーマッターを使うか、保存時に整形するかなど）を簡単に統一できます。これは .editorconfig と同様に、チーム開発におけるコードスタイルの一貫性を保つために非常に有効な手段です。

推奨されるアプローチは以下の通りです。

  1. .editorconfigで基本的なインデントスタイル（タブ/スペース、幅）や行末文字などを定義する。これにより、異なるエディタを使っている開発者間でも基本的なスタイルを統一できます。
  2. .vscode/settings.jsonで、そのプロジェクトで使用するデフォルトのフォーマッター（editor.defaultFormatter）と、保存時整形（editor.formatOnSave: true）を設定する。これにより、VS Codeユーザーは拡張機能による強力な整形を自動的に利用できます。
  3. フォーマッター固有の設定ファイル（例: .prettierrc）で、より詳細なフォーマットルールを定義する。これもリポジトリで共有します。

この組み合わせにより、エディタの種類に関わらず .editorconfig で基本的なスタイルを統一し、VS Codeユーザーは .vscode/settings.json で推奨フォーマッターと自動整形を有効にし、さらにフォーマッター固有の設定ファイルで詳細なルールを統一、という多層的なスタイル管理が可能になります。

第7章：トラブルシューティング – 整形が効かないとき

設定を行ったにも関わらず、期待通りにコードが整形されない場合があります。原因はいくつか考えられますが、以下のチェックリストに従って確認することで、多くの場合問題を解決できます。

7.1 整形が実行されない！ チェックポイント

  1. editor.formatOnSave は有効か？: 保存時に整形を期待している場合、この設定が true になっているか確認してください。ユーザー設定、ワークスペース設定の両方を確認し、ワークスペース設定がユーザー設定を上書きしていないかも確認します。
  2. editor.defaultFormatter は正しく設定されているか？: 整形したい言語に対して、使用したいフォーマッターが editor.defaultFormatter で正しく指定されているか確認してください。言語固有の設定 ([languageId]) で指定されているか、グローバルで指定されているか、目的の言語IDが正しいかを確認します。
  3. フォーマッター拡張機能はインストールされているか？ 有効か？: 指定したフォーマッター（例: Prettier）のVS Code拡張機能がインストールされており、有効になっているか確認してください。拡張機能ビューで検索し、状態を確認できます。無効になっている場合は有効にしてください。
  4. 言語IDは正しいか？: 開いているファイルの言語IDが、設定で指定した言語IDと一致しているか確認してください。ステータスバーの右下で確認できます。ファイル拡張子と言語IDのマッピングがずれている場合は、files.associations 設定で調整が必要な場合があります。
  5. 手動整形（Format Document）は動作するか？: Shift + Alt + F (Windows) などで手動でのドキュメント整形が動作するか試してください。これが動作しない場合は、フォーマッター自体の問題である可能性が高いです。動作する場合は、editor.formatOnSave などの自動実行設定に問題があると考えられます。
  6. 出力パネルのログを確認する: 整形が失敗した場合、VS Codeは出力パネルにエラーメッセージを出力することがあります。
    • 表示 > 出力 を選択。
    • 出力パネルの右側にあるドロップダウンから、「Log (Window)」、「Log (Extension Host)」、あるいは使用しているフォーマッターの名前（例: Prettier, ESLint, Python）を選択します。
    • エラーメッセージや警告メッセージが表示されていないか確認します。例えば、フォーマッターのインストールパスが正しくない、フォーマッターの設定ファイルに構文エラーがあるなどが報告されることがあります。
  7. 競合する設定がないか:
    • .editorconfig ファイルが存在し、VS Code設定やフォーマッター設定と競合していないか確認します。.editorconfig の設定が優先されることが多いです。
    • ワークスペース設定 (.vscode/settings.json) がユーザー設定を意図せず上書きしていないか確認します。
    • フォーマッター固有の設定ファイル（例: .prettierrc）が、VS Code設定や他の設定と競合していないか確認します。フォーマッター固有の設定ファイルが最も優先されることが多いです。
  8. 特定のファイル形式やディレクトリが除外されていないか:
    • files.exclude や files.watcherExclude のような設定で、対象ファイルがVS Codeの監視対象から外されていないか確認します。
    • 一部のフォーマッター拡張機能には、整形対象から特定のファイルをスキップする設定がある場合があります。
  9. フォーマッターが期待通りに動作しない（特定の設定が反映されない）:
    • 使用しているフォーマッターのドキュメントを確認し、そのフォーマッターがどのような設定項目をサポートし、どのような優先順位で設定ファイルを読むかを確認します。
    • VS Codeの基本設定（editor.tabSize, editor.insertSpaces）が、使用しているフォーマッターによって無視される（フォーマッター自身の設定が優先される）場合があります。これは想定された挙動です。フォーマッターのインデント設定は、VS Code設定ではなくフォーマッター固有の設定ファイルで行うべきです。
    • 場合によっては、VS Codeの設定でフォーマッターに引数を渡す必要があるかもしれません（[languageId].editor.defaultFormatter ではなく、そのフォーマッター固有の設定項目として記述されます）。

7.2 異なる設定間の競合と解決策

前述の優先順位を理解することが重要です。一般的に、より具体的な設定（ワークスペース > ユーザー、言語固有 > グローバル）や、より外部の、プロジェクトに紐づいた設定（フォーマッター設定ファイル > .editorconfig > VS Code設定）が優先されます。

  • VS Code設定 vs .editorconfig: .editorconfigの設定がVS Codeの基本設定を上書きします。例えば .editorconfig で indent_size = 2 とあれば、VS Codeの editor.tabSize: 4 は無視されます。
  • VS Code設定 vs フォーマッター設定: editor.defaultFormatter が指定され、そのフォーマッターが有効な場合、そのフォーマッターの挙動は、そのフォーマッター固有の設定ファイル（もしあれば）またはそのフォーマッター自身のデフォルト設定によって決まります。 VS Codeの editor.tabSize や editor.insertSpaces は、そのフォーマッターがそれらの設定を「尊重する」ように実装されていない限り、無視されることが多いです。フォーマッターのインデントスタイルを制御したい場合は、そのフォーマッター固有の設定ファイル（例: .prettierrc）を編集してください。
  • ワークスペース設定 vs ユーザー設定: ワークスペース設定はユーザー設定を上書きします。特定のプロジェクトで異なる設定が必要な場合は、ワークスペース設定を利用します。

トラブルシューティングの際は、最も優先順位の高い設定から順番に確認していくのが効率的です。

第8章：インデント整形をさらに活用する

VS Codeのインデント整形機能は、単に保存時にコードをきれいにするだけでなく、開発ワークフロー全体で活用することができます。

8.1 Gitフックによるコミット前整形

コードがリポジトリにコミットされる前に自動的に整形を実行するように設定することで、リポジトリ内のコードが常に整形された状態であることを保証できます。これは、手動での整形忘れを防ぎ、きれいな履歴を保つ上で非常に有効です。

huskyやlint-stagedといったツールを使用すると、Gitのpre-commitフックを利用して、コミット対象のファイル（ステージングエリアにあるファイル）に対してフォーマッター（例: Prettier）を実行できます。

  1. プロジェクトに husky と lint-staged をインストールします（npm/yarn）。
  2. package.json に husky および lint-staged の設定を追加します。lint-staged の設定で、特定のファイルパターン（例: *.js, *.css）にマッチするファイルに対して実行するコマンド（例: prettier --write）を指定します。

json
// package.json 例
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write",
"git add" // 整形結果をステージングエリアに戻す
],
"*.py": [
"black", // Pythonの場合はBlack
"git add"
]
}
}

この設定により、git commit を実行するたびに、ステージングエリアにあるファイルが自動的に整形され、その変更もコミットに含まれるようになります。これはVS Codeの formatOnSave と併用することで、ローカルでの開発体験とリポジトリの整合性の両方を高めることができます。

8.2 CI/CDパイプラインでの整形チェック

継続的インテグレーション/継続的デリバリー (CI/CD) パイプラインに整形チェックを組み込むことも一般的です。これにより、整形されていないコードが誤ってメインブランチにマージされるのを防ぐことができます。

CIサーバー（Jenkins, GitHub Actions, GitLab CI, CircleCIなど）上で、ビルドプロセスやテスト実行の一環として、フォーマッターのチェックコマンドを実行します。多くのフォーマッターは、ファイルを実際に変更する --write オプションだけでなく、整形が必要なファイルがあるかどうかをチェックする --check や --diff のようなオプションを提供しています。

例：GitHub ActionsでのPrettierチェック

“`yaml

.github/workflows/prettier.yml

name: Prettier Check

on: [push, pull_request]

jobs:
prettier:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3

- name: Set up Node.js
  uses: actions/setup-node@v3
  with:
    node-version: '16'

- name: Install dependencies
  run: npm install

- name: Run Prettier Check
  run: npx prettier --check .

“`

このワークフローは、プッシュまたはプルリクエストが発生するたびに、リポジトリ全体に対してPrettierのチェックを実行します。整形が必要なファイルが見つかった場合（つまり、コードスタイルが規約に従っていない場合）、コマンドがゼロ以外の終了コードを返し、CIジョブが失敗します。これにより、開発者はマージ前にコードを整形する必要があることを通知されます。

8.3 リンターとフォーマッターの役割分担と連携

リンター（Linter）は、コードの品質や潜在的なエラーをチェックするツールです。ESLint (JavaScript), Flake8 (Python), Stylelint (CSS) などがあります。リンターは、コーディング規約の違反（命名規則、複雑すぎるコード、未使用変数など）や、バグにつながりやすいパターンを検出します。

フォーマッターは、コードの見た目（インデント、スペース、改行、引用符など）を整えるツールです。

この二つは目的が異なりますが、一部のルール（例: 最大行長）は重複することがあります。現代的な開発ワークフローでは、リンターとフォーマッターを連携させて使用するのが一般的です。

  • フォーマッター: コードの見た目に関するルールを自動的に修正します。
  • リンター: コードの品質やエラーに関するルールをチェック・警告します。整形では修正できないスタイルルール（例: 関数名の命名規則）や、潜在的なバグを指摘します。

ESLintとPrettierのように、リンターの設定でフォーマッターのルールとの競合を避けるためのプラグイン（例: eslint-config-prettier）が提供されている場合もあります。これは、整形に関するルールはPrettierに任せ、ESLintは整形以外のルールのみをチェックするように設定するためのものです。

VS Codeでは、リンターの拡張機能（ESLint拡張機能など）もインストールし、フォーマッターと併用することで、コードの品質とスタイルの両方を高いレベルで維持できます。リンターの警告やエラーは、エディタに波線などで表示されるため、リアルタイムに問題を把握・修正できます。

まとめ：最適な設定の組み合わせとチーム開発での重要性

VS Codeにおけるインデント自動整形は、単一の設定項目ではなく、複数の機能や設定が連携して動作するものです。最適な設定を確立するためには、以下の要素を組み合わせて利用することが推奨されます。

  1. .editorconfig: プロジェクトのルートに .editorconfig ファイルを配置し、基本的なインデントスタイル（タブ/スペース、幅）、行末文字、文字コードなどを定義します。これにより、エディタに依存しない基本的なスタイル標準を確立します。VS Codeでは EditorConfig for VS Code 拡張機能が必要です。
  2. フォーマッター拡張機能: 使用する言語やプロジェクトの規約に合わせて、適切なフォーマッター（Prettier, Blackなど）のVS Code拡張機能をインストールします。
  3. ワークスペース設定 (.vscode/settings.json):
    • "editor.formatOnSave": true を設定し、ファイルを保存するたびに自動整形が実行されるようにします。
    • 言語ごとに "editor.defaultFormatter": "拡張機能ID" を設定し、特定のフォーマッターを使用することを明示します。
    • このファイルをリポジトリで共有し、チームメンバー全員が同じ整形設定を使うようにします。
  4. フォーマッター固有の設定ファイル: フォーマッターがサポートしている場合は、プロジェクトルートにフォーマッター固有の設定ファイル（.prettierrc, pyproject.toml など）を作成し、より詳細な整形ルール（引用符、スペース、改行ルールなど）を定義します。これもリポジトリで共有します。
  5. （必要に応じて）ユーザー設定: 個人の好みやエディタの使い勝手に関する設定はユーザー設定に残しておきます。ただし、プロジェクト固有の設定はワークスペース設定で上書きされるように構成します。

このアプローチにより、以下のような利点が得られます。

  • 一貫性: プロジェクト内のすべてのコードが、定義されたルールに従って整形されます。
  • 自動化: 保存時に自動整形されるため、手動での整形作業が不要になり、整形忘れもなくなります。
  • チームワーク: チームメンバーは共通の設定を共有することで、スタイルに関する議論を減らし、コードレビューの効率を高めることができます。
  • 保守性: 整然としたコードは、将来のメンテナンスや機能追加を容易にします。

インデント自動整形は、VS Codeの生産性を最大限に引き出すための強力な機能です。この記事で解説した様々な設定方法やツールを理解し、自身の開発環境やチームのワークフローに組み込むことで、より快適で効率的なコーディングライフを実現してください。読みやすく、保守しやすいコードは、高品質なソフトウェア開発の礎となります。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール