今回は、社内の技術者が提供してくれた 便利ネタを共有します。
VSCode は使いやすいエディタですが、無駄な領域が多くてエディタの領域が狭いと感じます。
今回は VSCode をカスタマイズして、エディタの領域をより広く確保してみましょう。
以下の画像を見比べてみてください。
上がデフォルトの状態です。下は今回の記事を適用した状態です。（記事と関係ない拡張機能が入っていますが）
ウィンドウサイズはどちらも同じです。
UI がスッキリして、エディタに表示されているコード量が増えていることがわかりますか？
では、カスタマイズのポイントをひとつずつ紹介していきます。
アクティビティバーを消し去る
画面左のアイコンが縦に並んだ領域をアクティビティバーと呼びます。
このアクティビティバー、横幅取り過ぎですよね。
Activitus Bar を使うと、邪魔なアクティビティバーを消し去ってくれます。
アクティビティバーにあったアイコンは、ステータスバーの左端に移動されるので、
エクスプローラーなどへのアクセスも問題ありません。
ブレークポイントの領域を消し去る
行番号が表示される領域の左側に、ブレークポイントの表示などに使用される領域（グリフマージン）があります。
デバッグ実行しない方にとっては、無駄な領域でしかありません。
これを消すには、VSCode の設定ファイル（settings.json）に次の行を追加します。
"editor.glyphMargin": false,
メニューバーを消し去る
ウィンドウ上部のメニューバーはコードを書いているときにアクセスすることはありません。
これも無駄な領域です。
これを消すには、VSCode の設定ファイル（settings.json）に次の行を追加します。
"window.menuBarVisibility": "toggle",メニューバーにアクセスしたいときは、Alt キーで表示できます。
ミニマップを消し去る
エディタ右上に表示されるミニマップ、何のためにあるのでしょうか。
どの行にエラーがあるかなどは、スクロールバーを見ればわかります。
ミニマップは不要です。
これを消すには、VSCode の設定ファイル（settings.json）に次の行を追加します。
"editor.minimap.enabled": false,
大きすぎる UI パーツを小さくする
VSCode のボタンやタブ、大きすぎますよね。
UI パーツを小さくして、エディタの領域を広くしましょう。
UI パーツの大きさを変更するには、VSCode の設定ファイル（settings.json）に次の行を追加します。
UI パーツを小さくするとエディタ内の文字まで小さくなってしまうので、同時にエディタのフォントサイズを大きめに変更します。
"window.zoomLevel": -0.75,"editor.fontSize": 24,"terminal.integrated.fontSize": 24,"debug.console.fontSize": 24, |
※文字が小さくなりすぎた場合でも次の設定をしておくと、「Ctrl + マウスホイール」で気軽に調整できます。
"editor.mouseWheelZoom": true,
文字の間隔を小さくする
文字の上下左右の間隔、もう少し狭くても読めますよね。
無駄な空白を消し去って、より多くのコードがエディタに表示できるようにしましょう。
文字の上下左右の間隔を変更するには、VSCode の設定ファイル（settings.json）に次の行を追加します。
"editor.letterSpacing": -0.3,"editor.lineHeight": 27,editor.lineHeight は editor.fontSize とあわせて、バランスしてください。
エクスプローラーから「OPEN EDITORS」を消し去る
エクスプローラーの「OPEN EDITORS（開いているエディター）」、邪魔じゃないですか？
どのファイルを開いているかはタブなどでわかります。
エクスプローラーのフィルタから非表示にしてもよいですが、この際なのでフィルタからも消し去ってしまいましょう。
OPEN EDITORS を消し去るには、VSCode の設定ファイル（settings.json）に次の行を追加します。
"explorer.openEditors.visible": 0,
いかがでしたか？
VSCode はデフォルトでも使いやすい優れたエディタですが、
カスタマイズすることでより使いやすくすることができます。