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

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

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年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね