特集
» 2017年04月14日 05時00分 UPDATE

特集:Visual Studio Code早分かりガイド:Visual Studio Codeの使い方、基本の「キ」 (2/6)

[かわさきしんじ,Insider.NET編集部]

ウエルカムページ

 VS Codeを起動すると、以下のような[ようこそ]タブ(ウエルカムページ)が表示される場合がある(されていないときに表示をするにはメニューバーの[ヘルプ]−[ようこそ]を選択する)。ちなみに以下の画像はファイル/フォルダを何も開いていない状態だ。

ウエルカムページ ウエルカムページ

 これはVS Code 1.9で追加された機能であり、VS Codeが持つ各種機能へこのページから簡単にアクセスできるようになっている。例えば、左上の[開始]にはファイル/フォルダ/Gitリポジトリにあるファイル/フォルダを開いて編集を開始するためのリンクがあり、その下の[最近]には最近使用したフォルダが表示されている。[ヘルプ]にあるリンクをクリックすると、対応するVS CodeドキュメントやWebページがブラウザに表示される。右側の[クイック リンク]の下には次のようなリンクが並んでいる。

  • [インターフェイスの概要]: VS Codeのウィンドウ左端にあるアクティビティバーなどの名称や機能などがざっくりと紹介される
  • [配色テーマ]: VS Codeの画面のカラー設定を行うメニューがコマンドパレット(後述)に表示される
  • [キーボードショートカットをインストールします]: キーバインドを好みのエディタ(Vimなど)に変更するための拡張機能をインストールするようにサイドバー(後述)が表示される
  • [すべてのコマンドの検索と実行]: VS Codeの全機能にアクセス可能なコマンドパレットが表示される
  • [キーボード ショートカットの参考資料]: 標準構成のVS Codeにおけるキーボードショートカットの一覧表(PDFファイル)が表示される
  • [設定を構成する]: VS Codeの各種設定を行うタブが表示される
  • [対話型プレイグラウンド]: VS Codeの基本的な使い方を学習するタブが表示される(ただし、英語)

 今も述べたが、VS Codeはコマンドパレットを使うことでキーボードからだけで全ての機能にアクセスできる、いわば「キーボード指向」なエディタという特性を持つが、ウエルカムページを使うことで、マウスでも快適にこれらの機能にアクセスできるようになっている。

 次に、実際にVS Codeを利用している画面と、そのUI構成を見てみよう。

VS Codeの画面構成

 VS Codeで本稿を編集している様子を以下に示す(ファイルやフォルダをオープンする方法については後述する)。なお、以下の画像は筆者が日常的に使用している設定のウィンドウだ(画面のカラー設定、行末での折り返し、ファイル/フォルダの隣のアイコン表示など。ただし、統合ターミナルだけBash on Ubuntu on WindowsのBashにしてみた)。

VS Codeの画面構成 VS Codeの画面構成
左からアクティビティバー((1))、サイドバー((2))、エディタ((3))。画面最下部にはステータスバー((4))が表示されている。(5)はパネルといい、ここではVS Codeに統合されたターミナルとしてBash on Ubuntu on Windowsが提供するBashがパネルに表示されている。この他にもデバッグ用のパネル、タスク(定型処理を自動化したもの)用のパネルなど、多くの種類のパネルが用意されている。

 簡単に説明しておくと、(1)のアクティビティバーは(2)のサイドバーに表示する要素を選択したり、サイドバーの表示/非表示を切り替えたりするために使用する(なお、アクティビティバーは以前「ビューバー」と呼ばれていた)。(2)のサイドバーにはファイルを操作するための「エクスプローラー」やファイルから横断的に検索を行う「検索」など、何らかの処理を行うためのUI要素が表示される。(3)のエディタはプログラマーが作業を行うための主要な領域となる。なお、VS Codeではエディタを「エディタグループ」という論理的なグループにまとめることができる(エディタグループは最大3つまで作成可能)。各エディタグループにはファイルをタブ形式に表示できる。(4)のステータスバーにはさまざまな情報が表示される。(5)に示したウィンドウ右下の部分にはPowerShell(Windows)、シェル(macOS/Linux)、デバッグ時のデバッグ情報、タスク実行時の出力など、さまざまなパネルを表示できる。なお、Windowsでは統合ターミナルで使用するシェルをPowerShell/コマンドプロンプト(cmd.exe)/Bash on Ubuntu on WindowsのBash/Git Bashから選択できるようになっている。

 以下では、それぞれについて少し詳しく見ていこう。

アクティビティバーとサイドバー

 VS Codeのウィンドウ左端にはアクティビティバーがある(下の画面の(1))。ここでその隣にあるサイドバー(下の画面の(2))に表示されるものを選択する。多くの場面では[エクスプローラー]サイドバーを表示することになるだろう。他には、検索を行う[検索]サイドバー、Git関連の操作を行う[SOURCE CONTROL]サイドバー、デバッグ関連の情報が表示される[デバッグ]サイドバー、拡張機能関連の操作を行う[拡張機能]サイドバーを切り替えて表示可能だ。

アクティビティバーとサイドバー アクティビティバーとサイドバー
(1)がアクティビティバー。(2)がサイドバー。サイドバーにある青い「5」というバッジは「拡張機能の最新バージョンが5個あるので更新しよう」というお知らせだ。

 [エクスプローラー]サイドバーではファイルやフォルダのオープン/クローズ、サブフォルダのブラウズを行えるので、これだけで取りあえずのファイル操作が行えるようになっている。また、サイドバーの表示/非表示もアクティビティバーで切り替えられる(例えば、[エクスプローラー]がサイドバーに表示されている状態で、これに対応するアイコンをアクティビティバーでクリックするとサイドバーが非表示になる)。

 上記画面では[エクスプローラー]に[開いているエディター]と[VSCODE]という2つの項目が表示されている。[開いているエディター]にはユーザーが現在開いているエディタ(タブ)がエディタグループごとに表示される。これに対して、[VSCODE]という項目はVS Codeで現在オープンしているフォルダの「VSCode」を表していて、その下にはVSCodeフォルダあるフォルダ(.vscode/test)やファイル(.vscodeフォルダの下のsettings.jsonファイルやhogehoge.txt/vscode.txt/vsctest.cs/vsctest.jsの各ファイル)が表示されている。

 VS Codeでまだフォルダを開いていない場合には以下の画面のように[フォルダーを開く]ボタンがあるので、これをクリックするとフォルダをオープンするダイアログが表示される。

[フォルダーを開く]ボタン [フォルダーを開く]ボタン

エディタ

 前述の通り、VS Codeでは実際に編集を行うファイルやウエルカムページなどを表示した1つ1つのタブのことを「エディタ」と呼び、それらを論理的なグループにまとめたもののことを「エディタグループ」と呼ぶ。また、本家VSでもおなじみのプレビューエディタ機能もある。本稿ではエディタグループであることを強調したい場合には「エディタグループ」に、通常は単にエディタと表示することにする。以下に複数のエディタグループに表示されている複数のエディタを示す。

タブ表示されているエディタ(ファイル)とエディタグループ タブ表示されているエディタ(ファイル)とエディタグループ
(1)の薄い赤と(2)の薄い水色で表示されているのがエディタグループ。(3)(4)はそれらに表示されているエディタ(ファイル)。(5)を見ると、グループごとに開かれているエディタが表示されているのが分かる。

 上の画像で薄い赤と薄い水色で表示されているのがエディタグループだ((1)(2)の2つのエディタグループがある)。そして、(3)(4)で示すように、個々のエディタグループにはタブ形式で複数のエディタが表示されている。

 [エクスプローラー]の[開いているエディター]欄にはエディタグループごとに現在開いているエディタ(ファイル)が表示されることにも注意しよう。例えば、上の画面の(5)には[左]と[右]の2つのエディタグループが表示されている(以下に示すように3つのエディタグループを表示した場合には[左][中央][右]となる)。

 エディタグループは同時に3つまで画面に表示可能だ(以下の画面)。分割表示するには、エディタグループの右上にある[エディターの分割]ボタンをクリックするか、[エクスプローラー]で表示したいファイルを右クリックしてコンテキストメニューから[横に並べて開く]を選択する。

エディタグループを3つ表示したところ エディタグループを3つ表示したところ
ここではサイドバーの[エクスプローラー]を非表示にしている。上述した通り、サイドバーの表示/非表示の切り替えにはアクティビティバーのアイコンを使用する。

 ファイルやタブをドラッグ&ドロップすることにより、サイドバーの[エクスプローラー]から任意のエディタグループで開いたり、現在開いているファイルをエディタグループ間で移動したりできる(あるいは、Windows Explorerなどの外部プログラムからファイルをドロップもできる)。

 また、あるエディタグループの右上にある[…]ボタンをクリックしてコンテキストメニューから[開いているエディターを表示]を選択すると、そのグループで開かれているファイルが後述するコマンドパレットに表示される。

[開いているエディターを表示]を選択するとコマンドパレットにエディタが一覧表示される [開いているエディターを表示]を選択するとコマンドパレットにエディタが一覧表示される

 エディタグループは横に分割しても表示できる(これまでに見てきたのは「縦レイアウト」=縦に分割)。簡単にこれを行うには、[エクスプローラー]サイドバーの[開いているエディター]欄にある[エディター グループの縦レイアウト]ボタン/[エディター グループの横レイアウト]ボタンをクリックする(同一のボタンでトグル動作する)。

サイドバーの[エクスプローラー]にある切り替えボタン
エディタグループのレイアウトを切り替えているところ エディタグループのレイアウトを切り替える
上はサイドバーの[エクスプローラー]にある切り替えボタン。下はこのボタンをクリックしてレイアウトを切り替えているところ。

 最後にプレビューエディタ機能についても触れておこう。これは[エクスプローラー]サイドバーでシングルクリックしたファイルを「プレビューエディタ」に一時的に表示するという機能だ。

 あるファイルをプレビューエディタに表示しているときに、別のファイルを[エクスプローラー]サイドバーでシングルクリックすると、今度はそのファイルがプレビューエディタに表示される。[エクスプローラー]サイドバーでファイルを、あるいはプレビューエディタのタブをダブルクリックすると、それが通常のエディタに表示される。プレビューエディタのタブにはイタリック体でファイル名が、通常のエディタのタブには通常書体でファイル名が表示される。[エクスプローラー]でファイルをクリックしたときの挙動に違和感を覚えたら、タブに表示されているファイル名の書体を確認して、ファイルがどちらのエディタに表示されているかを確認してみよう。

通常のエディタとプレビューエディタ 通常のエディタとプレビューエディタ
[vscode.txt]タブは通常のエディタ(通常書体)。[hogehoge.txt]タブはプレビューエディタ(イタリック体)。[エクスプローラー]サイドバーでの表示も同様なことに注意。

 幾つものファイルの内容を連続して確認したいときにはプレビューエディタを使うと、タブを幾つも開いて後でそれを閉じないで済む。逆に「このファイルはエディタで常に開いておきたい」というときには、それをダブルクリックすることで、一時的に確認するファイルとは独立して、通常のエディタに表示しておける。

 タブとエディタグループの使い分けについては、ファイルの内容を並べて参照したいときにはエディタグループを使うことがまず挙げられる。後は、自分の作業内容に応じて、論理的にファイル(エディタ)をグルーピングしたいときには、特定のエディタグループにタブを開いていくといった使い方が考えられる(例えば、このグループにはHTMLファイルを、別のグループにはJavaScriptファイルを表示するなど)。なお、タブ表示は無効化することもでき(VS Codeの設定でworkbench.editor.showTabsをfalseにする)、そのようにした場合にはエディタグループに表示されるファイルは1つだけとなる。

 VS Code 1.10から「ミニマップ」機能がプレビューとして利用できるようになっている。ミニマップとはスクロールバーにファイル全体の内容をおおまかに表示するというものだ。

ミニマップを有効にした場合(赤枠内) ミニマップを有効にした場合(赤枠内)

 現在、これを有効にするにはVS Codeの設定でeditor.minimap.enabledをtrueにする必要がある(VSの設定変更については後述)。興味のある方は試してみよう。

 次に、ステータスバーやコマンドパレット、その他、知っておくと便利なウィンドウを幾つか紹介しよう。

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

@IT Special

- PR -

TechTargetジャパン

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

Focus

- PR -

RSSについて

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

メールマガジン登録

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