以下、AI搭載エディタCursorでも同様の設定が可能です。
VSCodeの設定には2種類ある
Visual Studio Code（以下、VSCode）の設定にはユーザー設定とワークスペース設定の2つがある。
ユーザー設定はVSCode全体に反映される設定。
ワークスペース設定は個別のワークスペースごとの設定だ。
私は最近までワークスペース設定の存在を知らず、ユーザー設定を都度変更して利用していた。
しかし、以下のようにVSCodeの設定には3つの優先度というものがある。
これを有効活用することで、基本設定は維持しつつ、プロジェクトごとに設定を上書きして利用できる。
VSCode触り始めの方は、まずはこの仕組みを理解しておこう。
今後の開発でやりやすさが大きく変わってくる。
ユーザー設定
ユーザー設定はVSCodeのメニューから「ファイル」→「ユーザー設定」→「設定」と進み、右上のアイコンをクリックする。
すると、settings.jsonが開く。
ここにJSON形式で設定を記述していけばよい。
ここでまず設定したいのが、"workbench.settings.useSplitJSON": true,
ユーザー設定とワークスペース設定の切り替えタブ（画像拡大部分）が表示されるようになる。
さらに、マルチルートワークスペース設定がONになり、設定編集画面が2つに分割される。
左側に表示されているのが初期状態で適用されたデフォルトの設定だ。
これらを参考にしながら右側に自分の設定で上書きをしていこう。
例えば、私は以下のように設定している。
{
"workbench.settings.useSplitJSON": true,
"editor.formatOnSave": true,
"emmet.variables": {
"lang": "ja"
},
"window.zoomLevel": 0,
"editor.fontSize": 16,
"editor.tabSize": 4,
"editor.fontFamily": "HackGen",
"editor.detectIndentation": false,
"editor.insertSpaces": false,
"html.format.extraLiners": "",
"html.format.preserveNewLines": false,
"editor.renderWhitespace": "boundary",
"editor.minimap.showSlider": "always",
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace",
"files.eol": "\n"
}
言語、フォントサイズ、インデントなど、基本的なワークスペース（プロジェクト）に依存しない設定がおすすめだ。
ワークスペース設定
ここまでで、ワークスペースに.vscode/settings.jsonというファイルができているはずだ。
ない場合は、手動で.vscodeフォルダとsettings.jsonを作成しても問題ない。
settingsのsを忘れがちになるので注意しよう。
ちなみに、Cursorの場合でもディレクトリ名は変える必要はなく.vscodeのままで適応される。
ワークスペース設定はプロジェクトごとに異なる設定を使いたいときに有効だ。
私は個人開発なので拡張機能の設定に利用しているが、チーム開発となれば他メンバーの環境に合わせる必要性も出てくる。
そんな時、ワークスペース設定で上書きして優先度を「ユーザー設定 ＜ ワークスペース設定」にすることで対応ができる。
まとめると、
- ユーザー設定：ワークスペースに依存しない自分だけの基本設定
- ワークスペース設定：チーム開発のために設定を上書きしたり、プロジェクトごとに拡張機能を入れ替えたいときの設定
このような感じだろうか。
Gitを覚えたら.vscodeフォルダをリモートリポジトリで管理しよう。
そうすれば、万が一設定が消えてもいつでもその時の設定で開発ができるようになる。