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

» 2018年07月17日 05時00分 公開
[かわさきしんじInsider.NET編集部]
前のページへ 1|2|3|4|5|6       

キーボードショートカット

 キーボードショートカットはユーザー固有の設定となる。この設定は「キーボードショートカットエディタ」を使えば、簡単に行える。メニューバーから[ファイル]-[基本設定]-[キーボード ショートカット](macOSでは[Code]メニューの下にある)を選択すると、次のような画面が表示される。

キーボードショートカットエディタ キーボードショートカットエディタ

 [キー バインドの検索]ボックスに適当な語を入力すると、「コマンド」「キーバインド」「タイミング」に含まれている語と検索語を比較してマッチするものが下に表示される。以下の画像は「cursor」で検索したところだ。コマンド名が日本語化されているものと、ないものがあるのが分かる。前ページで紹介したカーソルをファイル末尾に移動する「cursorBottom」なども表示されている。

「cursor」に関連するコマンドを検索 「cursor」に関連するコマンドを検索

 上に示したように、既にキーバインドが設定されているものについては、カーソルをその項目に合わせると左端に鉛筆マークが表示される(未設定の項目では[+]マークが表示される)。アイコンをクリックするか、項目を右クリックしてコンテキストメニューから[キー バインドの変更](未設定の項目では[キー バインドの追加])を選択すると、次のようなダイアログが表示されるので、割り当てたいキーの組み合わせを入力する。なお、既にキーバインドを割り当てている項目についてはコンテキストメニューに[キー バインドの削除]があるので、キーバインドを設定したくない項目についてはこれを利用しよう。

キーバインドの変更/追加を行うダイアログ キーバインドの変更/追加を行うダイアログ

 エディタ上部にある[keybindings.json]リンクをクリックすると、既定のキーバインド定義とユーザーが定義したキーバインドを記述するkeybindings.jsonファイルが開かれるので、この画面で直接編集することもできる。が、キーボードショートカットエディタを使うのが間違いないだろう。

keybindings.jsonファイルでキーバインドを直接設定 keybindings.jsonファイルでキーバインドを直接設定

 このタブでは、入力するキーストローク、実行するコマンド、そのコマンドを実行する条件を指定する(これらはキーボードショートカットエディタにある「キーバインド」「コマンド」「タイミング」に対応する)。[Ctrl]+[F]キー(macOSでは[Command]+[F]キー)を押して、検索ボックスを表示して、適当な語を入力してみるとよい。キーバインドを変更するのであれば、上の画面でもしているように「ctrl+w」のような既存のキーバインドを、新たにキーバインドを割り当てるのなら、その機能に合った英単語を入力してみるのがよい。ここでは主にキーストロークと実行するコマンドに焦点を当てていこう。

 ここでいう「条件」とは、あるキーストロークに複数のコマンドを割り当てて、どんな「タイミング」でどのコマンドを実行するかを指定することだ。例えば、以下に示すのは上でも紹介した[Ctrl]+[W]キーでエディタ/ウィンドウをクローズする設定だ(Windows版のVS Codeのデフォルト設定から引用)。

[

…… 省略 ……

{ "key": "ctrl+w",    "command": "workbench.action.closeActiveEditor" },

…… 省略 ……

{ "key": "ctrl+w",    "command": "workbench.action.closeGroup",
                         "when": "activeEditorGroupEmpty && multipleEditorGroups" },

…… 省略 ……

{ "key": "ctrl+w",    "command": "workbench.action.closeWindow",
                         "when": "!editorIsOpen && !multipleEditorGroups" },

……省略……

]

デフォルト設定の先頭部分
[Ctrl]+[W]キーを押した場合の設定が複数あることが分かる。

 最初の項目は「workbench.action.closeActiveEditor」コマンドを実行する。この項目にはwhenがないので、基本、これが実行されると考えてよい。実行されるのは「closeActiveEditor」なので、現在表示されているエディタを閉じることになる。2つ目の項目では「workbench.action.closeGroup」コマンドが実行される。ただし、こちらはwhenによって実行のタイミングが規定されている。その条件は「"activeEditorGroupEmpty && multipleEditorGroups"」であり、「現在のエディタグループが空」かつ「複数のエディタグループが存在」している場合には「現在のエディタグループ」がクローズされるという意味になる。

 最後の項目も同様だ。これにより「workbench.action.closeWindow」コマンドが実行されるが、こちらはwhenによってこのコマンドを実行する「タイミング」として「"!editorIsOpen && !multipleEditorGroups"」が指定されている。つまり「現在のウィンドウで開いているエディタがないとき」かつ「エディタグループがない」とき、すなわち、[Ctrl]+[W]キー([Command]+[W]キー)を何回か押して、全てのエディタが閉じられた後で、もう一度このキーの組み合わせが入力されたら、VS Codeのウィンドウが閉じるということになる。

 このように、キーボードショートカットは「"key"」「"command"」「"when"」の組み合わせをJSON形式で記述していく。「"when"」は省略可能だ。

[
"key": 設定したいキーコンビネーション, "command": 割り当てたいコマンド, "when": 条件,
……省略……
]

キーボードショートカット設定の構文

 例えば、[Esc][<]キー([Esc][>])という2連続のキー押下でファイルの先頭(末尾)に移動したい場合には、次のような設定を記述する(他にもEmacs的なキーバインドを実現するキーコンビネーションを以下には含めている)。

[
{ "key": "escape shift+,", "command": "cursorTop" },
{ "key": "escape shift+.", "command": "cursorBottom" },
{ "key": "ctrl+s", "command": "actions.find" },    
{ "key": "ctrl+x s""command": "workbench.action.files.save"},
{ "key": "ctrl+w", "command": "editor.action.clipboardCutAction"},
{ "key": "ctrl+y", "command": "editor.action.clipboardPasteAction"},
……省略……
]

[Esc][<]キーでファイル先頭へ、[Esc][>]キーでファイル末尾へ
他にも[Ctrl]+[S]キーで検索バーの表示、[Ctrl]+[X]→[S]([Ctrl]キーを押したまま[X]キーを押下し、続けて単独の[S]キー押下)でファイル保存、[Ctrl]+[W]キーでバッファーへカット、[Ctrl]+[Y]キーでペーストするための設定も行ってみた。

 [<]や[>]を入力するには実際には[Shift]キーを押しながら[,]キーもしくは[.]キーを押すことになるので、そのようにキーコンビネーションを記述する必要がある。「"escape <"」や「"escape >"」ではないので注意しよう。また、"command"にはこれまでの表中で「"command"」列に記載してきたコマンドを記述可能だ。

 なお、最初に見たキーボードショートカットエディタでも、このように1つのキーバインドが複数のコマンドに割り当てられている場合を検索可能だ。例えば、[キー バインドの検索]ボックスに「"ctrl+w"」のようにダブルクオート付きでキーコンビネーションを入力すると、厳密に[Ctrl]+[W]キーにマッチするコマンドが表示される(ダブルクオートがないときには、キーコンビネーションに[Ctrl]+[W]キーを含むものが表示される)。

キーバインドでショートカットを検索 キーバインドでショートカットを検索

 注意点としては、キーボードショートカットエディタではタイミングの編集まではできない点だ。細かな設定を行うには、keybindings.jsonファイルを自分で編集する必要がある。

 また、次ページで紹介する拡張機能として、さまざまなテキストエディタのキーマップが提供されている。自分がよく使っていた(よく使っている)エディタと同じキーマップでVS Codeを使えるようにするなら、拡張機能を「@recommended:keymaps」や「keymap」で検索してみよう。

 そういうわけで、最後に拡張機能について簡単に取り上げる。

拡張機能(エクステンション)

 次に拡張機能(エクステンション)について簡単に触れておこう。これは、VS Codeが標準では提供していないさまざまな機能を後付けで提供するものだ。Microsoft自身が提供する拡張機能もあれば、ユーザーが作成したものも提供されている。

 アクティビティーバーにある[拡張機能]アイコンをクリックすると[拡張機能]ビューが表示される。ここからさまざまな拡張機能を探して、インストールするのが簡単だ。

[拡張機能]ビュー [拡張機能]ビュー

 [拡張機能]ビューにはお勧めの拡張機能や、インストール済みの拡張機能、現在無効化されている拡張機能などが一覧表示される。

 以下ではC#言語サポート拡張機能をVS Codeにインストールしてみよう。下の画像にもある通り、[推奨]ペーンにC#言語サポート拡張機能が表示されているので、そこにある[インストール]ボタンをクリックするだけだ。インストール後には[インストール]ボタンが[再読み込み]ボタンに変わるので、VS Codeを再読み込みして、拡張機能をアクティブにする必要があることには注意。

目的の拡張機能を見つけたら[インストール]ボタンをクリック 目的の拡張機能を見つけたら[インストール]ボタンをクリック

 そのままの状態で望みの拡張機能が見つからなければ、検索ボックスに何か適当な語句を入力してみよう。

 [拡張機能]ビューの[インストール済み]ペーンに表示されている拡張機能の隣には歯車の形をした[設定]ボタンがある。ここから拡張機能の無効化とアンインストールが行える。

インストール済み拡張機能の表示 インストール済み拡張機能の表示

 拡張機能のインストール/アンインストール/無効化/有効化後にはウィンドウの再読み込みが必要になる(複数のVS Codeウィンドウが開いているときにはウィンドウごとに再読み込みを行う)。

 同様な手順でキーボードショートカットを一括で変更して、自分の好きなテキストエディタと同様な使い勝手を実現する拡張機能、VS Codeのウィンドウやエディタにおける構文ハイライトを変更する配色テーマ拡張機能、アイコンテーマの拡張機能などもインストール可能だ。


 本稿では、VS Codeの使い方のホンの基礎となる部分を紹介した。だが、サイドバーで実行可能な検索/Git/デバッグ機能、ユーザー定義のスニペット機能など、VS Codeには特筆すべき機能がまだまだたくさんある。そこで、次回以降は本稿では紹介しきれなかったこれらの機能について見ていくことにしよう(なお、本特集はVS Code 1.xのリリースに伴って順次改訂を進めていく予定だ。現在公開されている記事の内容が古くなっていることもあるので、第2回以降の記事を読む場合は注意されたい。または、記事の改訂を楽しみに待っていてほしい)。

「特集:Visual Studio Code早分かりガイド」のインデックス

特集:Visual Studio Code早分かりガイド

前のページへ 1|2|3|4|5|6       

チェックしておきたい人気記事

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

注目のテーマ

RSSについて

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

メールマガジン登録

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