VS Codeでインデントを設定するには：Visual Studio Code TIPS

VS Codeでインデントに使用する文字、インデント幅を設定したり、プログラミング言語ごとの設定を記述したりする方法を説明する。

[かわさきしんじ，Insider.NET編集部]

連載「Visual Studio Code TIPS」

　インデントはプログラムコードの可読性を高める上で重要な要素だ。だが、その作法はプログラミング言語ごと、プロジェクトごとに異なることがある。Visual Studio Code（以下、VS Code）では、インデントに使う文字、インデント幅などを簡単に設定できる。本稿ではこれを見ていこう。

	操作あるいはsettings.jsonファイルでの設定項目
GUI／コマンドパレットでの基本操作	ステータスバーのインデント表示をクリックするか、コマンドパレットで「indent」などと入力して、［スペースによるインデント］コマンドまたは［タブによるインデント］コマンドを実行する
インデントに使う文字を切り替える	editor.insertSpaces（true：空白文字、false：タブ文字）
インデント幅を設定	editor.tabSize（デフォルト値は「4」）
開いたファイルからインデント設定を自動判別	editor.detectIndentation（デフォルト値は「true」で自動判別を行う。falseを指定すると自動判別を行わない）
プログラミング言語ごとにインデント設定を行う	settings.jsonファイルに"[<言語識別子>]"項目を用意して、そこに言語ごとの設定を記述していく
タブ文字／空白文字を変換する	コマンドパレットで「indent」などと入力して、［インデントをスペースに変換］コマンドまたは［インデントをタブに変換］コマンドを実行する
ドキュメントを一括でフォーマットする	コマンドパレットで「format」などと入力して、［ドキュメントのフォーマット］コマンドを実行する
VS Codeにおけるインデント関連の設定やフォーマット（コード整形）の方法

GUI／コマンドパレットでの基本操作

　VS Codeのステータスバー右側には、現在、アクティブになっているファイルのインデントに関する情報が表示される。

ステータスバーのインデント表示（赤枠内）

　この場合は、インデントには空白文字（スペース）が使われ、インデント幅が「4」になっていることが示されている。そして、この部分をクリックすると、インデント関連のコマンドが一覧表示される。

ステータスバーのインデント表示をクリックした際に表示されるコマンド一覧

　あるいは、［Ctrl］＋［Shift］＋［P］キー（macOSでは［Shift］＋［Command］＋［P］キー）を押して、コマンドパレットを開き、「indent」などと入力をしても同様なコマンド一覧が表示される（厳密には2つの操作で表示されるコマンドに差がある）。

コマンドパレットで「indent」と入力した際に表示されるコマンド一覧

　ここから［スペースによるインデント］コマンドまたは［タブによるインデント］コマンドを実行すると、次にインデント幅を指定する項目が表示される。

インデント幅の指定

　これにより、そのファイルでインデントに使用する文字と、インデント幅を指定できる。これらは以下で説明するsettings.jsonファイルでの指定よりも優先されて使用される。また、以下でも取り上げるが、settings.jsonファイルでeditor.detectIndentation項目をtrueにすることで（デフォルト）、そのファイルで使用されているインデント設定が自動判別される。

　一方、ユーザー設定やワークスペース設定で、インデント関連の設定を事前に指定しておくことも可能だ。以下では、これらの設定項目について見ていく。ユーザー設定／ワークスペース設定については「Visual Studio Codeの設定『虎の巻』：IDE編 」を参照のこと。設定を行うには［ファイル］メニュー（macOSでは［Code］メニュー）にある［基本設定］−［設定］項目を選択して、検索ボックスに適当なテキストを入力して、ヒットしたもので適切なものをユーザー設定／ワークスペース設定を保存するsettings.jsonファイルに記述していく。

　なお、settings.jsonファイルでの設定はeditor.detectIndentation項目がtrueになっている場合、開いたファイルに対して自動判別されたインデント設定で上書きされることには注意が必要だ（同様に、自動判別された場合を含むインデント設定は、上で見た手順で指定したインデント関連の設定で上書きされる）。

インデントに使う文字を切り替える：editor.insertSpaces項目