VSCode 中使用 vim 操作

为什么要使用 Vim 呢？因为真的很高效啊！！！我已经在代码编辑器和浏览器中都安装了类 Vim 插件来提搞我的操作效率。当熟练使用 Vim 命令之后，真的可以扔掉鼠标了。

安装与配置

在 VSCode 的插件商店搜索 vim，找到下图的插件，点击安装，等待安装完毕

到 setting.json 中进行设置

{
  // 开启 easymotion
  "vim.easymotion": true,
  // 设置 leader 键
  "vim.leader": "<space>",
}
复制代码

这里只开启了 easymotion，可以在插件文档中找到更多的配置项，如组合键等

模式

安装完之后可以在编辑器中发现有以下的变化

NORMAL 模式下是不能直接编辑的，这时候需要使用命令来进行操作，按下a,i,o,s可以进入INSERT 模式，就可以跟我们平时一样敲代码了，再按下Esc键回到 NORMAL 模式。按下v键进入 VISUAL 模式，可以进移动光标进行选中区域。

PS: /其实不算命令模式，而是搜索，使用/after搜索全文的 after 字符串，按下 n 键可以跳转到下一个，N 跳转上一个

进入插入模式有以下按键

• a：光标后插入（速记：append，追加）
• A：行末插入
• i：光标前插入（速记：insert）
• I：行首插入，本行第一个非空字符
• o：在光标的下一行新建一行进行输入
• O：光标的上一行新建一行进行输入
• s：光标所在的内容替换
• S：光标所在的行替换

按下v键进入可视模式，可是模式下可以通过操作光标移动来选择文本，那下面就来看一下怎么移动光标

移动光标

本小节内容均是在 NORMAL 模式下

普通模式下可以使用hjkl 键来分别代替左下上右键控制光标移动

除了上下左右移动还可以按照单词为单位进行跳转

此外还有行级的操作

通过搜索进行跳转

操作符

常用的操作符有四个 d(delete)，c(change)，y(yank)，v(visual)

c 和 d 执行操作后会把清除的内容复制到剪贴板（和系统剪贴板不是同一个寄存器）

其中 cdy 三个操作双击都表示对于当前行进行操作，如dd删除当前行

操作符的功能远不止如此，他的关键在于配合动作（motion），下一小节我们就来说一下 motion

动作

vim 的动作主要有两个a(around)和i(inner)，区别主要如下，可以理解为包含和不包含边界

主要的操作符有

• iw/aw：单词
• i(/a(或ib/ab：小括号之间
• i{/a{或 iB/aB：大括号之间
• i”/a”：双引号之间
• i’/a’：单引号之间
• i/a+`：反引号之间
• i</a<：标签之间，多存在于 xml 格式文件
• i[/a[：中括号之间
• it/at：标签（tag）之间，与 i< 不同的是这里主题是标签之间的内容， i<是在标签上
• is/as：句子之间
• ip/ap：段落之间

现在 operator 和 motion 已经有了了解，我们可以进行将二者组合进行操作了

下面来做几个小的实战，根据第一个示例完成剩余的操作

import React from 'react'
export default function vim() {
  // TODO 将数组第2个元素替换为C  => ciwC
  const str = ['A', "C"]
  // TODO 修改泛型为 string
  // TODO 删除泛型
  const ref = useRef<number>(0)
  return (
    // TODO 将标签内容修改为 Hello Vim
    <div>Hello world</div>
    // TODO 删除多余的元素
    <div>need delete</div>
  )
}
复制代码

大小写转换

大小写的切换主要有以下几种

鼠标动作

我们在编辑器中又许多需要鼠标才能实现的操作，cmd+鼠标左键查看定义、鼠标悬停查看描述等，也都可以通过 vim 命令来实现

• gd：查看函数定义（速记：go define）
• gh：查看悬停提示（速记：go hover）
• gt：向后切换标签页（速记：go tab），gT可向前切换，可搭配数字使用如4gt

easymotion

开头我们提到过 easymotion，需要在配置中开启，easymotion 的使用方法如下

用 f 操作为例，界面是下面这样子的，在按下Enter就会有提示字符来进行跳转

vim-surround

光标位于包围结构内部时（小括号、大括号、中括号……）可以通过以下命令进行操作

多光标操作

在编码过程中，我们很多时候需要多行同时编辑来提高编辑效率，在脱离鼠标的情况下，vim 依旧可以实现多行编辑的操作。

使用 gb选中光标所在的单词，继续按下 gb可以继续向后选中同样的单词

然后使用操作符可以进行编辑删除等操作

更多操作

vacode-vim 的操作远不止于此，可以参考我之前转载的一个 vim 的操作