VSCodeを使っていく上で、おすすめの設定を紹介していきます。
(他環境を持っていないので、Windows基準で紹介していきます)
設定の基本
設定ファイルの単位
設定ファイルにはユーザ設定のものとワークスペース設定のものがあります。
開くにはCtrl + Shift + PもしくはF1でコマンドパレットを開き
settingと入力し
Preferences: Open User Settings (ユーザ設定)
Preferences: Open Workspace Settings (ワークスペース設定)
を選択するか、ショートカットコマンドCtrl + ,で開きます。
開かれた設定タブ内でユーザー/ワークスペースの設定を切り替える事もできます。
ユーザ単位で設定した値とワークスペース単位で設定された値は
ワークスペース単位で設定された値が優先されます。
GUI設定とJSON設定
上記の方法で開かれた設定はGUIでの設定方法となりますが、
開かれた設定タブの右上のアイコンでjsonでの設定に切り替えることができます。
設定ファイルの保存場所
ユーザー設定：%APPDATA%\Code\User\settings.json
ワークスペース設定：ワークスペースルートディレクトリ.vscode\settings.json
(ワークスペース設定は上記方法で設定タブを開き、ワークスペースの設定値を一つでも変更したときか、jsonの設定を開いたときに自動作成されます。)
プロジェクト内での設定の共有
プロジェクト共通の設定値を共有したい場合は、ワークスペース単位の設定を行い、
.vscode\settings.jsonをリポジトリに登録するなりして共有することをおすすめします。
共有された設定以外でプロジェクトAの設定とプロジェクトBの設定を別な設定を行いたい場合は勝手にプロジェクトのリポジトリを更新しないように(認識を合わせてから更新するように)しましょう。
複数PC間での設定の共有
githubまたはMicrosoftアカウントを利用することで、
ユーザー単位の設定ファイルを共有することができます。
(設定ファイル以外にキーショートカット設定や拡張機能の共有もできます。)
詳細は以下の記事がわかりやすかったので、リンク記載しておきます。
設定
見た目の変更
タイトルバーの色を変更する
複数プロジェクト(リポジトリ)を触るような人で
どのワークスペースを触っているか迷子にならないようにするのにオススメ
※ワークスペース単位で設定推奨
設定値
{
"workbench.colorCustomizations": {
// 上部タイトルバーの設定
"titleBar.activeBackground": "#00aa00", // 背景色
"titleBar.inactiveBackground": "#009900", // 背景色(非活性時)
"titleBar.activeForeground": "#000000", // 文字色
"titleBar.inactiveForeground": "#505050", // 文字色(非活性時)
// 左側アクティビティバーの設定
"activityBar.background": "#00aa00", // 背景色
"activityBar.foreground": "#000000", // アイコン色(ホバー・アクティブ)
"activityBar.inactiveForeground": "#ffffff", // アイコン色
}
}
開いているファイルのタブの色を設定する
開いているファイルのタブの色を変更します。
テーマ設定によっては開いているタブの色が目立たなくてわかりにくいとき等にオススメ
{
"workbench.colorCustomizations": {
"tab.activeBackground": "#91cdff", // 開いているタブ背景色
"tab.unfocusedActiveBackground": "#c2e6ff", // 開いているタブ背景色(フォーカスされていない)
"tab.hoverBackground": "#aad9ff", // タブホバー時背景色
},
}
コーディング周りの設定
下記のように"[言語名]"の配下に書くことで言語別に設定ができます。
{
// ここの設定は言語に寄らない設定(全ファイル)
"[javascript]": {
// ここの設定はjavascriptだけを対象とした設定
},
}
※スコープの狭い方の設定が優先されます。
上記の書き方で言えば全ファイルに対する設定とjavascriptに対して同じ設定項目で別々の設定値を記述したとき、javascriptに書いた設定が優先されます。
↓言語名は途中まで打つとインテリセンスが表示されるので、それに従います。
(Java と java のように表記ゆれで設定が効かないので注意)
インデントの数を指定する
Tabキーを押したときのインデントの数を指定します。
※コードフォーマットを行う際の設定と同じ幅を指定することをおすすめします。
{
"[javascript]": {
"editor.detectIndentation": false, trueの場合ファイルに基いてインデント、タブを変更する
"editor.tabSize": 4, // インデントのスペース数
"editor.insertSpaces": true // インデントにスペースを使うかどうか
},
}
※editor.detectIndentationがtrueのときeditor.tabSizeとeditor.insertSpacesの設定は無視されてしまうので注意
保存時に行末尾の空白を削除する
保存時に行末尾にある空白を削除して保存します。
※半角空白のみ
{
"files.trimTrailingWhitespace": true, // 保存時に行末尾の空白削除
}
エクスプローラーから特定ファイルを除外して表示する
エクスプローラー(ファイルツリー)から非表示にする対象を設定します。
※全体検索の対象からも外れることになるので注意
(非表示になることで自分の触るファイルだけにすることができるのでうまく使う)
{
"files.exclude": {
"**/.git": true, // エクスプローラー(ファイルツリー)で非表示にする
},
}
検索対象から除外する
検索対象から除外するファイルを設定します。
ドキュメントやアウトプットファイルも同じワークスペースにあるときに、それは検索対象外にしたいとき等に設定しておくと便利。
上記files.excludeの設定をtrueにし、search.excludeをfalseに設定すると、
ファイルツリーには表示されないが、検索には引っかかるようになる
{
"search.exclude": {
"**/.git": true, // 検索の対象外とする
}
}
備考
まだまだ便利な設定はあるので、時間があるときに追記していこうと思います。