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

安装与配置

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

image-20220315113300393

到 setting.json 中进行设置

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

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

模式

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

image-20220315141253723

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

image-20220315142945593

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

进入插入模式有以下按键

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

image-20220315143613049

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

移动光标

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

image-20220315144629731

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

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

按键 执行的操作
w 跳转到下一个单词的开头
b 跳转到本单词或上一个单词的开头（取决于光标的位置）
e 跳转到本单词或上一个单词的末尾（取决于光标的位置）
ge 跳转到上一个单词的末尾

此外还有行级的操作

按键 执行的操作
0 移动行行首，第 0 列
^ 移动到本行第一个非空字符，不包含行首缩进（速记： 正则，$同样）
$ 移动到本行最后一个字符
gg 移动到文件第一行；可以与数字键组合进行指定行号跳转，如6gg跳转到第 6 行
G 移动到文件最后一行

通过搜索进行跳转

按键 执行的操作
f{char} 移动到下一个{char}字符
F{char} 反向移动到上一个{char}字符
t{char} 移动到下一个{char}字符的前一个字符
T{char} 反向移动到上一个{char}字符的后一个字符
; 重复上次的字符查找命令
, 反向操作上一次的字符查找命令

操作符

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

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

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

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

动作

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

image-20220315153754424

主要的操作符有

  • 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>
  )
}

大小写转换

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

按键 执行的操作
~ 反转光标下字符的大小写
3~ 反转从光标开始 3 个字符的大小写（数字可以为任意值）
g~~ 反转当前行的左右字母大小写
gUU 将当前行所有字母改为大写
guu 将当前行所有字母改为小写
gUaw 将光标所在单词改为大写
guaw 将光标所在单词改为小写

鼠标动作

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

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

easymotion

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

按键 执行的操作
<leader><leader> s <char> 搜索字符
<leader><leader> f <char> 向后查找字符
<leader><leader> F <char> 向前查找字符
<leader><leader> t <char> 直到字符向前
<leader><leader> T <char> 直到字符向后
<leader><leader> w 单词转发的开始
<leader><leader> b 单词开头向后
<leader><leader> l 匹配单词的开头和结尾，camelCase，after_和 after #forwards
<leader><leader> h 匹配单词的开头和结尾，camelCase，after_和 after#向后
<leader><leader> e 词尾转发
<leader><leader> ge 词尾向后
<leader><leader> j 前锋线起点
<leader><leader> k 行首向后
<leader><leader> / <char>... <CR> 搜索 n 个字符
<leader><leader><leader> bdt 直到字符
<leader><leader><leader> bdw 词的开头
<leader><leader><leader> bde 词尾
<leader><leader><leader> bdjk 线的开始
<leader><leader><leader> j JumpToAnywhere 动作；默认行为匹配单词的开头和结尾，驼峰式，之后_和之后#

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

image-20220315191041018

vim-surround

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

按键 执行的操作
y s <motion> <desired> 在由定义的文本周围添加desired环绕<motion>
d s <existing> 删除existing环绕
c s <existing> <desired> existing将环绕更改为desired
S <desired> 在可视模式下环绕（环绕全选）

多光标操作

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

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

image-20220315192241581

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

更多操作

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

赏

前端小白