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