Visual Studio Code 全体の見た目を変更
テーマを切り替える
既に、デフォルトでいくつかのテーマがあります。
以下は、リアルタイムにテーマを切り替え、画面を確認しながら選択できるので、わかりやすいのでおすすめです。
- コマンドパレットを表示( Ctrl + Shift + P (macOsの場合、Ctrl → Command) )
- コマンドパレットに "color" を入力し、配色テーマ(Color Theme) を選択
- 自分の好みに近いテーマを選択
カーソル上下でテーマがリアルタイムで切り替えられるので確認しながら選択します。
既にテーマが決まっているのであれば、
設定ファイル ( settings.json ) を直接変更することもできます。
- [ ファイル(File) → 基本設定(Preferences) → 設定(Settings) ] にて 設定ファイル( settings.json ) を開きます。
- テーマ名を変更し、保存します。
{
...
"workbench.colorTheme": "mine" ,
...
}
|
エクスプローラの開いているファイル一覧の表示ファイル数
サイドバーで表示されるファイル一覧のデフォルトが９つと少ないので、ここでは、最大 50 とします。
つまり、ディレクトリ表示よりも開いているファイル表示を優先的にサイドバーに表示することになります。
（この数は、あくまでスクロールせずに見えるファイル数です。開けるファイル数ではありません。）
設定ファイル ( settings.json ) を直接変更します。
- [ ファイル(File) → 基本設定(Preferences) → 設定(Settings) ] にて 設定ファイル( settings.json ) を開きます。
- ファイル一覧の表示ファイル数を変更し、保存します。
{
...
"explorer.openEditors.visible": 50,
...
}
|
日本語の対応
Visual Studio Code でいくつかの日本語の問題対応を行ってみる にて、詳しく解説していますので、そちらを参照してください。
ここでは、実際に設定した内容だけ、解説しておきます。
設定ファイル ( settings.json ) を直接変更します。
- [ ファイル(File) → 基本設定(Preferences) → 設定(Settings) ] にて 設定ファイル( settings.json ) を開きます。
- ファイル一覧の表示ファイル数を変更し、保存します。
{
...
// ファイル内の単語を入力候補としないようにします。
"editor.wordBasedSuggestions": false,
// 単語の区切り文字に全角記号、助詞、空白を追記します。
"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?、。「」（）；：・？＜＞＋－＊／｛｝｜～＆％＄＃”！’ にをはがのとも",
// ファイルの文字コードを自動認識するようにします。
"files.autoGuessEncoding": true,
...
}
|
エディタの見た目を変更
エディタの見た目を変更する際は、全て 設定ファイル ( settings.json ) を直接変更します。
設定ファイル ( settings.json ) は、保存するとすぐに画面が更新されるので、確認しながら設定すると良いと思います。
設定ファイル ( settings.json ) の変更手順は、ここでは割愛します。（上記を参照してください。）
エディタのフォントを切り替える
エディタのフォント、フォントサイズは自由に設定を変更することができます。
基本的に CSS の設定方法と同じです。
{
...
// 好きなフォントサイズ（ピクセル単位）を指定します。
"editor.fontSize": 12,
// 好きなフォントを優先順？で指定します。
// 日本語を表示する場合、日本語フォントがあれば、そちらを優先して使用してくれます。( CSSの font-family と同じ？だと思います。 )
"editor.fontFamily": "'Source Sans Pro','Meiryo', 'Consolas', 'Courier New', 'monospace'",
...
}
|
ミニマップの表示を切り替える
ミニマップは、エディタの右にファイル全体を表示する機能です。
この機能は、これから色んな機能が盛り込まれていくと思いますが、個人的には、ほとんど使わないし、邪魔なので非表示にします。
{
...
// ミニマップを非表示にします。
"editor.minimap.enabled": false,
...
}
|
制御文字列、半角空白の表示を切り替える
制御文字列（タブなど）、半角空白は、デフォルトで非表示となっています。
これを表示したい場合は、以下のような設定を行います。
{
...
// 半角空白を全て表示します。
// "all" : いつでも表示
// "none" : いつでも非表示
// "boundary" : 単語間の単一スペースのみ非表示、以外はすべて表示
"editor.renderWhitespace": "all",
// 制御文字列（タブなど）を表示する
"editor.renderControlCharacters": true,
...
}
|
また、制御文字列（タブなど）を含め半角空白の色は、同じ設定ファイル内で 以下のように指定することで切り替えることができます。
{
...
"workbench.colorCustomizations" : {
...
// 制御文字列（タブなど）を含め半角空白の色を明るい灰色( "#aaa" )に指定します。
"editorWhitespace.foreground": "#aaa",
...
},
...
}
|
インデントガイドの表示を切り替える
インデントガイド（上図の縦棒）は、デフォルトで表示となっています。
個人的にインデントのガイドは、要らないので、ここでは、非表示にしてみます。
{
...
// インデントのガイドを非表示します。
"editor.renderIndentGuides": false,
...
}
|
また、インデントガイドの色は、同じ設定ファイル内で 以下のように指定することで切り替えることができます。
{
...
"workbench.colorCustomizations" : {
...
// インデントガイドの色を明るい青色( "#aaf" )に指定します。
"editorIndentGuide.background" : "#aaf",
...
},
...
}
|
カーソール行の表示を切り替える
現在のカーソール行の強調表示は、デフォルトで "line" (エディタ内のカーソール行のみ) 強調表示となっています。
個人的にカーソール行は、行番号のみ表示してくれた方が好みなので、ここでは、そのように変更してみます。
{
...
// 現在のカーソル行の表示を行番号表示のみへ変更します。
// 'none' : 表示しない
// 'gutter' : 行番号エリアのみ表示
// 'line' : エディタ内のカーソール行のみ表示
// 'all' : 全てカーソール行で強調表示
"editor.renderLineHighlight": "gutter",
...
}
|
"gutter" を選択された場合、上図のように表示されるかと思います。
"all" を選択された場合、上図のように表示されるかと思います。
また、カーソール行の強調表示の色は、同じ設定ファイル内で 以下のように指定することで切り替えることができます。
{
...
"workbench.colorCustomizations" : {
...
// カーソール行の強調表示の色を明るい青色( "#08f" ) + 透過 6 に指定します。
"editor.lineHighlightBackground": "#08f6",
// カーソール行の強調表示のボーダー色を出力しないようにします。
// ここで、何か色を指定すると強調表示の枠が表示されます。
"editor.lineHighlightBorder": false,
...
},
...
}
|
選択範囲の角を丸みを切り替える
デフォルトでは、選択範囲が 丸みを帯びたように表示されます。
この機能は、非常に微妙な感じで、上図からも範囲が微妙に本来の範囲を超えて表示されるので、個人的に止めるようにしました。
{
...
// 選択範囲の角を丸みを通常通りの丸みを無くしたへ変更します。
"editor.roundedSelection": false,
...
}
|
更新すると上図のように見えるかを思います。
エディタの使い勝手を変更
エディタの使い勝手を変更する際は、全て 設定ファイル ( settings.json ) を直接変更します。
設定ファイル ( settings.json ) は、保存するとすぐに画面が更新されるので、確認しながら設定すると良いと思います。
設定ファイル ( settings.json ) の変更手順は、ここでは割愛します。（上記を参照してください。）
選択していない状態の行コピー機能を切り替える
カーソールで何も選択していない状態でコピーを行った場合のデフォルトの動作は、カレント行をまるまるコピーします。
この機能は、個人的に迷惑でしかないので止めるようにしてみます。
{
...
// 選択範囲を指定しないでコピーする場合に現在の行をコピーしないようにします。
"editor.emptySelectionClipboard": false,
...
}
|
括弧の自動挿入機能を切り替える
良くも悪くもデフォルト動作として "括弧開始" を入力すると"括弧閉じる"が自動的に挿入されます。
この機能は、個人的に迷惑でしかないので止めるようにしてみます。
{
...
// 左括弧を入力後に自動的に右括弧を挿入しないようにします。
"editor.autoClosingBrackets": false,
...
}
|
コピー＆ペーストで自動インデント機能を切り替える
良くも悪くもデフォルト動作として コピー＆ペーストを実行すると自動的にインデントしてくれます。
この機能は、個人的に迷惑でしかないので止めるようにしてみます。
{
...
// ユーザーが入力や貼り付け、行の移動をしたとき、エディターがインデントを自動的に調整しないようにします。
"editor.autoIndent": false,
...
}
|
タブ入力時の自動空白挿入機能を切り替える
タブを入力すると自動的にタブサイズ分の半角空白を挿入する機能で、デフォルトでは、タブサイズ4として半角空白を挿入します。
タブが嫌いなプログラマーも多いので よくある機能ですが、個人的には、ファイル種別に依存させたいというのが個人的な思いです。
例として、htmlファイルは、タブ入力時はそのままタブを挿入するように変更してみます。
{
...
// タブを入力した際、タブをそのまま入力するようにします。
"[html]":{
"editor.insertSpaces": false
}
...
}
|
全てのデフォルトの動作をタブをそのままタブで入力する場合は、
単純に"[html]":{ ... } の外に "editor.insertSpaces": false を設定すればOKです。
複数行選択時は範囲検索するように切り替える
複数行を選択している状態で、検索( Ctrl + F )する場合、自動的に "範囲内を検索" を行うようにしてみます。
デフォルトでは、無効になっていますので複数行を選択しても選択状態にかかわらず "全てを検索" となります。
{
...
// 複数行を選択した状態で検索すると範囲検索を行うようにします。
"editor.find.autoFindInSelection": true,
...
}
|
更新すると上図のように何も選択しない時は、ファイル全体を検索します。
複数行選択した状態だと、その選択範囲内を検索します。
ただし、連続して検索を行う(検索窓を開いたまま)場合は、前の検索条件が引き継がれますから、途中で複数行を選択しても選択範囲の検索とはならないことに注意してください。
Git初心者向けのステージを無視する機能を切り替える
Gitには、他の履歴管理と異なる "ファイル保存状態" と "コミット状態" の間に "ステージ状態" というのがあります。
これはざっくりとしたイメージで言うと、コミットを履歴管理の大きな基点とし、ステージを小さな基点という感じだと思います。
ステージ状態は、コミット待ち状態とも言え、Visual Studio Code でもコミットする対象を デフォルトの動作では、ステージ状態のファイルのみを対象としています。
もし、ステージという概念が理解できない方には、コミットした際に、うまくコミットできないなぁと思われることが あるかもしれません。
その際は、以下の設定を行っておくと、ステージングされていなくとも全てコミットします。
{
...
// ステージされた変更がない場合はすべての変更をコミットします。
"git.enableSmartCommit": true,
...
}
|
個人的には、Git があまり理解していなかったときは、上記の設定をして、デフォルトでなんでもコミットするようにしていました。
ただ、今では、ステージングを行って、時期をみて、コミットするようにしました。
コミットするタイミングは、一区切りついたときです。コミットのコメントも後で戻したいときも、その方が良いような気がします。
いかがだったでしょうか？
個人的にこれらの機能の好き好きがあって、無効化なども行ってみました。
皆さんも必要に応じてご参考程度に見られると良いか思います。
がおすすめ！！ 
コメントをどうぞ