大概在三个月之前,我就开始和 VIM 磨合,从机键位开始,到改配置。断断续续一直到今天,从难以理解到如今越来越来觉得 VIM 是有好么好用。
我是一个前端开发者,所以不可能和其他 VIMer 一样,做到键盘不离手,在必要调试的时候仍然需要使用鼠标。但是我仍然觉得 VIM 从很大程度上提升了我的效率。
这篇文章主要介绍一些在前端开发过程中,VIM 本身或者其他插件提供的便利功能。
当然如果使用 VIM 作为生产力编辑器自然也离不开 TMUX。

场景

快速添加多行被遗漏的属性
以前几天接到一个的项目为例。 假设现在有一个对象,这个对象的数据是后端给出的,但是后来后端结构变了,把后面的对象又套了一个对象,这时候就在后面有需要打点取属性了。比如需要变成 this.lang.login['btn.in'].fi(后端太草了),那怎么办。在 VIM 中很简单。使用 vib 选中这个文本对象,然后输入命令 norm f]a.fi
1const obj = {
2      title: this.lang.login['title.WB'],
3      desc: this.lang.login['title.N2F'],
4      email: this.lang.login['title.EYE'],
5      forgot: this.lang.login['title.FP'],
6      con: this.lang.login['title.BYCON'],
7      login: this.lang.login['btn.in'],
8      register: this.lang.login['btn.up']
9}
10
11const obj2 = {
12      title: this.lang.login['title.WB'].fi,
13      desc: this.lang.login['title.N2F'].fi,
14      email: this.lang.login['title.EYE'].fi,
15      forgot: this.lang.login['title.FP'].fi,
16      con: this.lang.login['title.BYCON'].fi,
17      login: this.lang.login['btn.in'].fi,
18      register: this.lang.login['btn.up'].fi
19}
Copy
快速定位
在我使用 vscode 的时候,常常需要去找一个具体的文件,当项目路径很深的时候,尤其是目录很多的情况,找一个文件往往要花很多时间。有时可能都忘记了是什么文件名,但是只记得片段,但是这种情况用搜索是搜不到的。
然而在 VIM 有好多模糊查找插件,以 FZF 为例。比如我想找一个文件,它好像有 proxy axios 几个关键字。
快速在作用域之间跳转
使用 % 可以在闭合的作用域内跳转。默认不支持 HTML 的 tag 跳转。但是可以使用 vim-matchup 进行跳转。
注释对齐
这点可能对有强迫症的人来说比较有用。
生成 JSDoc
变量命名方式转换

关于补全

不得不说 vscode 的补全引擎十分之强大,在这我也十分感谢微软把 LSP 开源了,之后诞生了 Coc 这样媲美 vscode 补全的引擎,让移植 vscode 的插件从难倒易。由于 Coc 是用 TypeScript 编写,这让前端开发者移植和开发插件变得更加容易。