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

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

» 2018年05月25日 05時00分公開

この記事は会員限定です。会員登録（無料）すると全てご覧いただけます。

　インデントはプログラムコードの可読性を高める上で重要な要素だ。だが、その作法はプログラミング言語ごと、プロジェクトごとに異なることがある。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項目

　VS Codeでインデントに空白文字を使うか、タブ文字を使うかはeditor.insertSpaces項目で指定する。指定できるのはtrueかfalseで、その意味は次のようになっている。

true：インデントに空白文字を使用する（デフォルト）
false：インデントにタブ文字を使用する

　例えば、以下は現在開いているワークスペース（フォルダ）でインデントに使用する文字をタブ文字に変更しているところだ。

インデントに使用する文字をタブ文字に変更

インデント幅を設定：editor.tabSize項目

　インデント幅は、editor.tabSize項目で指定する。デフォルト値は「4」となっている。指定できるのは整数値。以下は上と同様にして、現在開いているワークスペース（フォルダ）でインデント幅を「2」に設定しているところだ。

インデント幅を「2」に指定

開いたファイルからインデント設定を自動判別：editor.detectIndentation項目

　既存のファイルを開く際には、そこで使用されているインデント設定をVS Codeが自動判別してくれる（デフォルトの動作）。これを切り替えるには、editor.detectIndentation項目を設定する。指定可能な値はtrue／falseのいずれかである。

true：自動判別を行う（デフォルト）
false：自動判別を行わない

　以下は、ワークスペース設定で自動判別を行わないように設定しているところだ。

自動判別を行わないように設定

　この状態で、「dotnet new console」コマンドを実行して作成したC#のソースコードを開いて、コードを記述したのが、以下の画像だ。

崩れたインデント

　「dotnet new console」コマンドで作成されたソースコードはインデントに空白文字が使われ、そのインデント幅は「4」だったのが、自動判別されずに、上で指定した「インデントにはタブ文字を使用して、その幅は2」というのが有効になっているため、追加で記述したHelloメソッドのインデントが崩れていることが分かる。

　このように、既存のファイルを開く際には、そのファイルのインデント規則に従うのがよいので、基本的にはeditor.detectIndentation項目はtrueとしておくのがよいだろう。ただし、ドキュメントによると、VS Codeがチェックするインデント幅は2、4、6、8のいずれであるかだけだ。それ以外のインデント幅の場合には注意しよう。

プログラミング言語ごとにインデント設定を行う

　プログラミング言語ごとに、インデント設定を異なるものにすることも可能だ。これにはsettings.jsonファイルに言語ごとの設定を記述していく。これには「"[]"」の中に言語識別子を指定して、その項目として、各種の設定を記述していく。以下はC#コードに関してインデント設定を行っているところだ。

C#用のインデント設定を記述

　C#の言語識別子は「csharp」となっていることに注意。後は、これまでに見てきたのと同様な項目を記述していけばよい。

タブ文字／空白文字を変換する

　コマンドパレットにある［インデントをタブに変換］コマンドと［インデントをスペースに変換］コマンドを使うと、ファイル中のインデントをタブ文字あるいは空白文字に一括で置換できる。以下は、上で見たインデントが崩れた状態のソースコードに対して、これらのコマンドを実行しているところだ。

インデントをタブ文字／空白文字に変換

　ご覧の通り、コードの整形までは行ってくれないので、注意しよう。

ドキュメントを一括でフォーマットする

　ドキュメントのフォーマット（整形）を一括で行うには、コマンドパレットから［ドキュメントのフォーマット］コマンドを実行する。ショートカットキーも用意されている。

Windows：［Shift］＋［Alt］＋［F］キー
Linux：［Ctrl］＋［Shift］＋［I］キー
macOS：［Shift］＋［Option］＋［F］キー

　以下に例を示す。

コードの一括整形

　筆者が試したところでは、思った通りの挙動とはならないこともあったので、そうした場合は、各自の設定を見直したり、フォーマッタを別途インストールしたりしてみよう（例えば、C#用のフォーマッタとしては「C# FixFormat」があるので、これをインストールして、設定を多少変更する）。なお、コードの入力時やペースト時、ファイル保存時に自動的にコード整形を行うための設定項目もある。