Visual Studio Codeの設定「虎の巻」：IDE編：特集：Visual Studio Codeを使いこなそう！（3/3 ページ）

エディタ関連の設定

　上で紹介したフォントやタブ文字関連の設定以外にも、エディタについては多くの設定が可能だ。そのうちの一部を以下に示す。

　単語の区切り文字を指定するeditor.wordSeparators項目は、例えば、［Ctrl］＋［→］キーなどで単語単位のカーソル移動をする際に単語を区切る文字となるものを指定する。

　ミニマップはエディタの垂直スクロールバーに、現在編集しているファイルの概要を表示するもの。その表示方法を細かく調整するのが、editor.minimapで始まる各種項目だ。

　editor.minimap.enabled項目をtrueにすると（デフォルト）、ミニマップが表示されるようになる。また、ミニマップ上に表示されるスライダー（下の画像ではグレーの四角形で表示されている領域）をグラブして移動すると、それに応じて、エディタの内容がスクロールするが、このスライダーの表示方法を指定するのが、editor.minimap.showSlider項目だ。これを"always"にするとスライダーが常時表示され、"mouseover"にするとマウスカーソルがミニマップ上にあるときにスライダーが表示されるようになる。editor.minimap.renderCharacters項目は、ミニマップに実際の文字を（小さく）表示するか、イメージをブロックとして表示するかを指定する。editor.minimap.maxColumnはミニマップの最大幅を指定する。例えば、以下はミニマップに文字ではなくブロックを表示するように指定（editor.minimap.renderCharacters項目をfalseに指定）したものだ。

ミニマップをブロックで表示（ミニマップ上にグレーで表示されているのがスライダー）

　なお、ミニマップの表示位置はeditor.minimap.side項目で制御できる。指定できるのは"right"（デフォルト）か"left"となっている。

　行の折り返し方法は、editor.wordWrap項目とeditor.wordWrapColumn項目を使って設定する。前者を"wordWrapColumn"に指定すると、editor.wordWrapColumn項目で指定した桁数で折り返しが行われるようになる。editor.wordWrap項目を"off"にすると折り返されなくなる。"on"にすると、エディタの右端で自動的に折り返される。"bounded"にすると、ウィンドウの右端もしくはeditor.wordWrapColumn項目で指定した値で折り返されるようになる。

　editor.formatOnType／editor.formatOnPaste項目をtrueにすると、コードの入力時やコピー＆ペースト時に自動的に書式設定を行える。例えば、editor.formatOnType項目の値をtrueにしてコードを入力した場合の例を以下に示す。

スペースなどを省略したり、余計に入れたりしながらコードを入力して、最後にセミコロンを入力してみると

▼

自動的に書式が設定される

コード入力時に自動的に書式設定を行っているところ

　なお、サイズの大きなファイルの保存時に書式の自動設定が完了しないと、書式設定がキャンセルされる。このタイムアウト値はデフォルトで750ミリ秒となっているが、editor.formatOnSaveTimeout項目でこの設定を上書きできる。

　editor.renderWhitespace項目は空白文字を表示する方法を指定する。"none"を指定すると、空白文字は空白文字のまま表示される。"all"を指定すると空白文字の部分に小さな点（・）が表示される。"boundary"を指定すると、単語と単語を区切る空白文字が1つだけのときには空白文字は空白文字のまま、それ以外の場合は点を使用して表示される。

　以下の画像は"boundary"を指定した場合のエディタの表示だ。インデントが付いた部分には薄く「・」が表示されているのに対して、メソッド名と「=>」の間などでは「・」が表示されていない。また、比較対象用にマウスカーソルの近くにある「Hello world」は単語間に空白文字を2文字入れているので「・」を使って表示が行われているが、その下の「Good bye」は単語間の空白文字が1文字なので空白文字のままの表示となっている点にも注意しよう（見やすくなるように、配色テーマを変更してみた）。

editor.renderWhitespaces項目を"boundary"に設定した場合

　VSユーザーにはおなじみの電球アイコン（ちょっとしたヒントを表示してくれる）をエディタに表示するか、editor.lightbulb.enabled項目で切り替えられる。falseにすると表示されなくなる。

　VS Codeではカーソルは通常、縦線として表示されるが、エディタ（やモード）によっては四角形だったりアンダーラインが使われることもあるだろう。VS Codeでカーソルの形状を変更するにはeditor.cursorStyle項目を利用する。設定可能な値には"block"／"block-outline"／"line"／"line-thin"／"underline"／"underline-thin"がある。また、edtior.cursorWidth項目でカーソルサイズを設定することも可能だ。

ワークベンチ関連の設定

　ワークベンチ関連の設定とは、VS Code全般についての設定といえる。そのうちの幾つかを以下に示す。

　エディタのラベルの表示方法とは、エディタのタブにファイル名をどのように表示するかを指定する。ファイル名だけを表示したり、相対パスを表示したりといった指定が可能だ。

　アクティビティーバー／サイドバー／ステータスバーの表示方法や、エディタにタブを表示するか、タブに［閉じる］ボタンを表示するかなどを制御できる。また、コマンドパレット関連の設定もここで行える（が、ここでは紹介しなかった。興味のある方はぜひ調べてみてほしい）。この他にも［エクスプローラー］ビューなどの設定も行えるが、本稿では割愛した。

　本稿では、VS CodeのIDE周りの設定を中心に、知っていると便利な設定項目を取り上げてきた。ここで取り上げたものが全てではなく、また、VS Codeを日々どのような形で使用しているかによっては「こっちの方が便利だし、知っておくべき！」という要素もあるはずだ。例えば、言語ごとの個別の設定や外部ターミナル、統合ターミナル、Git周りの設定など、VS Codeの使い勝手をよくしてくれる設定は他にもたくさんある。それらについては、別途、取り上げて紹介していこう。

「特集：Visual Studio Codeを使いこなそう！」