新编辑器之神 VSCode VIM，骚操作指北

这个世界上有 10 类程序员，一类是会用 VIM 的，另一类是不会的。

VIM 是一款命令行文本编辑器，内置于 macOS 和 Linux 操作系统中，它发明于上个世纪 80 年代。由于没有鼠标支持，所以 VIM 和现代编辑器的使用方式有很大的不同。

基于其独特的设计方式和高效的编辑效率，VIM 获得了“编辑器之神”的美誉，而使用 VIM 的程序员通常有着惊人的手速和强烈的极客精神。

VSCode + VIM 快捷键组合

VSCode 是一款完美的编辑器，现在它已经成长为 Github 上最大的开源项目。其官方团队的吕鹏，在他的极客时间专栏《玩转 VS Code》（已绝版）中，花费了大量篇幅来讲解其快捷键设计理念。

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

为了能将 VSCode + VIM 的快捷键组合效率最大化，VSCode 官方团队选择自己亲自维护 VIM 插件。

如以上示例图所示，组合使用 VSCode 快捷键和 VIM 快捷键，能在不使用鼠标的前提下，快速地实现以下操作：

• vib 选中小括号内的代码块
• S Visual 模式下，使用 VSCode VIM 内置的 Surround 插件，在代码块外插入 HTML Tag
• af Visual 模式下，快速选中更大范围代码块
• ⌘⇧\ 跳转至相应的符号对（VSCode 快捷键）
• gd 跳转至代码定义处
• ctrl+o （从代码定义处）跳转回上次代码位置
• ⌘s 保存文件（VSCode 快捷键）

注：本文所有快捷键基于 macOS 配置，Windows 版 VSCode 快捷键主要区别是将 ⌘ 替换成 ctrl，其他 VIM 命令基本一致。

VIM 快速入门

想要精通 VIM 需要花费大量时间进行练习，形成肌肉记忆。而本文的目的，主要是为了让大家能快速上手如何在 VSCode 中使用 VIM（已经会 VIM 基本操作的朋友，可直接跳至下一章节）。

普通编辑器只有 1 种编辑模式，而 VIM 却有 6 种基本模式和 5 种派生模式。而在 VSCode 中，我们只需要使用以下三种模���，即可大幅提升编辑效率：

• Normal Mode：默认模式，通常用于光标位置切换，使用复制、粘贴、删除等命令；在其他模式下，按下 ESC 键，即可回到 Normal Mode；
• Insert Mode：插入模式，在 Normal 模式下，按下 i 或 o 等键，即可进入插入模式；
• Visual Mode：可视化模式，一般用于文本的选择，Normal 模式下，按下字母 v 即可进入可视化选择模式。

建议没有用过 VIM 的同学，安装上 VSCode VIM 插件后，按以下命令熟悉一下：

1. ⌘ ⇧ P Toggle VIM Mode。如果按下 ESC 键后，光标形态没有变化，则说明 VIM 插件未生效，继续 Toggle 切换，在编辑器左下角会显示当前模式；
2. ⌘ N 新建一个文档，按下 i 进入 Insert Mode。键入 hello world；
3. 按下 ESC 回到 Normal Mode。按下 yyp 复制并粘贴该行；分别通过 hjkl 键来改变光标四个方向的位置；
4. 按下 v 键进入 Visual Mode，继续按下 iw ，选中光标当前位置所在的单词，最后按下 d 删除该单词。

macOS VSCode VIM 插件配置

在 VSCode Settings 设置中，加入以下配置，能让 VSCode 和 VIM 结合的更好：

{
  // VIM 使用系统剪切板，将 ⌘C ⌘V 的内容和 YP 打通
  "vim.useSystemClipboard": true,
  // VIM 将以下快捷键返回给 VSCode 处理，效果是既可以使用 VIM 光标移位快捷键，也可以使用 VSCode 快捷键来移位
  "vim.handleKeys": {
    "<C-a>": false,
    "<C-e>": false,
    "<C-b>": false,
    "<C-f>": false,
    "<C-n>": false,
    "<C-p>": false,
  },
  // Normal 模式下将 Ctrl+j 绑定成 VIM 的 Ctrl+d 向下翻页效果
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": [
        "<C-j>",
      ],
      "commands": [
        "extension.vim_ctrl+d"
      ]
    },
    // <leader> 键默认为 \，按下 \f 能在 finder 中选中当前文件
    {
      "before": ["<leader>", "f"],
      "commands": ["workbench.action.files.revealActiveFileInWindows"]
    }
  ],
}

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容

在 macOS VSCode 中默认的 Ctrl+d 为向后删除，安装上 VIM 插件后，默认的删除命令会被 VIM 的翻页命令覆盖。我们可以在 VSCode Keyboard Shortcuts 中配置以下内容，删除 VIM Ctrl+d 快捷键绑定（翻页由以上配置重新定义为 Ctrl+j）：

[
  {
    "key": "ctrl+d",
    "command": "-extension.vim_ctrl+d",
    "when": "editorTextFocus && vim.active && !inDebugRepl"
  },
]

VIM Cheatsheet

VIM 的快捷命令非常多，一般人很难全部记住。但幸运地是，在 VSCode VIM 中，你可以同时使用 VSCode 快捷键加鼠标来解决问题，这要比直接使用 VIM 命令行的体验好得多。

以下是一些不错的 VIM 快捷 Cheatsheet，希望对你有所帮助。

https://www.barbarianmeetscoding.com/boost-your-coding-fu-with-vscode-and-vim/cheatsheet/

https://github.com/skywind3000/awesome-cheatsheets/blob/master/editors/vim.txt