VSCode: Tabキーでのインデントの入力内容を設定・確認する

Visual Studio Codeでインデント(字下げ)するためにTabキーを押したときに、 入力される内容を設定(確認)する方法を紹介します。

インデントの内容は大体次の3つのうちのどれかだと思います。

  • 半角スペース4つ
  • 半角スペース2つ
  • Tab文字

VScodeの設定画面で インデントの内容に関係ある設定箇所は3つあります。

設定項目概要
Editor: Detect Indentationインデントを自動検知
Editor: Insert Spacesスペースを挿入する
Editor: Tab SizeTabに相当するスペースの数

では順番に見ていきます。VScodeの設定画面を表示します。

■ 「ファイル」メニュー → 「ユーザー設定」 → 「設定」
又は
■ 左下にある歯車の形をした管理ボタン → 「設定」

「Detect Indentation」

設定画面の上部にある検索ボックスに「Detect Indentation」と入力して 該当項目を表示してください(小文字でも大丈夫です)。

設定画面で検索

下図のように「Detect Indentation」の項目が表示されます。 英単語「detect」は検知の意味です。

detect indentation

ここでは既存のファイルを開いたときに、 そのファイルのインデント内容を自動検知して、 引き継ぐかどうかを設定します。
自動検知する場合はチェック、 しない場合はチェックを外してください。

インデントの入力内容は、この「Detect Indentation」の設定が 優先されるので、まずはここを設定します (私はチェックを入れています)。

Insert Spaces(スペースかTab文字か)

次に検索ボックスに「Insert Spaces」と入力すると、 「Insert Spaces」の項目が表示されます(下図)。

スペースかTab文字か

この項目にチェックを入れると、Tabキーを押したときに半角スペースを挿入します。 チェックを入れない場合はTab文字が挿入されます。

記述されているように、 「Detect Indentation」がオンの場合はファイルのインデント内容が優先されます。 「Detect Indentation」は先程設定した項目の事です。

Tab Size(スペースの数)

次に検索ボックスに「Tab Size」と入力すると、 「Tab Size」の項目が表示されます(下図)。

スペースの数

ここでスペースの数を設定します。
先程の「Insert Spaces」にチェックを入れた場合は 半角スペースが入るので、 ここの設定値が「2」なら半角スペースが2個、「4」なら4個です。

「Insert Spaces」にチェックを入れていない場合は Tab文字が入りますが、 見た目上のTab文字のインデント幅を設定します。 4と入力した場合、半角スペース4つ分と同じ幅だけインデントします (入力内容はあくまでTab文字です)。

この項目も「Detect Indentation」 がオンの場合はファイルのインデント内容が優先されます。

このように、「Detect Indentation」、「Insert Spaces」、「Tab Size」 の順番で設定していくとスムーズに進みます。

VS Code