[VisualStudio Code] 言語によってインデント幅を変更する

昔からの習性でコーディングする際のインデントはタブ派なんですよ、スペースの数は4つ。 ところが…

  • GitHubでソース見るとタブがスペース8つ分になる
    • ブラウザのデフォルト動作
    • URLの最後に?ts=4とかつけると変更はできるが…
  • JavaScript界隈だとスペース2個が主流っぽい

という空気を感じてまして、長いものには巻かれろ精神で、ひとまずJSだけインデントをスペース2個に変更することにしました。

VSCodeでプログラム言語ごとの設定を行う

普段のコーディングは8割方、VSCodeで行っているのでこいつの設定を変更します。

設定画面を開く

公式ドキュメントの内容に沿って行います。VSCodeはしばらく前からJSONファイルを直接編集するのではなく、GUIの設定画面ができたのですが、これだと設定項目がないので旧来のJSONを編集する必要があります。

コマンドパレットを開きます。 WindowsならCtrl+Shift+P、macOSならShift+Command+Pです。コマンドパレットが開いたらPreferences: Configure Language Specific Settingsと入力し表示されたメニューを選択します。

編集したい言語を選択せよと求められるので、目的の言語を選びます。ここではJavaScriptを。

以下のような画面になります。 右下のあたりに選択した言語の設定エリアが見えますね。

エディターの設定

今回は以下の設定を記入しました。

"editor.detectIndentation": false,

"[javascript]": {
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

設定項目の意味は次の通り。この場所にその他のエディターの設定も同時に指定できます。

  • editor.tabSizeでタブがスペース何個分かを、
  • editor.insertSpacesでインデントをスペースに変換するかを設定しています。

最初に追加した項目は、各言語毎の設定よりも上の方に書いておきます。

  • editor.detectIndentationはファイルを最初に開いた際に「editor.tabSize」と「editor.insertSpaces」を自動的に設定する機能ですが、これが今回の設定と干渉してしまうため無効(false)にします。
editor.detectIndentationの説明を追記

参考ページ

code.visualstudio.com