特集
» 2017年08月23日 05時00分 公開

特集:Visual Studio Codeを使いこなそう!:Visual Studio Codeの設定「虎の巻」:IDE編 (1/3)

Visual Studio Codeは多くの部分をユーザーが自由に設定できる。その基本と、IDEを中心とした設定項目を取り上げる。Visual Studio Codeを自分色に染めてみよう!

[かわさきしんじ,Insider.NET編集部]
「特集:Visual Studio Codeを使いこなそう!」のインデックス

連載目次

 Visual Studio Code(以下、VS Code)ではさまざまな部分をユーザーが自由に設定できるようになっている。画面の配色テーマもそうだし、エディタの表示方法も細かく調整できる。今回はそのうち、IDEを中心にVS Codeの基本設定のカスタマイズについて見てみよう。ただし、個々の設定項目について話を進める前に、VS Codeの設定について簡単にまとめておこう。なお、本稿では64bit版のVS Code 1.15.1で動作を確認している(他の環境では異なる部分があるかもしれない)。

VS Codeの設定、基本の「キ」

 VS Codeの設定には「ユーザー設定」と「ワークスペース設定」の2つがある(加えて、キーバインドの設定もあるが、これについては本稿では取り上げない。また、配色テーマとアイコンテーマは設定ファイルに記述されるので、以降で取り上げる)。

 ユーザー設定はその名の通り、ユーザーごとのVS Codeの設定で以下のディレクトリに「settings.json」というファイル名で保存される。

  • Windows: %APPDATA%\Code\User
  • macOS: $HOME/Library/Application Support/Code/User
  • Linux: $HOME/.config/Code/User

 なお、Windowsの%APPDATA%環境変数の値は通常「C:\Users\<ユーザー名>\AppData\Roaming」となる。macOSのHOME環境変数の値は通常「/Users/<ユーザー名>」に、Linuxの場合は「/home/<ユーザー名>」が一般的だ。

 ワークスペース設定は個別のワークスペースやプロジェクトごとの設定を行うもので、ユーザー設定よりもこちらが優先される。ワークスペース設定は、VS Codeで開いたワークスペースの最上位ディレクトリ直下にある.vscodeディレクトリに「settings.json」というファイル名で保存される。

ユーザー設定とワークスペース設定 ユーザー設定とワークスペース設定

 ユーザー設定/ワークスペース設定を行うには、メニューバーの[ファイル]−[基本設定]−[設定](macOSでは[Code]−[基本設定]−[設定])を選択する。すると、以下に示すような[ユーザー設定]タブが表示される。

[ユーザー設定]タブ [ユーザー設定]タブ
ユーザー設定とワークスペース設定の切り替えはタブ右上にあるドロップダウンで行える(赤枠内)。表示されているのは筆者のユーザー設定である。

 ユーザー設定とワークスペース設定の切り替えはタブ右上にあるドロップダウンで行える。ドロップダウンで[ワークスペースの設定]を選択すると、タブの表示が[ワークスペースの設定]に変化する。どちらの設定を行っているかによって、[エクスプローラー]ビューでの表示も変わるので、自分がどちらの設定を行っているかをよく確認するようにしよう。

[ワークスペースの設定]タブ [ワークスペースの設定]タブ

 [ユーザー設定]タブ/[ワークスペースの設定]タブの左側には、設定可能な項目とそのデフォルト値が「よく使用するもの」「エディター」「ワークベンチ」などのカテゴリーごとに表示され、右側にはカスタマイズした内容が表示される。

 また、[設定の検索]ボックスにテキストを入力すれば、入力内容にマッチするものだけがフィルタリング表示されるので、設定したい項目に関連する内容を適当に入力してみよう。以下の画像を見れば分かる通り、英数字だけではなく、日本語を入力してもフィルタリングしてくれるのは便利といえる。

[設定の検索]ボックスに「フォント」と入力したところ [設定の検索]ボックスに「フォント」と入力したところ

 個々の項目の設定を行うには、左側で設定対象を選んでコピーして、右側にペーストし、手入力をしてもよいが、項目の左側に表示される[編集]アイコンをクリックすると表示されるコンテキストメニューを使う方が簡単だ。例えば、フォントサイズを変更しようとして、「editor.fontSize」項目の左にある[編集]アイコンをクリックすると次の画像のように[設定にコピー]というメニュー項目が表示される。

フォントサイズを変更するために[編集]アイコンをクリックしたところ(赤枠内) フォントサイズを変更するために[編集]アイコンをクリックしたところ(赤枠内)

 [設定にコピー]を選択すれば、右側にその内容がコピーされるので、後は自分でフォントサイズを書き込むだけだ。[編集]アイコンをクリックしたときに表示されるメニュー項目は項目による。また、右側のペーンでも[編集]アイコンをクリックして、既存の設定内容を変更できる場合もある。例えば、「editor.wordWrap」項目の[編集]アイコンをクリックすると、指定可能な値がポップアップ表示されるので、そこから設定したい値を選択すればよい。

指定可能な値が決まっている場合には、それらがポップアップ表示される(赤枠内) 指定可能な値が決まっている場合には、それらがポップアップ表示される(赤枠内)

 以上で、VS Code設定の基本についての説明は終わりだ。次に、実際の設定項目について見ていこう。なお、全ての設定項目を取り上げるのは到底無理なので、以下ではVS CodeのIDE部分の設定項目の中から、主なものをカテゴリー分けして取り上げる。

       1|2|3 次のページへ

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。