现在开始用vim开发Web前端吧

如果你是一名web前端工程师并且没有vim使用经验的话，那么这篇博文就是为你准备的。

vim是什么

vim是一款文本编辑器应用程序。和一般的编辑器程序不同，vim有以下特点:

1. 运行在终端,而非桌面
2. 不需要使用鼠标进行操作，所有操作都通过键盘实现
3. Linux系统默认安装这款编辑器

为什么用vim

前端最流行的编辑器应该是sublime text和web storm，这两个应用程序确实也非常好用，能有效的提高前端的开发效率。那为什么我们还要使用vim来做前端开发呢，原因如下:

1. vim的命令系统使得开发者可以在编码过程中无需操作鼠标，两只手可以全程专注在敲击键盘上，这样无论对于提升开发效率还是开发者编码的体验都会有帮助。
2. vim界面十分简洁，并且能够自由、灵活的打开、切换多窗口。
3. vim和sublime一样，有着强大的插件系统，类似zen coding，多行编辑，语法检查等功能都可以在vim上实现
4. Web前端开发人员难免需要上服务器查看或修改代码，而所有的Linux服务器上都自带vim，此时如果这名前端会使用vim的话必然对工作有很大帮助。

vim相关的概念

命令

vim中的操作都是通过命令来实现的，比如移动光标、复制、粘贴等，都有对应的命令。
下文会介绍一些常用的命令。

模式

vim的部分命令有对应的模式，如果要使用这些命令，首先要进入命令所属的模式。

各个模式的关系如下:

对上图的解释

1. 默认模式处于最顶层，在任意模式下，按ESC进入默认模式
2. VISUAL, VISUAL BLOCK和命令行模式之间可以通过命令互相切换

安装vim

心动不如行动，先安装vim吧。对于安装，网上有很多教程，如：

Windows中的vim安装教程

Linux中的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

需要解释的是:

1. yy和y复制是指的yank，yank所复制的内容只能通过p粘贴，而上面的常规复制则可以将vim里的内容复制并通过ctrl/command v 复制到别处。
2. vim里除了上面的常规删除以外并没有原生的快速删除的命令(不过，你可以自定义命令)，像x,dd等命令都是自带了yank。如你想删除”hello world”里的d，光标移到d，再按x，然后你再按p的话就粘贴了d。
3. 常规删除的内容不可以通过p粘贴，只能通过常规粘贴命令进行粘贴。

INSERT模式

以下任意命令都可以进入编辑模式。

在光标当前位置输入 i
在光标当前位置的下一格输入 a
在光标当前位置所在行的开头开始输入 o
在光标当前位置所在行的下一行开始输入 o
在光标当前位置所在行的上一行开始输入 O

进入编辑模式后，vim左下角出现 – INSERT –，此时可以像在普通编辑器里一样开始写代码了。因为键盘输入直接被写在了当前的文件里，所以vim命令此刻都“失效”了。

退出编辑模式的命令 ESC

VISUAL模式

进入该模式的命令 v
退出该模式的命令 ESC
进入编辑模式后，vim左下角出现 – VISUAL –，一般在需要选择文本的时候进入这个模式。

在VISUAL模式下移动光标的命令和普通模式下是一样的，区别是光标移动时会选中移动路径上的文本。

选中后按y复制，按x或者d剪切，

VISUAL模式下一次性替换整块文本:

1. 选中并yank复制(按键y)马上要用来替换的内容
2. 移动光标选中需要被替换的文本
3. ctrl r
4. 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的使用小窍门:

1. o命令打开文件后可以 ctrl o回到NerdTree
2. t命令打开新tab后，可以按gt切换到下一个tab，按gT切换到前一个tab
3. VISUAL模式下按:(冒号)vsp 可以打开一个较窄的窗口，这样大小的窗口用来显示NerdTree比较合适。

总结

vim作为一款经典的老派编辑器能够存在这么多年，一定有它存在的理由。刚接触时可能会有一些不适应，但是如果能够坚持使用，其实并不需要多久，就能快速高效的使用vim编程了。希望本文能带你进入vim的世界。

关于vim，如果你有任何问题可以来这里一起讨论。