🎮前端 Vim 使用心得,敲代码就像在打街机(图文结合)

前言

大家好,我是 pakjeon。

本文将介绍我在实际工作过程中,使用 Vim 编辑的一些心得,给没有接触过的同学展示下它的魅力。 平时上班在 IDE 里编辑代码,竟然也能像打街机一样有趣?

问:什么是 Vim?

答:Vim 是一款文本编辑器,它是 Unix 和类 Unix 系统中最常用的文本编辑器之一。在 Vscode、Webstorm 等主流 IDE 可以安装 Vim 插件,使用 Vim 编辑模式。
问:作为一名前端开发,需要学吗?

答:并不必要,机缘巧合,兴趣使然。当你碰到需要上服务器编辑 Nginx 配置、查流水日志等场景,发现有这个技能还是挺香的。(当初学习主要是为了装逼)

启动!

让我们进入游戏,脑补你在控制一个角色(在 IDE 里的光标就是你的角色),在 IDE 里打怪!

游戏规则

你的角色可以在四种模式中切换,它们有不同的技能。

  1. 正常模式(Normal-mode)- 控制角色左右上下移动,闪转腾挪,施放技能。
  2. 插入模式(Insert-mode)- 可以输入你的代码,攻击产品经理给的需求。
  3. 命令模式 (Command-mode)- 输入秘籍,比如搜索、设置高亮等。
  4. 可视模式 (Visual-mode) - 相当于进入鼠标左键拖选文本的模式。

操控 - 移动

移动角色 ←↓↑→(hjkl)
上点强度,一些"闪现"跳跃操作: w、b、e、0、$、gg、G、%

操控 - 放技能

看完移动,来点技能(复制y、粘贴p、删除d、撤回u)
定点控制技能(删除x、改变r单个字符)
精准索敌(搜索光标所处单词之 * 操作,nN 操作)

切换模式

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

进阶 - 组合技

大的来了。前面介绍的移动、技能、点控,暂且称之为"元操作",其实这些元操作是可以跟其他操作组合,变成一个更强大的技能。

组合数字n,代表重复n次

比如:

  • j是向下移动一行,可以理解成n1,那么5j就是向下移动5行。
  • dd是删除一行,那么d5d就是删除5行。
  • 如此类推。。。y5y复制5行、5p粘贴5次。
元操作组合,尽情发挥你的想象~

比如:

  • d这个元操作 可以看做是删除deletew这个元操作 看做是单词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 陪你一起打怪吧!

相关推荐
不见长安见晨雾26 分钟前
Linux:vim编辑技巧
linux·编辑器·vim
小O_好好学9 小时前
vi | vim基本使用
linux·编辑器·vim
-SGlow-9 小时前
Linux相关概念和重要知识点(4)(自举、vim)
linux·运维·vim
(⊙o⊙)~哦1 天前
vim的 配置文件
linux·编辑器·vim
Tranquil_ovo5 天前
【Linux】【Vim】Vim 基础
linux·vim
区区一散修5 天前
Linux第五章 文本编辑器vim
linux·vim
绝活蛋炒饭5 天前
Linux环境基础开发工具---vim
linux·运维·vim
橘子真甜~5 天前
Linux基础3-基础工具2(vim详解,gcc详解)
linux·运维·面试·编辑器·vim·学习方法
FLPGYH6 天前
重头开始嵌入式第三十九天(数据结构 栈)
linux·数据结构·链表·vim
一心只为学7 天前
Linux中vim常用命令大全
linux·运维·vim