新编辑器之神 VSCode VIM

@kaiye 2019-10-31 11:09:09发表于 kaiye/kaiye.github.com

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

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

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

VSCode + VIM 快捷键组合

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

为了能将 VSCode + VIM 的快捷键组合效率最大化,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 模式下,按下 io 等键,即可进入插入模式;
  • 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"]
    }
  ],
}

在 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