Visual Studio Codeのインデント設定を完全解説！自動整形やスペース・タブの使い分けまで徹底紹介

Visual Studio Code（VSCode）は、世界中の開発者に愛されるコードエディタです。
その中でも「インデント設定」は、コードの見やすさや可読性に直結する重要な要素です。
本記事では、VSCodeでのインデント設定方法、スペースとタブの違い、自動整形の活用法、言語ごとの設定方法などを、初心者にもわかりやすく丁寧に解説します。
これを読めば、VSCodeで美しく統一されたコードを保つ方法がすべて理解できます。

VSCodeでのインデントとは

インデントとは、コードの行頭に空白（スペースまたはタブ）を入れて、構造をわかりやすくするための書き方です。
たとえば、PythonやJavaScriptでは、if文やfor文の中身をインデントすることで、どのブロックに属するかを明確にします。

VSCodeでは、インデントの設定を細かくカスタマイズでき、以下の点を自由に調整できます。

  • スペースかタブかを選択
  • インデント幅（何文字分の空白を使うか）
  • 自動整形時のルール
  • 言語ごとの個別設定

これらを理解して設定すれば、どんなプロジェクトでも統一された美しいコードが書けるようになります。

スペースとタブの違い

インデントを表す方法は主に「スペース」と「タブ」の2種類です。
それぞれにメリットとデメリットがあり、プロジェクトによって推奨される方式が異なります。

スペースの特徴：

  • 表示幅が一定で環境に依存しにくい
  • チーム開発では多くの場合こちらが推奨される
  • インデントの深さを微調整しやすい

タブの特徴：

  • ファイルサイズが小さくなる
  • 各自の環境で表示幅を自由に設定できる
  • ただし、異なる環境で見たときにズレることがある

多くのプロジェクトでは「スペース4つ」または「スペース2つ」が標準的です。
しかし、GoやMakefileなど、言語によってはタブが必須のものもあるため注意が必要です。

VSCodeでインデントを設定する方法

手動で設定する場合

  1. 右下のステータスバーを確認します。
    　そこに「Spaces: 4」や「Tab Size: 4」などと表示されています。
  2. クリックすると、インデント設定メニューが開きます。
  3. 「Convert Indentation to Spaces」または「Convert Indentation to Tabs」を選択して切り替えます。
  4. 「Indent Using Spaces」または「Indent Using Tabs」で、何文字分にするかを選びます。

この設定は現在開いているファイルのみに適用されます。

settings.jsonで設定する場合

より恒久的に設定したい場合は、VSCodeの設定ファイル（settings.json）を編集します。
Ctrl + ,（またはメニューの「ファイル」→「設定」→「設定」）を開き、右上の「{}」アイコンをクリックしてjsonモードにします。
以下のように設定しましょう。

{
  "editor.insertSpaces": true,
  "editor.tabSize": 4,
  "editor.detectIndentation": false
}
  • insertSpaces: スペースを使用するか（falseにするとタブ）
  • tabSize: インデント幅（スペース数またはタブ幅）
  • detectIndentation: 自動検出を無効にする（falseにすると手動設定が優先）

自動整形でインデントを統一する

VSCodeでは、ショートカット1つでインデントを自動的に整形できます。
次の方法を覚えておくと便利です。

Windows:
Shift + Alt + F

Mac:
Shift + Option + F

このショートカットを押すと、VSCodeがインデントや改行を自動で調整してくれます。
ただし、自動整形はファイルの種類によっては動作しない場合もあるため、以下のようなフォーマッター拡張機能を導入するのがおすすめです。

  • Prettier – Code formatter
  • ESLint
  • Beautify

特にPrettierは、JavaScriptやHTML、CSSなどで定番の整形ツールで、保存時に自動整形する設定も可能です。

保存時に自動でインデントを整える設定

毎回ショートカットを押さなくても、保存時に自動で整形できるように設定できます。
設定ファイルに以下を追加してください。

{
  "editor.formatOnSave": true
}

この設定をONにしておけば、Ctrl + Sで保存するたびに自動的にインデントやスペースが整えられます。
Prettierなどのフォーマッターと組み合わせると、常に美しいコードを保てます。

言語ごとにインデントを変える方法

VSCodeでは、プログラミング言語ごとに異なるインデント幅を設定できます。
たとえば、Pythonでは4スペース、JSONでは2スペースなどです。

設定例は次の通りです。

"[python]": {
  "editor.tabSize": 4,
  "editor.insertSpaces": true
},
"[json]": {
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

このように設定すれば、ファイルの拡張子に応じて自動で最適なインデントが適用されます。

インデントを可視化する

コードの構造をわかりやすくするために、インデントガイドラインを表示する方法もあります。

設定で以下を追加しましょう。

{
  "editor.renderIndentGuides": true,
  "editor.highlightActiveIndentGuide": true
}

これにより、インデントのレベルごとに縦線（ガイド）が表示され、ネスト構造がひと目でわかるようになります。

よくあるトラブルと対処法

自動でインデントがズレる

"editor.detectIndentation": trueのままだと、ファイルを開いたときに自動検出された設定で上書きされる場合があります。
この場合は、falseに変更して自分の設定を固定しましょう。

タブとスペースが混ざっている

プロジェクト内で両方が混在していると、表示がずれてしまいます。
「右クリック → コマンドパレット → Convert Indentation to Spaces（またはTabs）」で統一できます。

Prettierが効かない

設定ファイル .prettierrc の内容や、VSCode側のフォーマッター設定が競合している場合があります。
"editor.defaultFormatter": "esbenp.prettier-vscode" を追加して明示的に指定すると解決します。

まとめ

VSCodeのインデント設定は、開発効率やコード品質に直結する大切な要素です。
スペースかタブかを選び、プロジェクト全体で統一することで、誰が見ても読みやすいコードになります。

特に以下のポイントを押さえておきましょう。

  • スペースとタブの違いを理解する
  • settings.jsonで設定を固定する
  • 保存時自動整形を有効にする
  • 言語別設定で柔軟に対応する

VSCodeの設定を正しく行えば、インデントを気にする時間を減らし、より生産的に開発を進められます。

タイトルとURLをコピーしました