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

URL: https://webrandum.net/vscode-settings-minimap/
公開日: 2022-06-24
更新日: 2022-06-24
カテゴリー: 作業効率化
タグ: Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

Visual Studio Codeで当たり前のように備わっている機能が「ミニマップ」です。

ソース全体を見渡して、現状ファイルのどの辺りを表示してるのかぱっと見で判断できます。

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

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

## 環境設定の変更

Visual Studio Codeメニューバーの［Code］→［基本設定］→［設定（command + ,）］を選択して設定画面を開きます。

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

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

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

![「editor.minimap.show」の設定](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_1-17.png)

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

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

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

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

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

![「editor.minimap.side」の設定](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_2-16.png)