特集
» 2018年07月17日 05時00分 公開

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

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

ステータスバー

 ステータスバーの左側には、Git関連の情報、デバッグ実行時のエラーや警告などが表示される。右側には編集中のファイルにおけるカーソル位置、その文字コードと改行コードの種類、ファイルの種類、VS Codeについてのレスポンスを入力する画面を開くマークが表示される。ただし、インストールしている拡張機能などに応じて、ここにはそれ以外にも多くの情報が表示される。

ステータスバー ステータスバー

 上の例では、ステータスバーの左側にはGitのブランチインジケーター、エラー/警告の数(ここではエラーが1個、警告が0個)、VS CodeでC#コードに対するIntelliSenseを提供するためのOmniSharpサーバが起動していること、現在作業中のプロジェクト(vscode)といった情報が表示されている。右側には、現在のカーソル位置、インデントをタブで行うか空白文字で行うかとインデント幅、文字コード、行末コードの種別、プログラミング言語、フィードバック用アイコンが表示されている。

 エラーや警告があると、それは[エクスプローラー]ビューにも表示される。例えば、上の画面ではステータスバーでエラーが1つあることが示されているが、このときの[エクスプローラー]ビューは次のようになっている。

エラーがあることを伝える[エクスプローラー]ビュー エラーがあることを伝える[エクスプローラー]ビュー

 ファイル名が赤く表示され、その隣にはエラーの数が表示されるので、エラーを含んでいるファイルをすぐに把握でき、早期にこれを修正して普通の表示にしようという気にもなるはずだ。

 VS Codeのウィンドウにはこの他にも、必要に応じてさまざまな領域が表示される。以下ではそれらについて簡単に紹介しておこう。

クイックオープンとコマンドパレット

 キーボードで[Ctrl]+[P]キー(macOSでは[Command+[P]キー)を押すと、VS Codeの上部にクイックオープンウィンドウが表示される。ここからはファイルを開いたり、指定した番号の行に移動したり、エディタグループを切り替えたり、何らかのコマンドを実行したりすることが可能だ。キーボード主体でVS Codeを使いたければ覚えておこう。

クイックオープンウィンドウ クイックオープンウィンドウ

 この状態で開きたいファイルにカーソルを合わせて[Enter]キーを押すと、そのファイルが開かれる。さらに[→]キーを押すと、クイックオープンウィンドウが開いたまま、バックグラウンドでそのファイルが開かれる。複数のファイルをクイックオープンウィンドウからまとめて開くときには便利に使えるはずだ。

 一方、キーボードで[Ctrl]+[Shift]+[P]キー(macOSでは[Command]+{Shift]+[P]キー)を押すとVS Codeの上部に「コマンドパレット」が表示される(実際には上で紹介したクイックオープンウィンドウで「>」を入力してもよい)。実はVS Codeで実行できる各種コマンドには名前が付いていて、その名前をこのコマンドパレットに入力することでそれらを実行できるのだ。

 例えば、コマンドパレットで「find」と入力すると(プロンプトは「>find」となる)、そこから類推される各種のコマンドが表示される。そこで、カーソルキーを使ってハイライト表示されている項目を変更し、[Enter]キーを押せば、そのコマンドが実行される。

コマンドパレット コマンドパレット
「>find」とコマンドパレットに入力したところ。「find」にマッチする候補が表示されるので、実行したいものを選択する。

 コマンドパレットに入力していくと、それにマッチするコマンドが日本語と英語の両方で表示され、とても見やすくなっている。パレットに入力した文字とのマッチは両者に対して行われるので「>検索」と入力しても「>find」と入力してもよい(ただし、マッチするコマンドはその内容で異なる。興味のある方は実際に試してみよう)。

 クイックオープンウィンドウ/コマンドパレットは、そこに入力する最初の文字によって動作が変わる。上述した「>find」の場合は「>」がそうだ。先頭文字(いわば「手入力のプロンプト」のようなものだ)としては「>」ではなく、「!」「:」なども受け付けてくれる。これらを入力したときに、コマンドパレットがどのような動作をするかは「?」を入力するとヘルプを表示してくれるので参考にしてほしい。

 例えば、上記画面のコマンドパレットに「:」を入力し(このとき、コマンドパレットは移動先の行を受け付ける)、続けて「1」を入力するとファイルの先頭行が表示される。そのまま[Enter]キーを押せば、「行 1 へ移動」コマンドが確定され、カーソルも先頭行に移動する。タスク実行に使える「task」、サイドバーに表示するビューを選択する「view」など、記号以外も受け付けてくれるのでキーボード主体の操作をする人は覚えておくとよいだろう。

文字コード/行末コード/ファイルの種類を選択する

 ステータスバーの右下には、現在編集中のファイルの文字コードが表示される。ここをマウスでクリックすると、上記のコマンドパレットと同じ位置に「アクションの選択」と書かれたボックスが表示される。選択できるのは[エンコード付きで再度開く](Reopen with Encoding)と[エンコード付きで保存](Save with Encoding)だ。カーソルキーを使って、いずれかを選択するか、英字表記にマッチするように文字列を入力して[Enter]キーを押す(この場合は「r」とだけ入力すると[エンコード付きで再度開く]が選択状態になる)。どちらを選択した場合も続いて文字コードを指定するドロップダウンが表示されるので、文字コードを選択すると、指定した文字コードでのファイルの再オープンもしくはファイルの保存が行われる。例えば、シフトJISで保存されているファイルをUTF-8形式のファイルとしてオープンしてしまったとしよう。この場合は次のようにして、シフトJISのファイルとしてオープンできる。

文字コード部分(ここでは「UTF-8」)をクリックする
文字コード部分(ここでは「UTF-8」)をクリックする
[エンコード付きで再度開く]を選択するか、「r」「reopen」などと入力してから[Enter]キーを押す
[エンコード付きで再度開く]を選択するか、「r」「reopen」などと入力してから[Enter]キーを押す
設定したい文字コードを選択する(ここでは「japa」と入力して選択肢をシフトJISかEUCに限定している)
設定したい文字コードを選択する(ここでは「japa」と入力して選択肢をシフトJISかEUCに限定している)

文字コードの設定


 一番下の画像を見ると、「コンテンツから推測」とあり、ファイルの内容からある程度の文字コードの推測が可能になっていることが分かる。さらにVS Codeの設定でfiles.autoGuessEncodingをtrueにすることで、ファイルのオープン時に自動的に文字コード(エンコーディング)を推測してくれるようにもなる(VS Codeのカスタマイズについては後述)。

 なお、同様にして、右下にある行末コード表示をクリックすることで、これを設定したり、その右側のファイルの種類の表示(上記画面では「プレーンテキスト」)をクリックして、現在編集中のファイルの種類を指定したりすることも可能だ。

統合ターミナル

 最後に「統合ターミナル」パネルを紹介しておこう。[表示]メニューからこの項目を選択すると(もしくはWindowsでは[Ctrl]+[@]キー、macOS/Linuxでは[Ctrl]+[Shift]+[@]キーを押すと)、VS Codeの下部のパネルにターミナルウィンドウが開く。WindowsではPowerShellが、macOS/LinuxではターミナルがVS Codeに統合されていると考えてよい。カレントディレクトリはVS Codeで開いているディレクトリとなる。

[統合ターミナル]パネル [統合ターミナル]パネル

 上の図では統合ターミナルがパネルに表示されているが、[問題][出力][ターミナル]の各タブをクリックすることで、パネルに表示するものを切り替え可能だ([…]をクリックすると、表示されていないタブが一覧されるので、そこからパネルに表示するものを選択可能)。また、パネル上部の境界線をドラッグすることで、そのサイズを変更できるが、「今はターミナルでの作業に集中」といった場合には、上向きの矢印をクリックすることで簡単にパネルを最大化表示できるようになっている(最大化すると上向き矢印が下向き矢印にトグルするので、元のサイズに戻すにこれをクリックすればよい)。上向き矢印の隣にある[右に移動]ボタンをクリックすると、パネルがVS Codeウィンドウの右側にドッキングするようになる。

 [+]ボタンをクリックすると、新たなターミナルが作成される。作業対象のターミナルはドロップダウンから選択できる。ターミナルを複数作成して、ターミナルごとに作業を分けるといったときには便利に使えるはずだ。ごみ箱アイコンをクリックすると、現在表示されているターミナルが削除される。

 あるいは、統合ターミナルを分割することも可能だ。分割には上図の「ターミナルの追加/分割/削除」で示した四角形の中央にあるボタンをクリックする(エディタを分割するボタンと同じなので覚えやすいだろう)。

 Windows版のVS Codeでは統合ターミナルで使用するシェルをPowerShell/コマンドプロンプト/Bash on Ubuntu on WindowsのBash/Git Bashの中から選択可能だ。これにはコマンドパレットで「shell」と入力して「ターミナル: 既定のシェルの選択」(Terminal: Select Default Shell)を選択すればよい。すると、次のような表示に切り替わるので、お好みのものを選択しよう。

既定のシェルの選択 既定のシェルの選択

 統合ターミナルを使用することで、コマンドプロンプト/ターミナルとVS Codeとを切り替える回数が大きく減るはずだ。

 ここまで、VS Codeの画面構成の基本を見てきた。次に、VS Codeの基本的な操作方法について簡単に見ていこう。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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