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

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

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

VS Code操作ガイド

 ここからはVS Codeを使っていく上で覚えておくべき(であろう)基本操作をまとめていく。キーボードショートカットの設定で変更可能な項目については、どの項目を設定すればよいかも記載していこう。ただし、以下で見ていく設定はあくまでも標準状態のVS Codeのキーバインドを前提としたものだ。自分の好きなテキストエディタと同様なキーバインドをVS Codeに施している場合には、以下で取り上げるキーバインドとは異なるものになっているかもしれない。

VS Codeの起動と終了

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

 なお、VS Code 1.22のWindows/Linux版では引数なしで起動をした場合(アイコンのダブルクリックなどの操作を含む)、以前は直近に作業をしていたフォルダが開いていたが、フォルダやワークスペースを何も開かないようになった(いわゆる「空のドキュメント」を開いた状態となる)。

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

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

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

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

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

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

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

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

 余談だが、VS Codeでは何らかの時点でファイルの内容を保存してくれるオートセーブ機能もある。これを有効にするには[ファイル]メニューから[自動保存]を選択する。また、「Hot Exit」と呼ばれる機能もある。これは未保存のファイルがあるまま、VS Codeを終了すると、その変更内容を覚えておいてくれるというもので、次回のVS Code起動時に未保存の変更点が反映された状態でファイルが開かれる(ファイルの状態も未保存のままとなる)。「Hot Exit」はデフォルトで有効になっているが、VS Codeの設定でfiles.hotExitの値を"off"にすると無効になり、"onExitAndWindowClose"にすると複数のVS Codeウィンドウを開いて作業をしているときなどにいずれかのウィンドウを閉じたタイミングでも「Hot Exit」が機能するようになる。

カーソル移動

 カーソル移動はWindows/LinuxとmacOSで大きく異なっている。筆者の環境だと、macOSでは[Ctrl]+[P]/[N]/[F]/[B]の各キーでカーソルが上下左右に移動する(Emacsのキーバインドに似たもの)。これに対して、Windows/Linuxではカーソルの上下左右はカーソルキーを使うようになっている(デフォルトの状態)。以下に主なカーソル移動キーを示す。

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

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

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

文字/行の挿入と削除

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

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

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

 この他にもエディタ内で複数のカーソルを使用したり、ほんのわずかなキー操作で識別子名を変更したりといったことも可能だ。詳細についてはリンク先を参照されたい。

 次に、VS Codeの環境をカスタマイズする基本について見ていこう。

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

RSSについて

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

メールマガジン登録

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