WebDesigner's Memorandumウェブデザイナーの備忘録

Visual Studio Codeでミニマップ関連を見やすくするカスタマイズ方法

Visual Studio Codeで当たり前のように備わっている機能が「ミニマップ」です。
ソース全体を見渡して、現状ファイルのどの辺りを表示してるのかぱっと見で判断できます。

また、ミニマップ上をドラッグすると画面スクロールもできるので、一気に移動して見て回りたいときにも便利です。

今回はそんなミニマップをさらに使いやすく・見やすくするためのカスタマイズ方法をまとめておきます。

環境設定の変更

Visual Studio Codeメニューバーの[Code]→[基本設定]→[設定(command + ,)]を選択して設定画面を開きます。

現在表示している領域を常にアクティブにする

ミニマップにマウスオーバーすると、現在表示している領域が少しグレーになって「この部分をいま表示している」と分かりやすくなります。

ただ、これはマウスオーバーしなくても常に確認できた方が便利なので、「editor.minimap.show」の設定を「always」に変更して常に表示されるようにします。

「editor.minimap.show」の設定

ミニマップを左に表示させる

これは好みが分かれる部分だと思いますが、デフォルトではミニマップはウインドウ右端に表示されています。

ただ、ソースコードは基本的に左側に文字量が偏りがちなので、右端のミニマップを見ようとすると視線の移動が多くなります。

左側に表示しておけば視線の移動は少なくて済みますし、画面スクロールをしたいときもマウスが左側に近かったらミニマップを利用して、右側に近かったらスクロールバーを使うといった使い分けができます。

設定方法は「editor.minimap.side」の設定を「left」に変更するだけです。

「editor.minimap.side」の設定

著者について

プロフィール画像

@31mskz10

1997年生まれ。2016年から専門学校でデザインを学び、卒業後は神戸の制作会社でWeb制作に従事しています。Webrandumは2016年から運営し、ウェブデザイン、フロントエンド開発、WordPress、CSS、JavaScript、制作環境の効率化を中心に、実際に試した内容を執筆しています。

Twitterをフォロー Facebookでいいね