Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

新编辑器之神 VSCode VIM #31

Open
kaiye opened this issue Oct 31, 2019 · 0 comments
Open

新编辑器之神 VSCode VIM #31

kaiye opened this issue Oct 31, 2019 · 0 comments

Comments

@kaiye
Copy link
Owner

kaiye commented Oct 31, 2019

这个世界上有 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant