前提
動作チェック用のタブ文字↓
:tab
ディレクトリごとのvscodeの設定ファイル.vscode/settings.jsonにおいて、以下のようにプログラミング言語ごとの設定を書くことができます。
"[typescript]": {
"editor.tabSize": 4
}
同時にユーザーが自分自身の設定をsettings.jsonに持つこともできます。
"[typescript]": {
"editor.tabSize": 2
}
また、vscodeの設定ファイルでは、対象とする言語を複数設定することができます。
似た言語に対して似た設定をすることができて便利です。
"[javascript][typescript]": { // TS, JS両方に適用する設定
"editor.tabSize": 2
}
優先度
さてここで、次のように設定すると、どの設定がより優先されて反映されるでしょうか。
"[javascript][typescript]": {
"editor.tabSize": 2
},
"[typescript]": {
"editor.tabSize": 4
}
"[javascript][typescript]": {
"editor.tabSize": 6
},
"[typescript]": {
"editor.tabSize": 8
}
正解は以下です。
↑ 優先度 高
- 単独言語のローカル設定(tabSize: 4)
- 単独言語のユーザー設定(tabSize: 8)
- 複数言語のローカル設定(tabSize: 2)
- 複数言語のユーザー設定(tabSize: 6)
↓ 優先度 低
ポイントは、単独言語のユーザー設定が、複数言語のローカル設定を上書きしてしまうことです。
これはvscodeの仕様であり、今後変更の予定はないことが明言されています。
起こりうる問題
こういう仕様のため、以前自分用プロジェクトなどのため設定した単独言語の設定が、リポジトリの複数言語の設定を無効にしてしまう、という事象が起きえます。
"[javascript][typescript]": {
"editor.tabSize": 2 // <- 無視される
}
"[typescript]": {
"editor.tabSize": 8 // <- こちらが優先
}
タブサイズなら分かりやすいかもしれませんが、「使用するフォーマッタを変更してしまっていて、(リポジトリに置いてある)フォーマット設定がなぜか効かない」 みたいな面倒な問題になる可能性もあります。
例えば以下のように設定すると、ローカルのsettings.jsonに指定されているprettierが無視され、ファイルの手動フォーマット時にeslintが使用されます。当然差分が出まくるでしょう。
"[javascript][typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode", // <- 無視される
"editor.formatOnSave": true
}
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint" // <- こちらが優先
}
意図せず設定が無効にならないように気を付けましょう。