http://coderunthings.com/2015/12/09/frontendvim/
如果你是一名web前端工程师并且没有vim使用经验的话，那么这篇博文就是为你准备的。
vim是什么
vim是一款文本编辑器应用程序。和一般的编辑器程序不同，vim有以下特点:
- 运行在终端,而非桌面
- 不需要使用鼠标进行操作，所有操作都通过键盘实现
- Linux系统默认安装这款编辑器
为什么用vim
前端最流行的编辑器应该是sublime text和web storm，这两个应用程序确实也非常好用，能有效的提高前端的开发效率。那为什么我们还要使用vim来做前端开发呢，原因如下:
- vim的命令系统使得开发者可以在编码过程中无需操作鼠标，两只手可以全程专注在敲击键盘上，这样无论对于提升开发效率还是开发者编码的体验都会有帮助。
- vim界面十分简洁，并且能够自由、灵活的打开、切换多窗口。
- vim和sublime一样，有着强大的插件系统，类似zen coding，多行编辑，语法检查等功能都可以在vim上实现
- Web前端开发人员难免需要上服务器查看或修改代码，而所有的Linux服务器上都自带vim，此时如果这名前端会使用vim的话必然对工作有很大帮助。
vim相关的概念
命令
vim中的操作都是通过命令来实现的，比如移动光标、复制、粘贴等，都有对应的命令。
下文会介绍一些常用的命令。
模式
vim的部分命令有对应的模式，如果要使用这些命令，首先要进入命令所属的模式。
各个模式的关系如下:
对上图的解释
- 默认模式处于最顶层，在任意模式下，按ESC进入默认模式
- VISUAL, VISUAL BLOCK和命令行模式之间可以通过命令互相切换
安装vim
心动不如行动，先安装vim吧。对于安装，网上有很多教程，如：
vim插件管理工具
上面提到vim有很多插件，所以我们需要一个插件管理工具，我平时使用的是vim-pathogen, 用了这个工具后，就可以轻松的安装各种插件了。
pathogen安装插件的通用步骤:
cd ~/.vim/bundle/
sudo git clone <所要安装插件的github代码库url>
|
删除插件的方法:
cd ~/.vim/bundle/
sudo rm -rf <需要删除的插件文件夹>
或
sudo rm <需要删除的插件文件名>
|
就是这么简单。
vim配置文件.vimrc
vim本身有一些配置项目，这些配置都写在~/.vimrc这个文件里，通过vim ~/.vimrc可以查看或者编辑这个文件。
前端常用插件
以下是我平时前端开发中用到的插件：
NerdTree。必装插件，实现树状文件查找。
YouCompleteMe。必备插件，代码自动补齐。
emmet-vim。必备插件，zen-coding。
vim-multiple-cursors。同时多行编辑。
indentLine。显示代码缩进。
syntastic。语法检查。
javascript-libraries-syntax.vim。JS代码高亮插件。
vim-javascript-syntax。代码折叠。
tern_for_vim。快速跳转到变量/函数定义的地方。
JavaScript-Indent。代码缩进。
开始使用vim
在命令行中通过输入vim <文件名> 开始编辑文件。 如要打开index.html，则输入 vim index.html 。
vim打开文件后，不要急着按键，或者试图通过鼠标来做任何操作，所有的操作都是通过键盘输入来实现的。
以下所有命令如无特殊说明，都是按顺序输入， 如要输入命令 ctrl w l, 则先按ctrl, 然后松开ctrl，再按w，再松开w，再按l，再松开l。其中任何一个按键都不可以按住不放，整个输入过程自然连贯即可。
vim中的命令都是大小写敏感的，所以需要注意各个命令的大小写。
默认模式
vim打开文件后默认直接进入该模式。
进入默认模式的命令: ESC
移动光标
vim中光标的的移动是通过按键实现的。
一般的移动：
上移光标 k
下移光标 j
左移光标 h
右移光标 l
|
快速移动：
直接移动到当前所在行的头部 0 (数字零)
直接移动到当前所在行的尾部 $
光标跳转到目标行 数字 gg ，如跳到第74行,则输入 74gg
光标跳转到文件头部 gg
光标跳转到文件尾部 G
跳转到上一个编辑处 ctrl o
跳转到下一个编辑处 ctrl i
跳转到行内某个字母(行内查找) f 所要查找的内容 ，如跳到当前光标所在行的a字母所在处: f a
然后按;(分号)跳转到下一个a，按,(逗号)跳转到上一个a
跳到下一个单词的开头 w
跳到前一个单词的开头 b
|
窗口大小调整命令(只在打开多个窗口时生效)
增加窗口宽度 ctrl w > 或者ctrl w 数字 > 。加入数字后可以快速增加宽度
减小窗口宽度 ctrl w < 或者ctrl w 数字 < 。加入数字后可以快速减小宽度
增加窗口高度 ctrl w + 或者ctrl w 数字 + 。加入数字后可以快速增加高度
减小窗口高度 ctrl w - 或者ctrl w 数字 - 。加入数字后可以快速增加高度
跳转到上窗口 ctrl w k
跳转到下窗口 ctrl w j
跳转到左窗口 ctrl w h
跳转到右窗口 ctrl w l
|
普通命令
查找 / 需要查找的内容 回车
例如要查找单词hello，则输入/hello ,再按回车键
查找当前光标所在位置的单词 gd
在查找到的结果中快速移动光标:
上移 n
下移 N
取消查找内容高亮 :noh
保存 :w
退出 :q
保存并退出 :wq
强制退出 :q!
复制当前光标所在行 yy
剪切当前光标所在行 dd
剪切多行 数字 dd （数字为需要剪切的行数）
复制当前光标选中的字符 y
剪切当前光标选中的字符 x
剪并进入INSERT模式 s
粘贴 p
undo u
re-undo ctrl r
常规删除 "_d
常规复制 "+y
常规粘贴 command v(MAC OS) 或者 ctrl v(Windows系统)
替换光标当前位置字符 r 然后输入要替换的字母。 例如，要替换"hello world"中的d为o，则先将光标移动到d，然后按r，然后再o
|
需要解释的是:
- yy和y复制是指的yank，yank所复制的内容只能通过p粘贴，而上面的常规复制则可以将vim里的内容复制并通过ctrl/command v 复制到别处。
- vim里除了上面的常规删除以外并没有原生的快速删除的命令(不过，你可以自定义命令)，像x,dd等命令都是自带了yank。如你想删除”hello world”里的d，光标移到d，再按x，然后你再按p的话就粘贴了d。
- 常规删除的内容不可以通过p粘贴，只能通过常规粘贴命令进行粘贴。
INSERT模式
以下任意命令都可以进入编辑模式。
在光标当前位置输入 i
在光标当前位置的下一格输入 a
在光标当前位置所在行的开头开始输入 o
在光标当前位置所在行的下一行开始输入 o
在光标当前位置所在行的上一行开始输入 O
|
进入编辑模式后，vim左下角出现 – INSERT –，此时可以像在普通编辑器里一样开始写代码了。因为键盘输入直接被写在了当前的文件里，所以vim命令此刻都“失效”了。
退出编辑模式的命令 ESC
VISUAL模式
进入该模式的命令 v
退出该模式的命令 ESC
进入编辑模式后，vim左下角出现 – VISUAL –，一般在需要选择文本的时候进入这个模式。
在VISUAL模式下移动光标的命令和普通模式下是一样的，区别是光标移动时会选中移动路径上的文本。
选中后按y复制，按x或者d剪切，
VISUAL模式下一次性替换整块文本:
- 选中并yank复制(按键y)马上要用来替换的内容
- 移动光标选中需要被替换的文本
- ctrl r
- p
VISUAL BLOCK模式
进入该模式的命令 ctrl v
退出该模式的命令 ESC
该模式常常用于快速注释代码，步骤如下
1. 光标移动到需要注释的代码的第一行的开头
2. ctrl v
3. j命令下移至需要注释代码的最后一行
4. I
5. 输入//
6. ESC
|
注意，第六步需要过n秒才会生效
快速缩进多行代码
1. 光标移动到需要缩进的代码的第一行的开头
2. ctrl v
3. j命令下移至需要缩进代码的最后一行
4. I
5. 按空格缩进代码
6. ESC
|
注意，第六步需要过n秒才会生效
命令行模式
进入该模式的命令 :(冒号)
退出该模式的命令 ESC
该模式下常用的命令:
在竖直方向打开新窗口 vsp <所要打开的文件路径> 在水平方向打开新窗口 sp <所要打开的文件路径> |
NerdTree
NerdTree的使用小窍门:
- o命令打开文件后可以 ctrl o回到NerdTree
- t命令打开新tab后，可以按gt切换到下一个tab，按gT切换到前一个tab
- VISUAL模式下按:(冒号)vsp 可以打开一个较窄的窗口，这样大小的窗口用来显示NerdTree比较合适。
总结
vim作为一款经典的老派编辑器能够存在这么多年，一定有它存在的理由。刚接触时可能会有一些不适应，但是如果能够坚持使用，其实并不需要多久，就能快速高效的使用vim编程了。希望本文能带你进入vim的世界。
关于vim，如果你有任何问题可以来这里一起讨论。
赵彪原创，请随意转载，但务必保留作者署名和原文链接
扫一扫
4368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
