導入
GitHub Copilot を使うために vim + tmux から VSCode に移行している途中に、どうしてもマウスでペインを移動するのに困ったため導入しています
VSCode は高機能ですが、ペイン操作に関しては tmux に慣れている人ほど違和感を覚えがちです。
- 分割
- フォーカス移動
- ペインのサイズ調整
これらを キーボードだけで直感的に操作したいと思い、
tmux 風のキーバインドを keybinding.json に直接定義しました。
この記事では、 拡張機能なし / 素の VSCode で tmux ライクな操作を実現する設定を紹介します。
(ゆくゆくはdotfileのような管理したいため)
目標とする操作感
tmux でよく使う操作を、VSCode でも再現します。
| 操作 | キー |
|---|---|
| 横分割 | Ctrl + a → - |
| 縦分割 | Ctrl + a → \ |
| ペインを閉じる | Ctrl + a → x |
| 新しいウィンドウ | Ctrl + a → c |
| 次のペインへ移動 | Ctrl + o |
| ペインサイズ変更 | Ctrl + Shift + H/J/K/L |
※ tmux の prefix (Ctrl+b) ではなく
Ctrl+a をprefix として使っています
keybinding.json に貼り付けるコード
以下を そのまま keybinding.json に貼り付けてください。
[
// =========================
// 疑似 prefix: Ctrl + a
// =========================
// 水平方向に分割（Ctrl+a → -）
{
"key": "ctrl+a -",
"command": "workbench.action.splitEditorDown"
},
// 垂直方向に分割（Ctrl+a → \）
{
"key": "ctrl+a \\",
"command": "workbench.action.splitEditorRight"
},
// ペインを閉じる（Ctrl+a → x）
{
"key": "ctrl+a x",
"command": "workbench.action.closeActiveEditor"
},
// 新しい VSCode ウィンドウを作成（Ctrl+a → c）
{
"key": "ctrl+a c",
"command": "workbench.action.newWindow"
},
// 次のペインへ移動（Ctrl+o）
{
"key": "ctrl+o",
"command": "workbench.action.focusNextGroup"
},
// =========================
// Ctrl + Shift + HJKL でペインリサイズ
// =========================
{
"key": "ctrl+shift+l",
"command": "workbench.action.increaseViewWidth"
},
{
"key": "ctrl+shift+h",
"command": "workbench.action.decreaseViewWidth"
},
{
"key": "ctrl+shift+j",
"command": "workbench.action.increaseViewHeight"
},
{
"key": "ctrl+shift+k",
"command": "workbench.action.decreaseViewHeight"
}
]
実際に使ってみて感じたこと
良い点
- マウス操作がほぼ不要
- tmux と操作感が近く、脳の切り替えがいらない
- Extension に依存しないので壊れにくい
割り切りポイント
- tmux のような「完全な prefix モード」は作れない
- ペイン移動は Ctrl+o にしている（h/j/k/l 移動は別途設定が必要）
なぜ Extension を使わないのか
- VSCode のアップデートで動かなくなることがある
- キーバインドは 自分で把握できる状態 にしておきたい
- (Extensionがコードで管理できるか調べてないが)dotfileの様な管理をしたいため
という理由で、
今回は 標準コマンドのみ を使っています。
まとめ
- VSCode でも tmux ライクなペイン操作は十分可能
- keybinding.json を直接触るのが一番シンプル
tmux を使っていて VSCode に来た人の参考になれば幸いです。