デフォルトのVSCodeの設定だと、アイコンなどの無駄な領域が多く、エディター部分の領域が狭いと感じます。この記事では、VSCodeをカスタマイズして見た目をすっきりさせ、コードに集中できる環境の作り方を解説します。
この記事でわかること
- VSCodeのカスタマイズ方法
- 私のVSCodeの設定の紹介
はじめに
VSCodeは、多くのプログラマーや開発者に使用されているエディターです。エディターはプログラマーにとって1日の中で最も多く使っているツールでしょう。エディターの見た目を自分好みにカスタマイズすることで、コードに集中できる環境を作ることができるでしょう。
そこでこの記事では、VSCodeの見た目をシンプルにカスタマイズする方法を私のVSCodeの設定を元に解説します！VSCodeの見た目は下記画像の通りとなります。
VSCodeのカスタマイズ方法
VSCodeでは、settings.jsonに設定を書き込むことで、例えば以下のように自分好みにカスタマイズすることができます。
- フォントやサイズ、行間などのフォント関連の設定
- サイドバーの表示・非表示の設定
- アイコン類の設定
settings.jsonの開き方
settings.jsonの開き方はいろいろありますが、ここではVSCodeのコマンドパレットから開く方法を紹介します。
- Command + Shift + Pを押してコマンドパレットを開きます。
- コマンドパレットに
settingsと入力して、「基本設定：ユーザー設定を開く（JSON）」を選択します。
それでは、私のVSCodeの設定を例に、カスタマイズの方法を紹介していきます！
カスタマイズの例
ここでは、私のVSCodeの設定を例に、紹介していきますので参考にしてみてください。
配色テーマ
VSCodeのテーマはたくさんありますが、有名なものは使ってみてどれもしっくりこなかったのですが、この「Night Shift」は配色が美しくコードも見やすいので気に入ってます。
ファイルアイコンテーマ
ファイルアイコンはしっくりくるものがなく、妥協して「vscode-seedling-icon-theme-plus」を使っています。なるべく、インデントがなく、アイコンが小さいのが好みです。なので、インデントも最小の「4」を選択しています。
"workbench.iconTheme": "vscode-seedling-icon-theme-plus",
"workbench.tree.indent": 4
フォント関連の設定
フォント
エディターのフォントには「Fira Code」を使用しています。このフォントはリガチャにも対応しているので、コードを書くときにとても見やすいです。
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true // リガチャを有効にする
フォントサイズと行間、文字間
フォントサイズや行間などが小さく狭いとエディターで見える範囲が広くなります。自分はこの環境が好きなので、なるべく小さくしてます。参考までにsettings.jsonには以下のように設定しています。
"editor.fontSize": 13, // フォントサイズ
"editor.lineHeight": 1.3, // 行間
"editor.letterSpacing": -0.8, // 文字間
必要ない領域の非表示
アクティビティバーの移動
デフォルトだと画面の左側にアイコンが並んでいる領域をアクティビティバーと呼びます。アイコンなどが大きくて邪魔だと感じるので上側に移動させましょう。もっとも、マウスでクリックして移動するのも面倒なので基本的にはショートカットで切り替えられるようにしておきましょう。
"workbench.activityBar.location": "top"
ミニマップの非表示
エディターの右側にあるミニマップは特に見ることもないので非表示にしましょう。
"editor.minimap.enabled": false
ブレークポイントの領域の削除
行番号が表示される左側に、ブレークポイント用に使用される領域があります。しかし、デバックを実行しない限り、この領域は邪魔になるので非表示にしておきましょう。
"editor.glyphMargin": false
まとめ
ミニマルで使えるVSCodeのカスタマイズ方法を自分の環境を元に紹介しました！
みなさんもぜひ自分好みのVSCodeの環境を作ってみてください！