特集
» 2016年12月16日 05時00分 UPDATE

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

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

VS Code操作ガイド

 ここからはVS Codeを使っていく上で覚えておくべき(であろう)基本操作をまとめていく。キーボードショートカットの設定で変更可能な項目については、どの項目を設定すればよいかも記載していこう。

VS Codeの起動と終了

 VS Codeの起動方法については上でも述べた。GUIからもターミナルやコマンドプロンプトなどのCUIからでも起動が可能だ。CUIから起動する場合には、引数としてファイル名またはフォルダー名を指定できる。その場合は指定したファイルまたはフォルダーがオープンされた状態でVS Codeが起動する。引数に複数のファイル/フォルダーを指定することも可能だ。

 VS Codeの終了方法は他のアプリと同様だ。Windows/Linux版ではコマンドパレットから「Close Window」コマンドを実行し(キーボードショートカットは[Ctrl]+[Shift]+[W]キーまたは[Ctrl]+[W]キー。Macでウィンドウを閉じるキーボードショートカットは[Shift]+[Command]+[W]キーまたは[Command]+[W]キー。[Ctrl]+[W]キー/[Command]+[W]キーはエディターがオープンしていない場合に有効)、最後のウィンドウが閉じられた時点でVS Codeが終了する(Macでは[Command]+[Q]キーを押す必要がある)。

 これを表にまとめると次のようになる。なお、以降の表ではWindowsは「Win」と表記し、キーストローク最後の「キー」という表記は省略する。「"command"指定」というのはキーボードショートカットをカスタマイズする際に指定するコマンドのことだ(後述するが、キーボード設定では、このコマンドとキーストロークを対応させるような記述を行っていく)。コマンドパレットには英語表記のコマンド名を示す。

操作 コマンドパレット Win/Linux Mac "command"指定
ウィンドウを閉じる Close Window [Ctrl]+[Shift]+[W]/[Ctrl]+[W] [Shift]+[Command]+[W]/[Command]+[W] "workbench.action.closeWindow"
ウィンドウを閉じるコマンド

ファイル/フォルダーのオープン/クローズ

 VS Code内でファイル/フォルダーをオープン/クローズするためのコマンド類を以下にまとめる。「Files:」などのプレフィクスを入力せずに、いきなり「close」などと入力すれば、コマンドパレットには適切な候補が表示される点は覚えておこう。キーストロークの節約になる。「ファイル関係のコマンドに何があったかな?」というときに「File」などと入力してみるとよい。

 なお、以降の表の「[Ctrl]+[K]→[Ctrl]+[W]」などの操作は[Ctrl]キーを押ながら[K]キーと[W]キーを押下することを意味する。一方、「[Ctrl]+[K]→[W]」などの操作は[Ctrl]キーと[K]キーを同時に押し、[W]キーの押下は単独で行うことを意味している。

操作 コマンドパレット Win/Linux Mac "command"指定
ファイルのオープン Files: Open File(Win/Linux)/Files: Open(Mac) [Ctrl]+[O] [Command]+[O] "workbench.action.files.openFile"(Win/Linux)/workbench.action.files.openFileFolder(Mac)
エディターのクローズ View: Close Editor [Ctrl]+[W] [Command]+[W] "workbench.files.action.closeActiveEditor"
エディターグループ内の全てのファイルをクローズ View: Close Editors in Group [Ctrl]+[K]→[W] [Command]+[K]→[W] "workbench.action.closeEditorsInGroup"
全てのファイルのクローズ View: Close All Editors [Ctrl]+[K]→[Ctrl]+[W] [Command]+[K]→[Command]+[W] "workbench.files.action.closeAllEditors"
フォルダーのオープン Files: Open Folder [Ctrl]+[K]→[Ctrl]+[O] [Command]+[O] "workbench.action.files.openFolder"(Win/Linux)/workbench.action.files.openFileFolder(Mac)
フォルダーのクローズ File: Close Folder [Ctrl]+[K]→[F] [Command]+[K]→[F] "workbench.action.closeFolder"
ファイル/フォルダー関連の操作
少々分かりにくいかもしれないが、上の表の「[Ctrl]+[K]→[Ctrl]+[W]」などの操作は[Ctrl]キーを押しっぱなしで[K]キーと[W]キーを押下することを意味する。一方、「[Ctrl]+[K]→[W]」などの操作は[Ctrl]キーと[K]キーを同時にを押し、[W]キーの押下は単独で行うことを意味している。

 Macの場合、Windows/Linuxとは異なり、ファイルとフォルダーのオープンがコマンドパレットでは「Files: Open」にまとめられていて、[Command]+[O]がそのショートカットになっている。

 「フォルダーのクローズ」だけはコマンドパレットの英語コマンドのプレフィクスが「Files:」ではなく「File:」になっていることにも注意しておこう。

 また、サイドバーの[エクスプローラー]でもマウスなどを使ってファイル/フォルダーのオープン/クローズ/新規作成/保存などが行える。特にエディターグループを複数開いている場合には、グループごとにファイルを一括して保存できる。

エディターグループに表示された一括保存ボタン エディターグループに表示された一括保存ボタン
[開いているエディター]の隣にあるのはエディターグループを超えて、全体のファイルの保存/クローズを行うボタン。[左]エディターグループにマウスカーソルを合わせると、そのグループで開かれているファイルを全て保存するためのボタン(赤枠内)が表示される。

 余談だが、VS Codeでは何らかの時点でファイルの内容を保存してくれるオートセーブ機能が実装されている。これを有効にするには[ファイル]メニューから[自動保存]を選択する。また、VS Code 1.8では「Hot Exit」と呼ばれる機能が追加された。これはVS Codeが未保存の変更内容を覚えておいてくれるというもので、次回のVS Code起動時に未保存の変更点が反映された状態でファイルが開かれる(ファイルの状態も未保存のままとなる)。

カーソル移動

 カーソル移動はWindows/LinuxとMacで大きく異なっている。筆者の環境ではMacでは[Ctrl]+[P]/[N]/[F]/[B]の各キーでカーソルが上下左右に移動する(皆さんの環境でもそうですよね?)。これに対して、Windows/Linuxではカーソルの上下左右はカーソルキーを使うようになっている(デフォルトの状態)。以下に主なカーソル移動キーを示す。なお、カーソル移動についてはコマンドパレットにエディターコマンドは用意されていないようだ。

 表に示した"command"指定を使ってキーボードショートカットをカスタマイズすると、簡易的なEmacsバインドに設定できる(Windows/LinuxでEmacsバインドにするには、Mac用のVS Codeのキーボードショートカット設定を流用して設定ファイル内で[Command]キーを表している「cmd」という記述を「ctrl」に置き換える方法もあるが、キーバインド全体の整合性がどうなるかを確認する必要があるだろう)。

操作 Win/Linux Mac "command"指定
カーソルを1行上 [↑] [Ctrl]+[P]/[↑] "cursorUp"
カーソルを1行下 [↓] [Ctrl]+[N]/[↓] "cursorDown"
カーソルを1文字左 [←] [Ctrl]+[B]/[←] "cursorLeft"
カーソルを1文字右 [→] [Ctrl]+[F]/[→] "cursorRight"
カーソルがある単語の先頭に移動 [Ctrl]+[←] [Option]+[←] "cursorWordStartLeft"
カーソルがある単語の末尾に移動 [Ctrl]+[→] [Option]+[→] "cursorWordEndRight"
カーソルを行頭 [Home] [Ctrl]+[A]/[Command]+[←]/[Home] "cursorHome"
カーソルを行末 [End] [Ctrl]+[E]/[Command]+[→]/[End] "cursorEnd"
カーソルをファイル先頭 [Ctrl]+[Home] [Command]+[↑] "cursorTop"
カーソルをファイル末尾 [Ctrl]+[End] [Command]+[↓] "cursorBottom"
カーソル移動キー

 [Shift]キーを押しながら、上記のキー操作を行うとカーソルが移動した範囲が選択状態になる(対応するコマンドは[Shift]キーを押さないもののコマンドの末尾に「Select」が付いたもの。例:cursorLeftSelect)。

文字/行の挿入と削除

 VS CodeはVim系統のエディターではないため、キーボードをたたけば、通常はカーソル位置にその文字が入力される(ただし、最近ではVimライクな操作性を実現する拡張機能が提供されたり、そのためのVS Code側のサポートも行われたりしている)。以下では文字の削除、行の挿入と削除についてまとめる。コマンドパレットから実行できるものもある。

操作 Win/Linux Mac "command"指定
カーソルの右にある1文字を削除 [Delete] [Ctrl]+[D]/[Fn]+[Delete] "deleteRight"
カーソルの左にある1文字を削除 [Backspace] [Delete]/[Ctrl]+[H] "deleteLeft"
カーソルの右側を全て削除 [Ctrl]+[K]/[Command]+[Fn]+[Delete] "deleteAllRight"
カーソルの左側を全て削除 [Command]+[Delete] "deleteAllLeft"
カーソル行を削除 [Ctrl]+[Shift]+[K] [Shift]+[Command]+[K] "editor.action.deleteLines"
カーソル行の上に行を挿入 [Ctrl]+]Shift]+[Enter] [Shift]+[Command]+[Enter] "editor.action.insertLineBefore"
カーソル行の上に行を挿入 [Ctrl]+[O] "lineBreakInsert"
カーソル行の下に行を挿入 [Ctrl]+]Enter] [Command]+[Enter] "editor.action.insertLineAfter"
文字/行の挿入と削除

 Macでは[Delete]キーについて注意点がある。デフォルトのキーバインディング設定を確認すると「delete」と記述されている部分があるが、これに対応するキーストロークは[Fn]+[Delete]キーなので注意しよう(キーボードの種類にもよるが)。[Delete]キーを単独で押した場合は「backspace」と認識されるようだ(これはMacユーザーの方々にはおなじみのことではあろう)。WindowsとLinuxでは、カーソルの右側(左側)を全て削除にはデフォルトではキーが割り当てられていない。必要に応じてキーバインディングの設定を行っておこう(Emacs的なキーバインディングにしたい人は特に)。

マルチカーソル

 マルチカーソルとは、その名の通り、1つのエディター内に複数のカーソルを表示する機能のことだ(2つ目以降のカーソルは線が細くなる)。カーソルを複数表示する方法は幾つかある。

  • [Ctrl]+[Alt]+[↑]/[↓]の各キーで現在のカーソルの上(または下)の行にカーソルを挿入する。Macでは[Command]+[Option]+[↑]/[↓]の各キーになる。筆者のUbuntu環境はMac上の仮想マシンだったので、Linuxでの正確なキーコンビネーションは分からなかった(試した限りは、[Shift]+[Alt]+[↑]/[↓]の各キー。あるいは[Ctrl]+[Shift]+[↑]/[↓]というキーの組み合わせも設定には書かれているが、これは筆者の環境ではうまく機能しなかった)
  • 現在のカーソル位置にある単語と同じ単語全てを[Ctrl]+[F2]キー(Macでは[Command]+[F2]キー)で同時に選択する。その単語をまとめて書き換えられる

 最初の方法では、複数のカーソルはコンテキストに応じた動作をする。つまり、カーソルを複数表示した後、どんな操作をするかについて頭を使う必要があるということだ。以下に例を示す。ここでは「name: name」の2つ目の「name」にカーソルがあり、そこで[Ctrl]+[Alt]+[↓]キーなどを押してマルチカーソル状態にしてある。

[Shift]+[→]キーを4回押す
[Shift]+[→]キーを4回押す
それだと「phone」の「e」が選択できない
それだと「phone」の「e」が選択できない
[Shift]+[Ctrl]+[→]キーを使うと「e」まで選択できる
[Shift]+[Ctrl]+[→]キーを使うと「e」まで選択できる

マルチカーソルの使い方(1)
最初の画像では、「name: name」の右側の「name」の先頭にカーソルを置き、[Ctrl]+[Alt]+[↓]キーを2回押して、合計3つのカーソルを表示している。
次の画像では[Shift]+[→]キーを4回押して、カーソルを4文字右に移動して、選択状態にしている。パラメータ名の文字数が違うので、このままではうまく全てのパラメータ名を選択できない。
そうではなく、3番目の画像のように、[Shift]+[Ctrl]+[→]キーを押すことで、カーソルを1語右に移動して、単語全体を選択する。「1語右」という操作により、全ての識別子を選択できた。


 この例のように、文字単位の移動ではなく、単語単位の移動を行うことで、文字数の違う識別子をスムーズに選択できる。どんな移動コマンドを使えばよいかで、使い勝手が変わってくるので、マルチカーソルを使うときには最初のうちは頭を使うことになるだろう。

 もう1つの方法についても例をお見せしよう。

「phone」にカーソルを合わせて、[Ctrl]+[F2]キーを押す
「phone」にカーソルを合わせて、[Ctrl]+[F2]キーを押す
「tel」と入力すると全てが書き換えられる
「tel」と入力すると全てが書き換えられる

マルチカーソルの使い方(2)


 この画像で分かるように、該当する語を一度の入力でまとめて書き換えられる。ただし、同じことを「addr」に対して行うと、引数やプロパティ名だけではなく、関数名に含まれる「Addr」までが対象となってしまう。想定外の部分まで書き換えてしまう可能性があるので注意が必要だ。

 あるいは単独の[F2]キーを押してもよい。この場合は次のようにテキスト入力ボックスが現れるので、そこに変更後の識別子を入力する(リファクタリングにはこちらが適切だろう)。

[F2]キーによる識別子の変更 [F2]キーによる識別子の変更

 このように、最初のうちは、マルチカーソルを使いこなすのは難しいかもしれないが、手になじませて、バリバリと使えるようになろう。

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

@IT Special

- PR -

TechTargetジャパン

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

RSSについて

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

メールマガジン登録

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