特集
» 2018年04月10日 05時00分 公開

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

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

VS Codeの画面構成

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

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

 簡単に説明しておくと、アクティビティーバーはサイドバーに表示する要素を選択したり、サイドバーの表示/非表示を切り替えたりするために使用する。サイドバーにはファイルを操作するための「エクスプローラー」やファイルから横断的に検索を行う「検索」など、何らかの処理を行うためのUI要素が表示される。これを「ビュー」と呼ぶ。エディタはプログラマーが作業を行うための主要な領域だ。

 なお、VS Codeではエディタを「エディタグループ」という論理的なグループにまとめることができる(エディタグループは最大3つまで作成可能)。各エディタグループにはファイルをタブ形式に表示できる。ステータスバーにはさまざまな情報が表示される。

 ウィンドウ右下のパネル部分にはPowerShell(Windows)、シェル(macOS/Linux)、デバッグ時のデバッグ情報、タスク実行時の出力など、さまざまなパネルを表示できる。なお、Windowsでは統合ターミナルで使用するシェルをPowerShell/コマンドプロンプト(cmd.exe)/WSL(Windows Subsystem for Linux)のBash/Git Bashから選択できるようになっている。

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

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

 VS Codeのウィンドウ左端にはアクティビティーバーがある。ここでその隣にあるサイドバーにどの「ビュー」を表示するかを選択する。例えば、アクティビティーバーで[エクスプローラー]アイコンをクリックすると、サイドバーには[エクスプローラー]ビューが表示されるといった具合だ。他には、検索を行う[検索]ビュー、Git関連の操作を行う[ソース管理]ビュー、デバッグ関連の情報が表示される[デバッグ]ビュー、拡張機能関連の操作を行う[拡張機能]ビューを切り替えて表示できる。

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

 アクティビティーバーの最下部にはVS Codeのアップデートがリリースされた際に、そのことを通知するアイコンも用意されている。また、既にインストールしている拡張機能が更新された場合も同様に、アクティビティーバーの[拡張機能]アイコンで通知が行われ(て、設定によっては自動的にアップデートが適用され)る。サイドバーの表示/非表示もアクティビティーバーで切り替えられる(例えば、[エクスプローラー]ビューがサイドバーに表示されている状態で、これに対応するアイコンをアクティビティーバーでクリックするとサイドバーが非表示になる)。

 [エクスプローラー]ビューではファイルやフォルダのオープン/クローズ、サブフォルダのブラウズを行える。また、VS Code 1.18以降では「複数のフォルダをルート」として[エクスプローラー]にファイルやフォルダを表示できる。これを「マルチルートワークスペース」と呼ぶ(後述)。これは、(VS Codeではなく)VSで1つのソリューションに複数のプロジェクトを格納して、ソリューションエクスプローラーに表示するのと似ている。

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

 VS Code 1.20以降では、[エクスプローラー]ビューで[Ctrl]キー(macOSでは[Command]キー)を押しながらファイルやフォルダをクリックするか、あるファイルを選択してから[Shift]キーを押しながら別のファイルをクリックすることで、複数のファイル/フォルダを選択できるようにもなっている。前者の方法では、個別のファイル/フォルダを複数選択でき、後者の方法では最初にクリックしたものから[Shift]キーを押しながらクリックした項目の間にあるものを選択できる。

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

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

エディタ

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

タブ表示されているエディタ(ファイル)とエディタグループ タブ表示されているエディタ(ファイル)とエディタグループ

 上の画像で薄い赤と薄い水色で表示されているのがエディタグループだ。上部にはタブ形式でエディタが表示されている。[エクスプローラー]ビューの[開いているエディター]欄にはエディタグループごとに現在開いているエディタが表示されることにも注意しよう。例えば、上の画面では[左]と[右]の2つのエディタグループが表示されている。

 エディタグループを分けて、エディタを表示するにはタブが表示されている領域の右端にある[エディターの分割]ボタンをクリックするか、[エクスプローラー]ビューで表示したいファイルを右クリックしてコンテキストメニューから[横に並べて開く]を選択する。なお、エディタグループは同時に3つまで画面に表示可能であり、3つのエディタグループを表示した場合には[左][中央][右]という名前になる。

 エディタグループは縦に積み重ねるように表示することもできる。レイアウトの切り替えには、[エクスプローラー]ビューで[開いているエディター]欄に表示される切り替えボタンをクリックするか、コマンドパレットで「editor group」などと入力して[表示:エディターグループの縦/横レイアウトを切り替える]を選択するか、[Shift]+[Alt]+[0]キー(macOSでは[Option]+[Command]+[0]キー)を押すかすればよい。縦に積み重ねたエディタグループの様子を以下に示す。エディタグループの名前が[上]と[下]に切り替わっている点にも注意しよう。

レイアウトを切り替えるボタン
縦に積み重ねたようにタブを表示したところ エディタグループのレイアウト切り替え
上はレイアウトを切り替えるボタン。下は、縦に積み重ねたようにタブを表示したところ。

 ファイルやタブをドラッグ&ドロップすることにより、[エクスプローラー]ビューから任意のエディタグループで開いたり、現在開いているファイルをエディタグループ間で移動したりできる(あるいは、Windowsエクスプローラーなどの外部プログラムからファイルをドロップもできる)。前述の通り、VS Code 1.20以降では[エクスプローラー]ビューで複数のファイルやフォルダを選択できる。複数選択したファイルはエディタにドラッグ&ドロップすることでまとめて開くことが可能だ。また、VS Code 1.21ではVS Codeのウィンドウ間でのファイルやタブのドラッグ&ドロップも可能になっている。

 エディタの右端には通常のスクロールバーとその脇に「ミニマップ」と呼ばれるUIが表示されている。これはファイルの内容のおおまかなイメージと、エディタに現在どの部分が表示されているかを示すものだ。大きなサイズのプログラムコードを編集しているときに、ファイルにおける現在のカーソル位置をイメージしたり、ミニマップをスクロールしてファイル内を移動するときに目当ての位置を把握しやすくなったりする。

ミニマップ ミニマップ

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

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

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

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

 単独のエディタとエディタグループの使い分けについては、ファイルの内容を並べて参照したいときにはエディタグループを使うことがまず挙げられる。後は、自分の作業内容に応じて、論理的にファイル(エディタ)をグルーピングしたいときには、特定のエディタグループにタブを開いていくといった使い方が考えられる(例えば、このグループにはHTMLファイルを、別のグループにはJavaScriptファイルを表示するなど)。

マルチルートワークスペース

 VS Codeの画面表示とは直接は関係ないが、先ほど少し触れた「マルチルートワークスペース」についても簡単に触れておこう。

 マルチルートワークスペースとは、「1つのウィンドウに複数のプロジェクト(プロジェクトフォルダ)をまとめて表示できる」機能のこと。特定のフォルダから木構造でプロジェクトが展開されているフォルダ構成であれば木構造の頂点(ルート)となるフォルダを開いてワークスペースとすればよいが、そうではなく個別のプロジェクトフォルダを論理的に1つの「ワークスペース」として管理するための機能だ。

 VS Codeに複数のフォルダをルートとして追加するには、[ファイル]メニューの[ワークスペースにフォルダーを追加]を選択するか、[エクスプローラー]ビューを右クリックしてコンテキストメニューから[ワークスペースにフォルダーを追加]を選択するか、Windowsエクスプローラーから直接フォルダを[エクスプローラー]ビューにドラッグ&ドロップする。コマンドラインから「code -add」に続けてワークスペースに追加するフォルダを複数指定してもよい。実際に複数のフォルダを追加したところを以下に示す。

マルチルートワークスペース マルチルートワークスペース

 マルチルートワークスペースからフォルダを削除するには、削除したいフォルダを[エクスプローラー]ビューで右クリックしてコンテキストメニューから[ワークスペースからフォルダーを削除]を選択すればよい。コマンドパレットで「workspace」などと入力して[ワークスペース:ワークスペースからフォルダーを削除]を選択し、削除対象のフォルダを指定してもよい。

 [エクスプローラー]ビューにフォルダを追加してマルチルートワークスペースにすると、[ファイル]メニューの[フォルダーを閉じる]が[ワークスペースを閉じる]に変わる。また、ワークスペースを閉じる際には、そのフォルダ構成を保存するかを問い合わせるダイアログが表示される。マルチルートワークスペースを恒常的に使用するのであれば、名前を指定して「.code-workspace」拡張子を持つファイルを保存しておこう。その後は、Windowsエクスプローラーでそのファイルをダブルクリックすれば、マルチルートワークスペースを読み込んでくれる。

 既存のプロジェクトを、現在開発中のプロジェクトで参照したい場合などには、マルチルートワークスペースは便利に使えるだろう。

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

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

RSSについて

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

メールマガジン登録

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