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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

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

- Sponsored Link -

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の説明を追記

参考ページ

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください