看完这篇你也能在VsCode中流畅使用Vim。

Daes
448 阅读4分钟

前言

讲一个故事，有一名叫小吴的同学找到小黄同学帮忙看bug，小吴看到小黄写代码行云流水，基本无接触鼠标🖱；感觉很厉害。所以小吴就开始了他的学习vim之路，好了到这里结束了上面是编的故事， 哈哈哈哈。

vim的学习曲线相当的大（各种文本编辑器的学习曲线），一开始看到一堆VIM的命令分类，你一定会对这个工具失去兴趣；我们可以在vscode装vim插件一步一步接触，就像玩游戏一样，进行实战，可以带来不一样的体验。 这玩意非常难学，但是却不可思议地好用。

准备工作

使用的主要是macOS系统，如你是window也在网上找到相关按键对应这里就不过多阐述。 开发环境、工具：

  1. Vscode
  2. vscode插件：vim

image.png 3.手✋🏻

ok，接下来就开始我们实战入门教学

开始

非常好，到这里，你已经安装好vscode和vim插件。接下来请不用做任何操作，请先阅读。

  • 此时你发现光标和正常输入状态时是不一样的。此时默认是在Normal模式状态下 image.png

  • 想进入输入状态需要进入到Insert模式下，按下键盘上的i建即可进入此模式。 image.png 这时候就可以输入文本了。

  • 如果想回到 Normal 模式，请按 ESC 键即可进入。

入门

很棒，到这里你已经学会了如何在Insert 和 Normal 模式下切换。 下面将学习一些命令，让我们能生存下来：

  • i → Insert 模式，按 ESC 回到 Normal 模式.
  • x → 删当前光标所在的一个字符。
  • :wq → 存盘 + 退出
  • :w 存盘
  • :q 退出
  • dd → 删除当前行，并把删除的行存到剪贴板里
  • p → 粘贴剪贴板

推荐:

  • hjkl (强例推荐使用其移动光标，但不必需) →你也可以使用光标键 (←↓↑→). 注: j 就像下箭头。
  • :help <command> → 显示相关命令的帮助。你也可以就输入 :help 而不跟命令。（陈皓注：退出帮助需要输入:q）

学到这里，你已经入门，这时你可以进行简单的一些编辑内容操作了；这些命令都是基本功，必须使用到肌肉记忆，为后续做一些高级命令打好基础。

常规操作

上面的那些命令只能让你生存下来，接下来我们需要学习更多命令，让你能使用一些技能。 注意📢：所涉及的命令都是在Normal模式下使用，如果你不知道现在在什么样的模式，可以看vscode左下角。

  • 操作
    • d Delete 删除
    • c Change 修改
    • y Yank 复制
    • p Put 粘贴
    • ～ 反转大小写

由于平时写代码会进行行的操作，Vim设计了一些快捷命令:

  • 操作
    • dd 删除一行
    • yy 复制一行
    • cc 修改一行
    • D 删除到行尾
    • C 修改到行尾

上下左右移动光标平时使用的是方向键，但vim中提供了能在键盘中舒适的地方进行移动：命令就是 hjkl，它们分别代表光标的上下左右。

上面的命令基本都是一些常规使用的操作，此时我们就要进入正题了。 我觉得使用Vim时就像与它进行交流，通过它规定的语言和它进行沟通，而不是所谓的死记硬背这些命令。

比如一下场景,一段实例代码。

const msg = 'hello world'

想删除hello的操作： 将光标移动到hello的第一个字符上h， 此时使用命令dw，就可以进行删除。 这个命令的缩写：delete word。 如果你此时的光标是在hello任意一个字符上时，可以通过daw。 可以理解为：delete all word。 如果你此时想进行修改，可以使用cd, 就会将hello进行删除并进入Insert模式中，可以理解为：change word

还有一些其他命令：

移动

  • 0 : 跳到行首
  • ^ : 跳到从行首开始的第一个非空字符
  • $ : 跳到行尾
  • gg : 跳到第一行
  • G : 跳到最后一行
  • nG : 跳到第 n 行
  • :n : 跳到第 n 行

通过当前行字符跳转光标

  • f{char} : 光标跳到下个 {char} 所在位置
  • F{char} : 反向移动到上一个 {char} 所在位置
  • t{char} : 光标跳到下一个 {char} 的前一个字符的位置
  • T{char} : 光标跳到下一个 {char} 的后一个字符的位置
  • ; : 重复上次的字符查找命令
  • , : 反向查找上次的查找命令

结合一些i和a的操作

  • di( : 删除括号内的内容
  • di{ : 删除大括号内的内容
  • diw : 删除光标所在的单词
  • da( : 删除括号和括号内的内容
  • da{ : 删除大括号和大括号内的内容

其他

  • u : 撤销
  • Ctrl + r : 恢复撤销
  • p : 粘贴
  • x : 删除当前光标所在的字符
  • r : 替换当前光标所在的字符

学完以上这些命令，你完全入门了，请大胆在平时开发中使用上吧。

最后

因为每个人的习惯不一样，我会进行改一些快捷键替换之前的键， 例如ESC、i 等等。 这里附上我的在vscode中配置的json。

  "vim.leader": " ",
  "vim.handleKeys": {
    "<C-d>": true,
    "<C-s>": false,
    "<C-z>": false
  },
  "vim.insertModeKeyBindings": [
    // 退出插入模式
    {
      "before": ["j", "k"],
      "after": ["<Esc>"]
    }
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    // 修改跳转前后快捷键
    {
      "before": ["H"],
      "after": ["^"]
    },
    {
      "before": ["L"],
      "after": ["$"]
    },
    // 移动下一个编辑器标签
    {
      "before": ["J"],
      "commands": ["workbench.action.nextEditor"]
    },
    // 移动到上一个编辑器标签
    {
      "before": ["K"],
      "commands": ["workbench.action.previousEditor"]
    },
    {
      // terminal
      "before": [ "leader", "t" ],
      "commands": [ "workbench.action.terminal.toggleTerminal" ],
    },
    // 折叠行
    {
      "before": ["r","r"],
      "commands": ["editor.toggleFold"]
    },
  ],
  "vim.easymotion": true, // 启用easymotion插件 
  "vim.useSystemClipboard": true, // 启用系统粘贴板作为vim寄存器
  // 由vim接管ctrl+any的按键，而不是vscode
  "vim.useCtrlKeys": true,
  // 突出显示与当前搜索匹配的所有文本
  "vim.hlsearch": true,
   // 折叠后光标移动上不进行展开。
  "vim.foldfix": true,

结束语

如果你在vscode中都使用的很顺畅了，这时可以尝试使用基于vim开发的编辑器，例如Neovim。

avatar
文章
阅读
粉丝