「VSCodeでVimを使いたいけど、挿入モードから抜けられない…」 「文字を入力すると上書きされてしまう」 「ノーマルモードと挿入モードの切り替えがうまくいかない」 「Insertキーを押したら変な動作になった」
VSCodeの「挿入モード」に関して、こんな悩みを抱えていませんか?
実は、VSCodeには**2種類の「挿入モード」**があるんです:
- Vim拡張機能の挿入モード(INSERT MODE)
- 通常の挿入/上書きモード(Insert/Overtype)
今回は、両方の挿入モードについて、基本から応用まで完全に解説します。 この記事を読めば、VSCodeでの文字入力を完璧にコントロールできるようになりますよ!
VSCodeの2つの挿入モード

1. Vim拡張機能の挿入モード
Vimとは: キーボードだけで操作する強力なテキストエディタ
VSCodeVimの特徴:
- ノーマルモード、挿入モード、ビジュアルモードなどを切り替え
- マウス不要の高速編集
- プログラマーに人気
2. 通常の挿入/上書きモード
標準エディタ機能:
- Insertキーで切り替え
- 挿入モード:文字を挿入(デフォルト)
- 上書きモード:既存の文字を置き換え
【Vim編】VSCodeVimの挿入モード完全ガイド
VSCodeVimのインストール
- 拡張機能をインストール:
1. Ctrl + Shift + X(拡張機能パネル)2. "vim" で検索3. "Vim" by vscodevim をインストール4. VSCodeを再起動
Vimの基本モード
モード | 表示 | 用途 | 切り替え方法 |
---|---|---|---|
ノーマル | — NORMAL — | コマンド実行 | ESC |
挿入 | — INSERT — | テキスト入力 | i, a, o など |
ビジュアル | — VISUAL — | 選択 | v, V, Ctrl+v |
コマンド | : | Ex コマンド | : |
挿入モードへの切り替え方法(重要!)
基本的な挿入モード開始コマンド
i : カーソル位置の前に挿入
a : カーソル位置の後に挿入
I : 行頭に挿入
A : 行末に挿入
o : 下に新しい行を作って挿入
O : 上に新しい行を作って挿入
s : 1文字削除して挿入
S : 行を削除して挿入
実践例
// カーソルが | の位置にあるとする
// 元のコード
function test(|) {
}
// i を押すと
function test(|) { // カーソル前に挿入
// a を押すと
function test()| { // カーソル後に挿入
// A を押すと
function test() {| // 行末に移動して挿入
// o を押すと
function test() {
| // 下に新規行で挿入
}
挿入モードから抜ける方法(最重要!)
標準的な方法
ESC キー : ノーマルモードに戻る
代替方法(ESCが遠い場合)
Ctrl + [ : ESCと同じ効果
Ctrl + c : 挿入モード終了(一部環境)
カスタムキーマッピング
settings.json に追加:
{
"vim.insertModeKeyBindings": [
{
"before": ["j", "j"],
"after": ["<Esc>"]
}
]
}
これで「jj」と素早く入力すると挿入モードから抜けられる!
【通常編】挿入/上書きモードの使い方
現在のモードを確認
ステータスバーで確認:
- 右下に「INS」→ 挿入モード(通常)
- 右下に「OVR」→ 上書きモード
モードの切り替え
Insertキーでの切り替え
Insertキー押下 → モード切り替え
問題: ノートPCにはInsertキーがない場合も!
代替方法
Windows:
Fn + Insert
または
Fn + 0(テンキー)
Mac: (Insertキーなし)
Fn + Return(一部キーボード)
または
設定で無効化推奨
上書きモードを無効化する
多くの人にとって上書きモードは不要。無効化する方法:
settings.json で設定
{
"editor.overtype": "never"
}
または
1. Ctrl + , (設定を開く)
2. "overtype" で検索
3. Editor: Overtype を "never" に設定
VSCodeVimの高度な設定
よく使う設定オプション
{
// システムクリップボードを使用
"vim.useSystemClipboard": true,
// 検索時に大文字小文字を無視
"vim.ignorecase": true,
"vim.smartcase": true,
// ハイライトを有効化
"vim.hlsearch": true,
// 相対行番号を表示
"editor.lineNumbers": "relative",
// Ctrl+c でノーマルモードに
"vim.useCtrlKeys": true,
// リーダーキーの設定
"vim.leader": "<space>",
// イージーモーション
"vim.easymotion": true
}
便利なキーマッピング
{
"vim.normalModeKeyBindingsNonRecursive": [
// スペース+w で保存
{
"before": ["<leader>", "w"],
"commands": ["workbench.action.files.save"]
},
// スペース+q で閉じる
{
"before": ["<leader>", "q"],
"commands": ["workbench.action.closeActiveEditor"]
}
],
"vim.insertModeKeyBindings": [
// jj でノーマルモードへ
{
"before": ["j", "j"],
"after": ["<Esc>"]
}
],
"vim.visualModeKeyBindings": [
// > でインデント後も選択維持
{
"before": [">"],
"commands": ["editor.action.indentLines"]
}
]
}
トラブルシューティング
問題1:挿入モードから抜けられない
Vim使用時:
解決方法:
1. ESC キーを押す
2. Ctrl + [ を押す
3. それでもダメなら Ctrl + Shift + P → "Reload Window"
確認事項:
- キーボードの言語設定
- IMEが有効になっていないか
- Caps Lockがオンになっていないか
問題2:文字が勝手に上書きされる
原因: 上書きモードが有効
解決:
- Insertキーを押してモード切り替え
- 設定で上書きモードを無効化
"editor.overtype": "never"
問題3:Vimコマンドが効かない
確認事項:
1. VSCodeVim拡張機能が有効か
2. 他の拡張機能との競合
3. キーバインディングの衝突
リセット方法:
1. 拡張機能を無効化
2. VSCodeを再起動
3. 拡張機能を有効化
問題4:日本語入力で挙動がおかしい
VSCodeVim使用時の対策:
{
// IME使用時は自動的にInsertモードに
"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "1033",
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/bin/fcitx5-remote",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/bin/fcitx5-remote -t {im}"
}
モード表示のカスタマイズ
ステータスバーの表示を見やすくする
{
// Vimモードを色で区別
"workbench.colorCustomizations": {
"statusBar.background": "#005f87",
"statusBar.foreground": "#ffffff",
"statusBar.debuggingBackground": "#ff0000"
},
// モード別にステータスバーの色を変更
"vim.statusBarColorControl": true,
"vim.statusBarColors.normal": ["#005f5f", "#ffffff"],
"vim.statusBarColors.insert": ["#5f0000", "#ffffff"],
"vim.statusBarColors.visual": ["#5f00af", "#ffffff"],
"vim.statusBarColors.visualline": ["#005f87", "#ffffff"],
"vim.statusBarColors.visualblock": ["#00005f", "#ffffff"],
"vim.statusBarColors.replace": ["#000000", "#ffffff"]
}
効率的な編集のためのTips
Vimモーションとの組み合わせ
# ノーマルモードで
ciw : 単語を削除して挿入モード
ci" : ""内を削除して挿入モード
ci( : ()内を削除して挿入モード
cc : 行を削除して挿入モード
C : カーソル位置から行末まで削除して挿入
マルチカーソルとの併用
1. Ctrl + D で同じ単語を選択
2. i で挿入モードへ
3. 全箇所で同時編集
4. ESC でノーマルモードへ
スニペットとの連携
// 挿入モードでスニペットを展開
{
"vim.insertModeKeyBindings": [
{
"before": ["<tab>"],
"commands": ["editor.action.triggerSuggest"]
}
]
}
よくある質問(FAQ)
Q:VimモードとVSCodeのショートカットが競合する
A: 設定で調整
{
// VSCodeのCtrlキーショートカットを優先
"vim.handleKeys": {
"<C-a>": false, // 全選択はVSCode
"<C-f>": false, // 検索はVSCode
"<C-c>": false, // コピーはVSCode
"<C-v>": false // ペーストはVSCode
}
}
Q:挿入モード時のカーソル形状を変えたい
A: カーソルスタイル設定
{
"editor.cursorStyle": "line",
"editor.cursorBlinking": "blink",
"vim.cursorStylePerMode.insert": "line",
"vim.cursorStylePerMode.normal": "block",
"vim.cursorStylePerMode.visual": "block"
}
Q:Vimを一時的に無効化したい
A: トグルコマンド
Ctrl + Shift + P → "Vim: Toggle Vim Mode"
まとめ:挿入モードを完全マスターしよう!
VSCodeの挿入モードについて、Vim拡張機能と通常の挿入/上書きモードの両方を詳しく解説してきました。
Vimユーザーが覚えるべきこと: ✅ i
で挿入モード開始、ESC
で終了
✅ a
, o
, A
, O
など用途別の挿入方法
✅ jj
でESCの代替設定
✅ 日本語入力時の設定調整
✅ VSCodeショートカットとの共存設定
通常エディタユーザーの注意点: ✅ Insertキーで挿入/上書き切り替え
✅ 不要なら上書きモードは無効化
✅ ステータスバーでモード確認
挿入モードを使いこなせれば、コーディング速度が劇的に向上します。
特にVimモードは最初は難しく感じるかもしれませんが、慣れれば手放せなくなる強力なツールです。
まずは基本的なi
とESC
から始めて、徐々に高度な機能を使いこなしていきましょう!
コメント