VSCodeをキーボード操作を快適にする拡張機能 Which Key を紹介したい

2020年11月28日

こんにちは。

VSCode で「マウスは使いたくない!!」と、頑張ってショートカットキーをたくさん登録したけど、

  • 登録しすぎて、使えるキーがなくなってきた。。。
  • 使う頻度が少ないショートカットを忘れちゃう。。。

って、なったりしてませんか?

そういう人には「Which Key」という拡張機能をおすすめです。

本記事では「Which Key って何?」っていうところから、簡単なカスタマイズができるようになるまでを紹介します。

以下の目次で説明していきます。

which key とは

Which Key – Visual Studio Marketplace」の機能は

  • コマンドの階層型メニューを作れる
  • メニューのアイテムにキーの組み合わせでアクセスできる

です。

まずは次の動画を見てください。

which key

動画は「VSpaceCode」という拡張機能の紹介なので、Which Key とは厳密には違うんですが、VSCode の上部に表示されているクィックピックで表示されているメニューです。

(クイックピックはコマンドパレットみたいなフィルタ付きの入力ダイアログのことです。)

動画ではスペースキーでメニューが表示されて、b b(b に続けて b)で、開いているエディタの選択を呼び出しています。

動画は「VSpaceCode」なので、スペースがショートカットキーになっています。VSpaceCode は Vim と一緒に使う拡張機能なのでスペースキーが使えますが、Vimmer じゃない人は Ctrl-j などの他のショートカットキーに割り当てて使います。

紹介はここまでにして、インストールしましょう。

インストール

といいながら、インストールはマーケットプレースからインストールするだけなので、紹介はしません。

最低限の設定

コマンドパレットで「Which Key: Show Menu」を呼び出せば、「Which Key」を使えますが、よく使う機能なので、ショートカットキーに登録しましょう。

コマンドパレットから「References: Open Keyboard Shortcuts(JSON)」で keybindings.json を呼び出して以下を追加します。
私は Ctrl-j に割り当てて使っています。

[
    // for Which Key
    {
        "key": "ctrl+j",
        "command": "whichkey.show"
    }
]

最初から使えるメニュー

Ctrl-j で、 Which Key を呼び出せるので、やってみてください。

メニューが表示されるので、どんなキーの組み合わせが最初から使えるかわかります。

例えば、上位の2つは以下のようになっています。

キー コマンド 補足
Commands コマンドパレット
Last Editor 直前のエディタに切り替える

Ctrl-j に続けて、スペースを入力すれば、コマンドパレットが呼ばれます。
Ctrl-j に続けて、タブを入力すれば、直前のエディタに切り替わります。

私は直前のエディタに切り替えるのはよく使います。
2つのファイルを行ったり来たりすること多いので、Ctrl-j TAB で切り替えています。
便利ですよね。

他にもたくさんのキーバインドが最初から使えるのでメニューを探索してみてください。

ブラウザで見たい場合は、Default Keybindingsにもありますが、VSpaceCode の説明なので Which Key にはないキーバインドも含まれているので注意してください。

「メニューがあることでキーバインドを覚えなくて済む」というのも Which Key のメリットの1つなので、マニュアルを読む必要はないでしょう。

メニューに追加しよう

では、Which Key のカスタマイズはどうやるのでしょう。

Usageに説明があります。

カスタマイズの仕方は、差分かスクラッチから選べます。

  • 差分更新(Incrementally)
    • 追加・更新(Add/Replace)
    • 削除(Removal)
  • スクラッチ(From Scratch)

おすすめは差分更新です。

スクラッチだと、設定の行数が多くなりがちなので、できるだけ Which Key が用意している設定を活用しつつ、気に入らないメニューを変えたり、新しいメニューを追加していくのがいいと思います。

メニューの追加・更新

追加更新を例を上げてやってみます。

Which Key のデフォルトだと、開いているエディタの移動が b n で右、 b p で左になっています。

これは、Emacs の「次の行(Ctrl-n)」「前の行(Ctrl-p)」に合わせていると思いますが、Vim の「左(h)」「右(l)」に変えてみます。

まずは追加してみましょう。

{
    // Which Key
    "whichkey.bindingOverrides": [
        {
            "keys": "b.l",
            "position": 0,
            "name": "Next Editor",
            "type": "command",
            "command": "workbench.action.nextEditor"
        },
        {
            "keys": "b.h",
            "position": 1,
            "name": "Previous buffer",
            "type": "command",
            "command": "workbench.action.previousEditor"
        }
    ]
}

position はメニューの項目の位置で、よく使うものは上に持ってきてもいいです。

ですが、よく使うのはそもそもキーをわすれることないので、逆に下の方に持っていっておいたほうがいいという考えもあります。
省略すれば末尾に追加されます。

メニューの削除

開いているエディタの移動に b l で右、 b h で左を追加できました。

Which Key のデフォルトで用意されていた b n で右、 b p で左は使わなくなったので削除してみましょう。
(そのままにしていても、どっちとも使えるだけで問題ないです)

{
    "whichkey.bindingOverrides": [
        {
            "keys": "b.n",
            "position": -1
        },
        {
            "keys": "b.p",
            "position": -1
        }
    ]
}

これでメニューからいらない項目を削除できるようになりました。

新しいグループから追加する

1階層目のメニューの項目から追加するときは、以下のように追加します。

{
    "whichkey.bindingOverrides": [
        {
            "keys": "m",
            "name": "markdown...",
            "type": "bindings",
            "position": 2,
            "bindings": [
                {
                    "key": "p",
                    "name": "投稿",
                    "type": "command",
                    "command": "workbench.action.tasks.runTask",
                    "args": "post current markdown"
                }
            ]
        }
    ]
}

まとめ

VSCode をキーボード操作を快適にする拡張機能 Which Key を紹介しました。
メニューのカスタマイズ方法についても簡単に説明しました。

ぜひ使ってみてください。

VSCode

Posted by crz33