Visual Studio Code の設定で、言語ごとのインデントを設定する

2022年01月27日時点のWindows11での情報です。

この記事の目的

今年からReact（TypeScript）でのサービス開発になりました。
VSCodeでタイプスクリプト(ts)ファイル、コンポーネント(tsx)ファイルのインデントが、スペース4文字になっていたので、これを2文字に設定する手順です。

インデントは何文字が適切なのか

そもそもインデントは何文字にするのが適切なのか？

ソースコードの場合、インデントは「スペース4文字」にすることが多いです。
バックエンドのC#で開発するときは、インデントはスペース4文字に設定しています。

Angularの場合、コンポーネントファイルとソースコードファイルは完全に分離しているので、コンポーネント(Htmlファイル)はスペース2文字、ソースコード(tsファイル)はスペース4文字にしていました。

Reactの場合、コンポーネント(tsxファイル)にタグとソースコードの両方を書くので、
本当はタグ部分はスペース2文字、ソースコード部分はスペース4文字にしたいのですが、
それは無理なのでインデントはスペース2文字としました。

決めた理由は、タグ部分のインデントがスペース4文字では読みにくすぎるのと、EsLintでReactのインデントをスペース2文字としているからです。

vscodeで、言語ごとのインデントを設定する手順

vscodeを起動し「Ctrl + Shift + p」でコマンドパレットを開きます。
コマンドパレットで「Preferences: Configure … 」と入力し、選択肢に表示される
「基本設定：言語固有の設定を構成します…」を選択します。

言語を選択します。今回は「TypeScript」の設定をします。

setting.json ファイルが開くので、下記の設定を加えます。
tabSizeに字下げする文字数を指定します。
insertSpacesにtrueを指定すると、タブキーでスペースを挿入します。

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

同様に「typescriptreact」も設定します。

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

設定は以上です。

すでに作成した ts、tsxファイルのインデックスを修正する

vscodeで修正したいtsファイルまたはtsxファイルを開き、コマンドパレットから「Format Document」を選択します。

複数のフォマッターがインストールされている場合は、どのフォーマットを使用するかを選択します。

以上でファイルがフォーマットされます。