「VSCode」の設定を使いこなして開発をより便利にしよう

開発用エディタのド定番「VSCode」を使いこなそう　第2回

「よく利用するもの」の設定

　以降は、「よく利用するもの」の設定項目です。かっこ内は、その項目の名前です。すべての項目には名前が付けられており、図1の設定画面の検索ボックスを使って、名前を使用して項目を検索することができます。

自動保存するか（Files: Auto Save）

　エディターで開いているファイルが変更されており、しかも保存されていない場合に、自動保存を行うかという設定です（このようなファイルには、タブのファイル名に白丸が表示されます）。自動保存を有効にしておくと、VSCodeが異常終了したといった場合に編集結果をロストするのをある程度防ぐことができます（完全ではありません）。選択肢は4つあります。

• off：自動保存しない（デフォルト）
• afterDelay：Auto Save Delayで指定される時間後（デフォルトは1秒）に自動保存する
• onFocusChange：エディターからフォーカスが外れたら自動保存する
• onWindowChange：ウインドウが切り替わったら自動保存する

　保存先は開いているファイル自身なので、自動保存された時点でファイルは更新されていきますから注意しましょう。

フォントサイズ（Editor: Font Size）

　エディターで使用するフォントのサイズです。単位はピクセルで、デフォルトは12ピクセルです。ディスプレイのサイズや解像度に合わせて自分自身が見やすいサイズに設定すればよいですが、たとえばZoomなどの電子会議システムでVSCodeの画面を共有する場合には、少なくとも20ピクセル以上にした方が相手が読めないということを防げます。

フォントファミリ（Editor: Font Family）

　エディターで使用するフォントのファミリーです。複数のフォントファミリを指定する場合は、カンマで区切って並べます。基本的に、最初に見つかったフォントが使用されます。デフォルトはプラットフォームによって以下のように異なります。双方とも最後はmonospaceとなっていますが、これはプラットフォームの提供する等幅フォントから適当に選択されます。日本語のフォントも指定できますが、基本的には欧文、数字のデザインの識別性が高いフォントを選ぶようにします。具体的には、数字の1、アルファベットのエル（l）とアイ（I）などがはっきりと識別できるものです。

• macOS：Menlo, Monaco, 'Courier New', monospace
• Windows：Consolas, 'Courier New', monospace

タブサイズ（Editor: Tab Size）

　タブ1文字に相当するスペースの文字数です。デフォルトは4ですが、別の設定（Editor: Detect Indentation）がオンになっている場合、ファイルの内容から自動判定される文字数で上書きされます。

空白文字の表示（Editor: Render Whitespace）

　エディターで空白文字をそれとわかるように（暗いドットで）表示するかの設定です。ここでいう空白文字とは、半角スペースです。

• none：一切表示しない
• boundary：単語間の1文字の空白文字以外を表示する
• selection：選択したテキストでのみ空白文字を表示する（デフォルト）
• trailing：行末以外の空白文字を表示する
• all：すべての空白文字を表示する

カーソルのスタイル（Editor: Cursor Style）

　カーソルのスタイルの設定です。以下から選択できます。

• line：縦線（デフォルト）
• block：ブロックカーソル
• underline：下線
• line-thin：細い縦線
• block-outline：枠だけのブロックカーソル
• underline-thin：細い下線

マルチカーソル使用のためのキー（Editor: Multi Cursor Modifier）

　マウスを使用して複数のカーソルを指定するときに使用するキーです。

• ctrlCmd：macOSの［Command］キー、Windowsの［Ctrl］キー
• alt：macOSの［Option］キー、Windowsの［Alt］キー

［NOTE］マルチカーソル

　マルチカーソルを使うと、複数箇所に一気に同じ文字列を入力したり選択できるなど、コーディングを効率化できます（図2）。マルチカーソルを設定するには、指定キーを押しながらマウスの左クリックを繰り返します。あるいは、指定キーと［Shift］キーを押しながらマウスをドラッグします。マウスを使いたくない場合には、指定キーと［Command］／［Ctrl］キーを押しながらカーソルキーを使用します。解除は［Esc］キーなどです。

図2：マルチカーソル

タブキーによるスペース挿入（Editor: Insert Spaces）

　タブキーを押したときにスペース文字として挿入するかどうかの指定です。デフォルトでは、タブキーを押すと「タブサイズ（Editor: Tab Size）」で指定する数のスペースが挿入されます。別の設定（Editor: Detect Indentation）がオンになっている場合、ファイルの内容からタブ文字を挿入すべきか、スペースを挿入すべきか、自動判定されます。

行の折り返し（Editor: Word Wrap）

　行の折り返し方法を指定します。

• off：行を折り返さない（デフォルト）
• on：行をビューポート（エディターの幅）で折り返す
• wordWrapColumn：「Editor: Word Wrap Column」で折り返す
• bounded：ビューポート（エディターの幅）か「Editor: Word Wrap Column」の小さい方で折り返す

除外するファイルとフォルダ（Files: Exclude）

　エクスプローラーなどで非表示とするファイルとフォルダの名前のパターンを指定します。デフォルトでは、**/.git、**/.svn、**/.hg、**/cvs、**/.DS_Store、**/Thumbs.dbが設定されています（バージョン管理システム関連か、OSの隠しファイル）。編集したり削除するには、マウスカーソルを乗せるとぞれぞれの右に現れる鉛筆アイコン、×アイコンをクリックします。追加したい場合には、［パターンを追加］をクリックします（図3）。

図3：除外するファイルとフォルダ

ファイルの関連付け（Files: Associations）

　ファイルの拡張子と言語の関連付けを指定します。デフォルトは空です（何の設定もありません）。拡張機能でプログラミング言語をインストールすると関連付けもインストールされますが、ここの設定はそれらを優先します。関連付けを追加するには、［項目の追加］をクリックします。

［NOTE］変更された項目

　設定を変更していると、どの項目をデフォルトから変更したのかわからなくなってくることがあります。次の［NOTE］にあるようにデフォルトに戻すという方法もありますが、ひとつひとつの項目に対して実行していては手間です。そういうときには、項目名の左を見ます。そこに青い縦線が表示されている項目は、デフォルトから変更されています（図4）。

図4：変更された項目の表示

［NOTE］その他の操作

　それぞれの項目名でクリックするか、あるいはマウスポインタを乗せると、左側に歯車アイコン（その他の操作...…）が現れます。クリックすると、［設定のリセット］［設定IDをコピー］［JSONとして設定をコピー］からなるメニューが表示されます（図5）。設定のリセットとは、文字通り設定をデフォルトに戻すことです。コピーの2つは、それぞれ「editor.fontSize」「"editor.fontSize": 14」のようにクリップボードにコピーされ、項目名や設定を引用する際に役立ちます。

　後述する設定の同期を有効にしている場合は、［この設定を同期する］もメニュー項目に加わります。デフォルトではチェックが入っていますが、チェックを外すことで項目を同期対象から外すこともできます。

図5：その他の操作