前言
大家好,我是 pakjeon。
本文将介绍我在实际工作过程中,使用 Vim 编辑的一些心得,给没有接触过的同学展示下它的魅力。 平时上班在 IDE 里编辑代码,竟然也能像打街机一样有趣?
问:什么是 Vim?
答:Vim 是一款文本编辑器,它是 Unix 和类 Unix 系统中最常用的文本编辑器之一。在 Vscode、Webstorm 等主流 IDE 可以安装 Vim 插件,使用 Vim 编辑模式。
问:作为一名前端开发,需要学吗?答:并不必要,机缘巧合,兴趣使然。当你碰到需要上服务器编辑 Nginx 配置、查流水日志等场景,发现有这个技能还是挺香的。
(当初学习主要是为了装逼)
启动!
让我们进入游戏,脑补你在控制一个角色(在 IDE 里的光标就是你的角色),在 IDE 里打怪!
游戏规则
你的角色可以在四种模式中切换,它们有不同的技能。
- 正常模式(Normal-mode)- 控制角色左右上下移动,闪转腾挪,施放技能。
- 插入模式(Insert-mode)- 可以输入你的代码,攻击产品经理给的需求。
- 命令模式 (Command-mode)- 输入秘籍,比如搜索、设置高亮等。
- 可视模式 (Visual-mode) - 相当于进入鼠标左键拖选文本的模式。
操控 - 移动
移动角色 ←↓↑→(hjkl)




上点强度,一些"闪现"跳跃操作: w、b、e、0、$、gg、G、%








操控 - 放技能
看完移动,来点技能(复制y、粘贴p、删除d、撤回u)


定点控制技能(删除x、改变r单个字符)


精准索敌(搜索光标所处单词之 * 操作,nN 操作)

切换模式
- 当前处于正常模式,可以切换到插入模式,如下。(插入模式就可以键入实际的字符啦)

- 当前处于插入模式,想切换回正常模式,可以按键盘的
esc
或者ctrl + {
,本人喜欢后者,因为双手可以始终摆在键盘中央,可以随时切换其他操作。而前者容易误触。 - 当前处于正常模式,可以切换到命令模式,按
/
进入命令模式,可以进行模式匹配搜索、设置显隐行号、设置搜索高亮等,在 IDE 环境很少用到,就不上演示图了. - 当前处于正常模式,可以按
v
切换到可视模式(相当于用鼠标按住左键来选择)。这里直接演示可视模式我们可以干些什么。

进阶 - 组合技
大的来了。前面介绍的移动、技能、点控,暂且称之为"元操作",其实这些元操作是可以跟其他操作组合,变成一个更强大的技能。
组合数字n,代表重复n次
比如:
j
是向下移动一行,可以理解成n
是1
,那么5j
就是向下移动5
行。dd
是删除一行,那么d5d
就是删除5
行。- 如此类推。。。
y5y
复制5
行、5p
粘贴5
次。

元操作组合,尽情发挥你的想象~
比如:
d
这个元操作 可以看做是删除delete ,w
这个元操作 看做是单词word ,那么组合起来dw
当然就是删除单词 啦!(其实删除的字符会暂存在剪切板,按p
可以粘贴出来)c
这个元操作 可以看做是剪切cut并进入插入模式 ,cw
上面已经演示过啦。y
这个元操作 看做是复制 ,那yw
相信也不必多说,聪明的你肯定已经知道组合技的威力了。
奥义 - 组合数字n和元操作
比如:
y30G
从光标所处行复制到文本的第30行d3w
从光标所处单词往后删除3个单词- 到这里,可以发挥你的脑洞大胆想象了
现在你能看懂下图包含了什么操作了吗?

结语
本人日常工作中会用到的部分 Vim 实际操作就演示到这了。注意,这不是一篇正经的教程,只是让读者朋友们浅尝一下 Vim 编辑的魅力。如果有读者朋友因为看到这篇分享而对 Vim 编辑感兴趣,推荐你使用vimtutor
来学习(学习用时仅需 25-30 分钟入门)
vimtutor 教程打开方法:
macOS、Linux :打开一个终端,输入
vimtutor
并回车;Windows :安装了 Git,随便空白地方右键菜单,选择
Git bash here
,然后在打开的窗口输入vimtutor
并回车。提示:可以强迫自己在工作环境安装 Vim 编辑插件,在日常工作中多锻炼,少碰鼠标,形成肌肉记忆。
日常枯燥的编码时光,就让心爱的键盘和 Vim 陪你一起打怪吧!