VS CodeでVimキーバインドを使う方法｜設定や便利コマンドを初心者向けに解説

「もっとキーボードだけでコードを書きたい」
「Vimの操作感が忘れられない」
「マウスを使わずに効率的にプログラミングしたい」

そう思っていませんか？

Visual Studio Code（VS Code）は、拡張機能を入れるだけでVimと同じキーバインド（操作方法）を使えるようになります。Vimの強力なテキスト編集機能と、VS Codeの使いやすいインターフェースや豊富な拡張機能を組み合わせることで、最高の開発環境を構築できます。

しかし、「Vimは難しそう」「設定が複雑そう」「VS Codeの機能が使えなくなりそう」といった不安を持つ方も多いのではないでしょうか。

この記事では、VS CodeにVimキーバインドを導入する方法や、よく使う基本コマンド、さらに実用的なカスタマイズ例までを、初心者向けにやさしく詳しく解説します。

Vimとは？VS CodeでVimを使うメリット
1. Vimの特徴
2. VS CodeでVimを使うメリット
VS Code Vim拡張機能のインストール
Vimの基本概念
1. モーダルエディタとは
2. モード切り替えの基本
基本のVimキーバインド
ビジュアルモードの活用
1. ビジュアルモードの種類
2. ビジュアルモードでの操作
VS Code特有の機能との連携
1. VS Codeコマンドの実行
2. エクスプローラーとの連携
カスタマイズと設定
1. settings.jsonでのカスタマイズ
2. カスタムキーバインド例
よくある問題とトラブルシューティング
実践的な使用例
1. 日常的な編集フロー
2. デバッグ作業での活用
段階的な学習アプローチ
おすすめの拡張機能との組み合わせ
1. Vim関連拡張機能
2. Vimと相性の良い拡張機能
上級者向けテクニック
まとめ
1. 効率性の向上
2. VS Codeとの共存

Vimとは？VS CodeでVimを使うメリット

Vimの特徴

Vimは、1970年代から存在する歴史あるテキストエディタで、以下の特徴があります：

モーダルエディタ：挿入モードとコマンドモードを切り替えて使用
キーボード中心：マウスを使わずすべてキーボードで操作
高効率：慣れると非常に高速でテキスト編集が可能
カスタマイズ性：豊富な設定とプラグイン

VS CodeでVimを使うメリット

両方の良いとこ取り

Vimの効率的な編集機能 + VS Codeの使いやすいUI
Vimのキーバインド + VS Codeの拡張機能エコシステム
Vimのテキスト処理能力 + VS Codeのデバッグ機能

具体的なメリット

編集速度の向上：マウスを使わない高速編集
集中力の維持：手がキーボードから離れない
筋肉記憶の活用：既存のVimスキルを活かせる
学習投資の価値：一度覚えれば長期間使える技術

VS Code Vim拡張機能のインストール

インストール手順

VS Code内からインストール

VS Code左側の拡張機能アイコン（四角が4つ並んだマーク）をクリック
検索ボックスに「vim」と入力
「Vim」（作者：vscodevim）を選択
「インストール」ボタンをクリック

コマンドラインからインストール

code --install-extension vscodevim.vim

インストール後の確認

インストールが完了すると、以下のことが確認できます：

ステータスバーに「Normal」モードが表示される
キーボード操作がVim式に変わる
カーソルの形が変わる（ノーマルモードでブロック、インサートモードでライン）

初回設定のリロード

拡張機能をインストールした後は、VS Codeを再起動するか、Ctrl + Shift + Pでコマンドパレットを開いて「Developer: Reload Window」を実行してください。

Vimの基本概念

モーダルエディタとは

Vimの最大の特徴は、モードという概念です。同じキーでも、現在のモードによって動作が変わります。

主要なモード

モード	説明	表示	主な用途
ノーマルモード	コマンド実行モード	`-- NORMAL --`	移動、削除、コピーなど
インサートモード	文字入力モード	`-- INSERT --`	通常の文字入力
ビジュアルモード	選択モード	`-- VISUAL --`	テキストの選択と操作
コマンドモード	コマンドライン	`:`	ファイル操作、設定変更

モード切り替えの基本

ノーマルモード
     ↓ i (insert)
インサートモード
     ↓ Esc
ノーマルモード
     ↓ v (visual)
ビジュアルモード
     ↓ Esc
ノーマルモード

基本のVimキーバインド

カーソル移動（ノーマルモード）

基本移動

キー	動作	覚え方
`h`	左に移動	left
`j`	下に移動	jump down
`k`	上に移動	kick up
`l`	右に移動	right

単語単位の移動

キー	動作	説明
`w`	次の単語の先頭	word
`b`	前の単語の先頭	back
`e`	現在の単語の末尾	end

行内移動

キー	動作	説明
`0`	行の先頭	数字のゼロ
`^`	行の最初の非空白文字
`$`	行の末尾

ページ移動

キー	動作	説明
`gg`	ファイルの先頭	go to top
`G`	ファイルの末尾	go to bottom
`Ctrl + f`	ページダウン	forward
`Ctrl + b`	ページアップ	backward

編集操作（ノーマルモード）

挿入・追加

キー	動作	説明
`i`	カーソル位置で挿入モード	insert
`I`	行の先頭で挿入モード	Insert at beginning
`a`	カーソルの後で挿入モード	append
`A`	行の末尾で挿入モード	Append at end
`o`	下に新しい行を作成	open below
`O`	上に新しい行を作成	Open above

削除

キー	動作	説明
`x`	1文字削除
`dd`	1行削除	delete line
`dw`	単語削除	delete word
`d$`	カーソルから行末まで削除	delete to end

コピー・貼り付け

キー	動作	説明
`yy`	1行コピー	yank line
`yw`	単語コピー	yank word
`p`	カーソルの後に貼り付け	paste
`P`	カーソルの前に貼り付け	Paste before

元に戻す・やり直し

キー	動作	説明
`u`	アンドゥ（元に戻す）	undo
`Ctrl + r`	リドゥ（やり直し）	redo

検索・置換

検索

キー	動作	説明
`/文字列`	前方検索	search forward
`?文字列`	後方検索	search backward
`n`	次の検索結果	next
`N`	前の検索結果	previous

置換（コマンドモード）

コマンド	動作	説明
`:s/old/new/`	現在行の最初を置換	substitute
`:s/old/new/g`	現在行のすべてを置換	global
`:%s/old/new/g`	ファイル全体を置換	all lines

ビジュアルモードの活用

ビジュアルモードの種類

キー	モード	説明
`v`	文字選択	文字単位で選択
`V`	行選択	行単位で選択
`Ctrl + v`	矩形選択	ブロック選択

ビジュアルモードでの操作

選択後に以下の操作が可能：

キー	動作	説明
`d`	削除	選択範囲を削除
`y`	コピー	選択範囲をコピー
`>`	インデント追加	右にインデント
`<`	インデント削除	左にインデント

VS Code特有の機能との連携

VS Codeコマンドの実行

Vimキーバインドを使いながら、VS Codeの機能も使用できます：

コマンドパレット

:Commands

または通常のCtrl + Shift + P

ファイル操作

:e filename    # ファイルを開く
:w             # 保存
:q             # 閉じる
:wq            # 保存して閉じる

エクスプローラーとの連携

キー操作	VS Code機能
`Ctrl + Shift + E`	エクスプローラーにフォーカス
`Ctrl + P`	ファイル検索
`Ctrl + Shift + F`	全体検索

カスタマイズと設定

settings.jsonでのカスタマイズ

VS Codeの設定ファイル（settings.json）に以下の設定を追加できます：

基本設定

{
  // Vimのカーソルスタイル設定
  "vim.cursorStylePerMode": {
    "normal": "block",
    "insert": "line",
    "visual": "block"
  },
  
  // スムーズなカーソルアニメーション
  "editor.cursorSmoothCaretAnimation": "on",
  
  // カーソル周辺の行数を常に表示
  "editor.cursorSurroundingLines": 5,
  "editor.cursorSurroundingLinesStyle": "all",
  
  // 相対行番号の表示
  "editor.lineNumbers": "relative",
  
  // Ctrl系キーの使用設定
  "vim.useCtrlKeys": true,
  
  // システムクリップボードの使用
  "vim.useSystemClipboard": true,
  
  // 検索でのハイライト
  "vim.hlsearch": true
}

リーダーキーの設定

{
  "vim.leader": "<space>",
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "w"],
      "commands": [":w"]
    },
    {
      "before": ["<leader>", "q"],
      "commands": [":q"]
    },
    {
      "before": ["<leader>", "f"],
      "commands": ["workbench.action.quickOpen"]
    }
  ]
}

カスタムキーバインド例

分割ウィンドウの操作

{
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<C-h>"],
      "commands": ["workbench.action.focusLeftGroup"]
    },
    {
      "before": ["<C-j>"],
      "commands": ["workbench.action.focusBelowGroup"]
    },
    {
      "before": ["<C-k>"],
      "commands": ["workbench.action.focusAboveGroup"]
    },
    {
      "before": ["<C-l>"],
      "commands": ["workbench.action.focusRightGroup"]
    }
  ]
}

VS Code機能へのショートカット

{
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "d"],
      "commands": ["editor.action.revealDefinition"]
    },
    {
      "before": ["<leader>", "r"],
      "commands": ["editor.action.rename"]
    },
    {
      "before": ["<leader>", "a"],
      "commands": ["editor.action.quickFix"]
    }
  ]
}

よくある問題とトラブルシューティング

VS Codeの標準ショートカットとの競合

問題

Vim拡張を入れると、Ctrl+C、Ctrl+Vなどの標準ショートカットが効かなくなる場合があります。

解決方法1：Ctrlキーの無効化

{
  "vim.useCtrlKeys": false
}

解決方法2：個別キーバインドの設定

{
  "vim.handleKeys": {
    "<C-c>": false,
    "<C-v>": false,
    "<C-f>": false
  }
}

日本語入力との組み合わせ

問題

日本語入力中にEscapeでノーマルモードに戻れない

解決方法

{
  "vim.autoSwitchInputMethod": {
    "enable": true,
    "defaultIM": "com.apple.keylayout.ABC",
    "switchIMCmd": "/usr/local/bin/im-select {im}"
  }
}

パフォーマンス問題

問題

大きなファイルでVimの動作が重い

解決方法

{
  "vim.searchHighlightColor": "rgba(150, 150, 255, 0.3)",
  "vim.hlsearch": false,
  "extensions.autoUpdate": false
}

実践的な使用例

日常的な編集フロー

1. ファイルを開いて編集開始

Ctrl + P → ファイル名入力 → Enter
i → コード入力 → Esc

2. 関数の作成

o                    # 新しい行を作成
function myFunc() {  # 関数を入力
Esc                  # ノーマルモードに戻る
o                    # 次の行を作成
    // 処理内容       # インデントされた行で入力
Esc                  # ノーマルモードに戻る

3. 複数行の一括編集

Ctrl + v    # 矩形選択モード
j j j       # 下に3行選択
I           # 行の先頭に挿入
//          # コメントアウト記号を入力
Esc         # 複数行に一括適用

デバッグ作業での活用

ブレークポイントの設定

{
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "b"],
      "commands": ["editor.debug.action.toggleBreakpoint"]
    }
  ]
}

デバッグ開始・停止

{
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<F5>"],
      "commands": ["workbench.action.debug.start"]
    },
    {
      "before": ["<S-F5>"],
      "commands": ["workbench.action.debug.stop"]
    }
  ]
}

段階的な学習アプローチ

第1週：基本操作の習得

まずは以下の操作を完璧に覚えましょう：

モード切り替え：i（挿入）、Esc（ノーマル）
基本移動：h、j、k、l
保存・終了：:w、:q、:wq

第2週：編集操作の習得

削除：x、dd、dw
コピー・貼り付け：yy、p
アンドゥ・リドゥ：u、Ctrl + r

第3週：効率的な移動

単語移動：w、b、e
行移動：0、^、$
ページ移動：gg、G

第4週：検索・置換

検索：/、n、N
置換：:s、:%s

上級者向けテクニック

マクロの使用

マクロの記録

qa          # aレジスタにマクロ記録開始
編集操作    # 繰り返したい操作を実行
q           # マクロ記録終了
@a          # マクロの実行
@@          # 最後のマクロを再実行

テキストオブジェクト

内部・周辺の選択

ciw    # 単語の内部を変更
ci"    # ダブルクォート内を変更
ci(    # 括弧内を変更
daw    # 単語を削除（空白含む）

ジャンプリスト

移動履歴の活用

Ctrl + o    # 前の位置に戻る
Ctrl + i    # 次の位置に進む
''          # 最後の変更位置に移動

まとめ

VS CodeにVim拡張を導入することで、以下のような大きなメリットが得られます：

効率性の向上

キーボード中心の操作でマウス使用を最小化
モーダル編集による高速なテキスト処理
豊富なキーバインドで様々な操作を素早く実行

VS Codeとの共存

既存ワークフローの維持：VS Codeの機能はそのまま使用
段階的導入：必要な機能から少しずつ習得
カスタマイズ性：自分好みの設定に調整可能

Vimとは？VS CodeでVimを使うメリット

Vimの特徴

VS CodeでVimを使うメリット

両方の良いとこ取り

具体的なメリット

VS Code Vim拡張機能のインストール

インストール手順

VS Code内からインストール

コマンドラインからインストール

インストール後の確認

初回設定のリロード

Vimの基本概念

モーダルエディタとは

主要なモード

モード切り替えの基本

基本のVimキーバインド

カーソル移動（ノーマルモード）

基本移動

単語単位の移動

行内移動

ページ移動

編集操作（ノーマルモード）

挿入・追加

削除

コピー・貼り付け

元に戻す・やり直し

検索・置換

検索

置換（コマンドモード）

ビジュアルモードの活用

ビジュアルモードの種類

ビジュアルモードでの操作

VS Code特有の機能との連携

VS Codeコマンドの実行

コマンドパレット

ファイル操作

エクスプローラーとの連携

カスタマイズと設定

settings.jsonでのカスタマイズ

基本設定

リーダーキーの設定

カスタムキーバインド例

分割ウィンドウの操作

VS Code機能へのショートカット

よくある問題とトラブルシューティング

VS Codeの標準ショートカットとの競合

問題

解決方法1：Ctrlキーの無効化

解決方法2：個別キーバインドの設定

日本語入力との組み合わせ

問題

解決方法

パフォーマンス問題

問題

解決方法

実践的な使用例

日常的な編集フロー

1. ファイルを開いて編集開始

2. 関数の作成

3. 複数行の一括編集

デバッグ作業での活用

ブレークポイントの設定

デバッグ開始・停止

段階的な学習アプローチ

第1週：基本操作の習得

第2週：編集操作の習得

第3週：効率的な移動

第4週：検索・置換

おすすめの拡張機能との組み合わせ

Vim関連拡張機能

Vim Motions for VS Code

Which Key

Vimと相性の良い拡張機能

GitLens

Bracket Pair Colorizer

上級者向けテクニック

マクロの使用

マクロの記録

テキストオブジェクト

内部・周辺の選択