Zenn
🪟

VSCodeのエディタ操作をtmux風にする拡張機能

2025/02/23に公開
VS Code
VS Code 拡張機能
tmux
tech

TL;DR

拡張機能を作りました。
https://marketplace.visualstudio.com/items?itemName=trombiano1.tmux-pane-editors

はじめに

長らくtmux上のneovimでコードを書いていた私ですが、最近はVSCodeを使わざるを得ない場面も増えてきました。これまではショートカットの設定を頑張ることで乗り越えてきましたが、どうしても細かいところには手が届きません。諦めて拡張機能を作ることにしました。

拡張機能ならではの機能

ウィンドウ番号の表示

Webviewを使うとWebコンテンツを表示できるので、tmuxでC-b qを押した時っぽい画面を作れます（残念ながら数字の後ろのコードの表示は消えてしまいますが）。

ウィンドウサイズの変更

詳細なロジックも組めるので、tmuxと同様、C-b 矢印でウィンドウサイズを調整することができるようになります。

Stickyなリーダーキー

tmuxは一部入力に対してリーダーキーを保持してくれるので、C-b M-→ M-→ M-→のように、C-bを一度入力したあとにキーを連打することが可能です。VSCodeのショートカットではこの挙動は再現できませんが、拡張機能側でリーダーキーが押されたかの情報を保持することで、似た挙動を再現することができました。

設定

一部ショートカットはターミナルに吸収されてしまうので、明示的に逃げるように指示する必要があります。この拡張機能を使う際は以下をconfig.jsonへコピペしてください。

"terminal.integrated.commandsToSkipShell": [
  "tmux-pane-editors.toggleTmuxMode",
  "tmux-pane-editors.navigate",
  "tmux-pane-editors.resize",
  "workbench.action.closeActiveEditor"
]

最後に

さっき作ったばかりでまだまだバグがありそうなので、自分でも使いながら見つけ次第直していきます。

参考

https://zenn.dev/ganariya/articles/tmux-like-vscode

Discussion