当記事は vim ライクな操作の紹介・布教を目的としています。
AIでどのように作ったかについては別記事。
github リポジトリは こちら。
ほぼ全部 claude code が作ってくれました。
claude code に init.vim を渡して「こんな感じの操作をしたい」で作っているので、同じように作るのは簡単だと思います。
目次
動機
vim 系の拡張機能だと、vscode Vim や VSCode Neovim などがありますが、どちらもファイル編集パネルを中心とした動作になっており、
ファイルツリーやターミナルの扱い、画面分割において気持ちの良い操作ができませんでした。
AIの発展もあり、vscode の拡張機能を作ってしまうのが良いかも、と思い立って作ってみました。
動作風景
一応キーボード入力の様子を表示していますが、GIF にした時にスキップされた部分が多いです。
vim ライクに、ノーマルモード、ビジュアルモード、Exコマンドを実装しています。ただし、全機能は実装しておらず、筆者がよく使う機能が中心になっています。
一コマ0.5秒で、だいたいこのスピードで編集しています。
ホームポジションから動かないのでラクラク。
ここが快適
マウスに手を動かす頻度が激減する
ファイルツリーの操作、タブ切り替え、ウィンドウ移動など。
編集するファイルを切り替える際に、キーボード→マウス→キーボード の移動をなくせます。ホームポジション探ったり目線が動いたりと、意外とコストの高い操作だと思っていて、実際かなりラクになったと感じます。
ショートカットを覚えやすい形に変えられる
動作風景で、ショートカットを何個も使っていますが、
ホームポジションから動かず、思い出す時間も短く済んでいます。
画面分割・移動、タブ移動
画面分割は :vs, :sp を使い、分割画面の移動には <leader> hjkl を使っています。
移動の方はカーソル移動と向きが同じなので覚えやすいです。
タブ移動は <leader> yo を使っています。左右移動が hl で、指を一個上に上げたものになっています。上側を操作するイメージで覚えやすい！新規バッファ作成は <leader>i にしていますが vscode だとあまり使わないです。
mac だと control tab で移動するショートカットがあって覚えやすくはあるのですが、手の移動量が多いです。
サイドパネルの操作
vscode の左側のサイドバー、下に出てくるターミナルパネル、右側に出てくるAIパネルの切り替えショートカットも使っています。
実はデフォルトでショートカットがあって、 command b, command j, command option b で切り替えられるのですが、左側が b なのに下側が j なの？ shift じゃなくて option？ という疑問が生じて覚えにくいものとなっています。
ということでこれらを <leader>n, <leader>m, <leader>. に割り当て直しています。
n, m, . は hjl から指を一つ下げた位置にあり、左、下、右の順になっているので覚えやすいです。
<leader>r でターミナル実行
カーソルを置いている行をターミナルで実行します。
ビジュアルモードで選択している場合はその範囲を実行します。
<leader>R で実行シェルの選択も可能。
ターミナルのパネルは１枚しか持てないという制限はありますが、前は ヤンク→ターミナルのパネルに移動→ペースト していたので手軽になりました。
vim のようなターミナルパネルを作れないから代替案として作ったのですが、思ったよりいい感じ。
Ex コマンドに色々割り当てる (ワークスペース設定もしやすい)
vim と同様ではありますが、Exコマンドの追加が割と簡単で、一手間加えてワークスペース設定もできます。
よく使う vscode 拡張があれば、Exコマンドに割り当ててすぐに呼び出すことができます。
- ユーザー設定として
:ggに git graph 表示を割り当て - ワークスペース設定で、
:piでnpm build,npm packageとcode installを実行する- 内部的には、ワークスペースにタスクを定義しておいて
:piでそのタスクを発火させる
- 内部的には、ワークスペースにタスクを定義しておいて
といったことが可能です。
別の vscode ウィンドウへの移動も装備
<ctrl>0 で開いている vscode ウィンドウを一覧し、<ctrl>j, <ctrl>k で上下選択にしています。
vscode なのでワークスペース設定が共有しやすい
vim の設定は vscode のものとは大分違うので共有がしにくいですが、そこが解消されます。
一部の拡張機能と競合する可能性はありますが。
その他操作感など
前に書いた記事の init.vim を元に作っているので、似たような動作です。
vscode でファイルツリーを閉じることってあまりなかったんですが、画面がスッキリするし作業エリアが広がるので予想外に快適でした。
vim だとタブの中でウィンドウ分割（パネル分割）ですが、vscode だとパネルの中でタブを持つので、そこの操作感は変わりました。
マウスの併用について
全部をキーボード操作にするつもりはなく、特に git 操作はマウスを使うようにしています。
git graph, git パネルの操作はマウス中心の方がやりやすいし速そうなので。
各モードでもマウス操作は受け付けており、ドラッグで選択して右クリック・コピーも可能です。
マウス中心になるフェーズとキーボード中心になるフェーズが分かれていれば良いという考え方です。
マーク機能
vim にマーク機能があることを初めて知りました。claude code がイシューを作っていたので一応実装してみています。
小文字のみ、ファイル横断あり、マークのアルファベットを表示、という感じで vim とは変えています。マーク多用する人にとっては便利かも。
内部的な処理
vscode の入力を奪って vim の動作をさせています。
そのため、同じ仕組みを使っている拡張機能は併用できません。
また、ターミナルとの連携で他のツールと競合したり、ショートカットの割り当てが被ったりすることはあり得ます。
architecture.md を見てもらうとわかりやすいです。
どうしても対応しづらいケース
ファイル編集とファイルツリー、ターミナル、拡張機能のパネルなど、各種のパネルによって入力の処理の仕方が違うため、全てのパネルで同じ動きをさせるというのが難しかったり無理だったりします。
<leader>l でAIパネルに移動できるけど <leader>j では戻れなかったり、ターミナルのパネルではノーマルモードを使えなかったりなど。
escape でノーマルモードに戻ることもできないパネルがあるので、その場合は ctrl+escape や ctrl + ; でファイル編集に戻るという形で統一するようにしてみました。
ctrl+escape の方がわかりやすいですが、windows だと使用済みのコマンドだし押しにくい...
感想
見直してて思ったんですが、この拡張機能から vim に触れると、素の vim はあんまり使えなくなりそうですね。
モードの概念を導入して vscode の操作を快適にするための拡張だと思った方が良さそうです。
拡張機能っぽいのがモードの仕組みとバッファの実装あたりで、実はリマップしているだけの部分が多いのも微妙な点です。
ただ、leader キーの仕組みが使えることや、設定が１、２箇所にまとまるのはメリットだと思います。