vim-notebook

背景

Vim的使用到如今算是有4年多了。期间断断续续也开始使用sublime,notepad+,atom,vscode等现代编辑器。
但是同vim相比,始终少了那种手指在键盘跳舞的感觉。即使很多时候,vim在完成特定任务时候效率有所不如。
但是vim完全依托键盘的理念,始终让我迷醉所以不忍心放弃,尤其是当YouCompleteMe和ternJs的出世,让vim在前端编程上渐渐赶上了IDE的功能。
然而我也仅仅是知道了很少很少部分的vim使用而已。
所以这里打算做记录一下。关于插件,关于配置,关于心得。

我还是执着的认为,各种编辑器层出不穷,但是Vim你完全可以使用一辈子。Geek的感觉,指尖跳舞的感觉,『怀古的情节』,还有专注的力量。

从配置开始说起

我fork了一份github上star最多的vimrc配置。并做了自己的定义和修改。我尽量保持对原来配置的完整的情况进行定义,这样可以保证那一天我再想去merge大神配置时候不会出现太多的配置冲突。
这里是大神的配置amix/vimrc,这里是我的配置que01/vimrc.

虽然大神的配置千锤百炼,但是如果是同为前端的你话,那么还是更加推荐我自己的配置。毕竟作为一名一直紧追前沿的前端从业者,我也许更懂前端开发过程中需要怎样的体验。

个人的vimrc和amix/vimrc的安装还是有区别的。

1
2
3
4
5
6
# 首先是官方的安装走一遍
git clone https://github.com/que01/vimrc ~/.vim_runtime && cd ~/.vim_runtime && sh install_awesome_vimrc.sh
# 个人配置需要的
git submodule init && git submodule update
cd sources_non_forked/YouCompleteMe && sh install.sh
cd sources_non_forked/vimproc && make

当然,如果你不想配置的,我自己做了一份docker的镜像,如果想多地共用,可以直接使用docker来替代本地的vim。==> que01/docker-vim-tiny

这里列举一下自己新加入的插件:

名称简介
YouCompleteMevim补全神器top1
tern for vimjs语气补全引擎
emmetemmet前端都知道
vim-jsxreact的jsx支持
auto-pairs括号自动配对
tabular对其代码
vim-es6es6支持
vim-markdown(替换了原来的)markdown支持
vim-youdao-translater有道翻译,这个还是超级好用!读源代码时候有这个东西如虎添翼
vimshell在vim下进行shell操作。虽然没有zsh好用,但是可堪一用的

vim基础操作

vim的模式

  • 启动Vim后,vim在 Normal 模式下。
  • 让我们进入 Insert 模式,请按下键 i 。此时vim左下角有一个–insert–字样,此时可以进行输入了
  • 如果你想返回 Normal 模式,请按 ESC 键。

vim的移动

简单的移动

j 向下                              k
k 向上                          h       l
l 向右                              j
h 向左

复杂一点的移动

按键行为
0数字零,到行头,本配置有修改,到当前行第一个字母
^到本行第一个不是blank字符的位置(所谓blank字符就是空格,tab,换行,回车等)
$到本行行尾
g_到本行最后一个不是blank字符的位置。
/pattern搜索 pattern 的字符串(陈皓注:如果搜索出多个匹配,可按n键到下一个)

复制粘贴

y负责复制&&p负责粘贴

Undo/Redo

u撤销 &重做。C-r是指Control+r

保存

按键行为
:q!退出不保存
:wq保存并退出
:qa!强行退出所有的正在编辑的文件,就算别的文件有更改
:x相当于:wq但是仅在需要时候才保存

基础篇收尾

这就是基础的东西了,如果觉得不够的话,可以自行爬文《简明 Vim 练级攻略》.这一小节的内容基本来源这里。
之所以不深入,原因在个人,这不是一篇小白文,主要面向用户主要是中级用户。

个人配置快捷键&&有用的按键

这里包含两个部分的内容,一个是插件的快捷键绑定,一个比较有用的一些自带的按键,:开头的是命令。这里为了方便打字,按键都不打尖括号了。

按键作用
loader+yd翻译光标所在单词
ysw(vim-surround系列快捷键
:Tab /=对其=号
:TableFormat在markdown文档中格式化table
loader+o打开buffer列表
C+fctrlP搜索,多次按下可以改变搜索规则
C+ljsdoc激活,在js的function上方按下生成注释
C+Jultisnips补全需要用到这个
Tab&S-TabsuperTab的上下切换
C-d多光标选中
*高亮所有光标下单词,n,p上写切换
gg跳到文件头部
GG调到文件尾部
0跳到当前行第一个字符
I调到当前行首并设为插入状态
A调到当前行末尾并设为插入状态
dd删除当前行
gG,g$删除光标到行末尾
S删除当前行内容,但是不删除行
dw删除一个单词
yw复制一个单词
:split水平切割窗口
:vsplit垂直切割窗口
:close关闭窗口
H移动到可视区域最上一行
L移动到可视区域最下一行
M移动到可视区域中间
:s/aa/bb/g光标所在行出现的所有包含 aa 的字符串中的 aa 替换为 bb
:g/^$/d删除空行
cib光标移动到括号按下,清除括号内部并设为插入
cit同上 html标签内部
ci’ & ci”同上,单双引号

Vim插件

vim插件使用基本是本文的重点所在。当基本掌握了Vim之后,各种各样的Vim插件帮你实现各种IDE才可能具有的高级功能。可以大大提高个人效率和编辑体验.
本文挑重点写一下个人认为非常有用的插件。这些排名不代表优先级,排位仅仅是随兴所至。

vim-youdao-translater

中文用户会知道有个东西叫做有道词典,IT程序🐶会知道有种东西叫做vim。当vim遇到有道词典,那确实是一件赏心悦目的事情。
空口无凭,上个图让大家看看实在的:
youdao
在本配置的中的使用方法:光标移动过去,然后按< loader>yd,如果你不知道什么是loader键,那我不解释了,直接说个人配置的是逗号键:,。
如果你不爱用我配置,那么安装好这个插件以后,在配置里加上如下代码即可:

1
noremap <leader>yd :<C-u>Ydc<CR>

YoucompleteMe&&tern_for_vim

这两个放在一起写是有原因,因为作为前端,这两个插件是配合在一起才能发挥最大用途的。
不过在使用他们之前我们尚需要配置:

  1. cd&& touch .tern-project # 到项目文件夹下创建.tern-project
  2. 粘贴配置文件到.tern-project #配置可以去ternjs官网看文档

个人一般通用的:

1
2
3
4
5
6
{
"libs": [
"browser",
"jquery"
]
}

这里让不知道的童鞋看看它们结合的强大:
ymcd1
ycmd2
通过上面的代码可以看到,vim此时已经可以做到一定程度语意补全,即很多ide扯到的智能感知。
如果上面那两个图还没能说明什么,那么再看下面这个图,你会明白为什么说它是vim补全的top1:
ycmd3
就是这样,它不仅进行了补全,还智能识别了每个属性的值的类型。有了这两货,摆脱IDE真的不是什么梦了。

vim-surround

vim-surround是个超级神器,如果说有些插件是长枪,一扫一大片的话,那么vim-surround可以说是弓箭,专攻一点。

添加括号(html标签中空格请忽视):

start命令end
H*ello worldysw(H(ello) world
H*ello worldysaw((Hello) world
H*ello worldys$(H(ello world)
H*ello worldys2aw((Hello world)
Hello wo*rldyss((Hello world)
Hello wo*rldvlllllS(Hel(lo wor)ld)
*Hello worldVS< p>Hello world< /p>

修改括号(html标签中空格请忽视):

start命令end
[H*ello world]cs[< p>< p>Hello world</ p>
< p>H*ello world</ p>cst< div>< div>Hello world</ div>
< div>H*ello world</ div>cst((Hello world)

删除括号:

start命令end
(H*ello) worldds(Hello world
< p>Hello world</ p>dstHello world))

tabular

tabular是一个用来对齐文本的插件,功能非常强大,对代码有洁癖和美观要求的人来说是非常实用的。
具体的官方文档可以看这里: 官方文档

这个使用比较简单,视频里面的都可以用,不过最后的设置个人测试了一下似乎没有效果。

不过这个插件使用还是非常简单的。

1
2
3
4
5
6
7
8
9
10
11
12
13
one = 1
two = 2
three = 3
four = 4
// :Tab /=
{
title: "Aligning assignments"
h264Src: "/media/alignment.mov",
oggSrc: "/media/alignment.ogv"
posterSrc: "/media/alignment.png"
duration: 320
}
// :Tab /:

简单说就是运行 :Tab /<分隔符号>
当然,这么说不是最准确的表达,不过初步使用就这样理解无所谓了。

vim-markdown

vim-markdown依赖tabular。

下面是一些快捷键。

1
2
3
4
5
6
7
8
9
10
11
]]: go to next header. <Plug>Markdown_MoveToNextHeader

[[: go to previous header. Contrast with ]c. <Plug>Markdown_MoveToPreviousHeader

][: go to next sibling header if any. <Plug>Markdown_MoveToNextSiblingHeader

[]: go to previous sibling header if any. <Plug>Markdown_MoveToPreviousSiblingHeader

]c: go to Current header. <Plug>Markdown_MoveToCurHeader

]u: go to parent header (Up). <Plug>Markdown_MoveToParentHeader

然而这个感觉平时不是很用得上,虽然可能上还是很有用的,不过我个人觉得还是表格格式化最有用:
使用 :TableFormat 可以将排版稀烂的表格格式化好,这里给个稀烂的例子

1
2
3
4
|name|age|
|zhangsan|15|
|lisi|4|
|wangerxiao|18|

光标移动到这个table的区域内,运行上面的命令,即可将table格式化好.

NERD Tree

NERD Tree是最常用的插件了。就个人经验来说,它甚至是最常用的。

盗来的图,哈哈:

本配置中的开关项目树的方法: < loader> + nn

快捷键:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
o       在已有窗口中打开文件、目录或书签,并跳到该窗口
go 在已有窗口 中打开文件、目录或书签,但不跳到该窗口
t 在新 Tab 中打开选中文件/书签,并跳到新 Tab
T 在新 Tab 中打开选中文件/书签,但不跳到新 Tab
i split 一个新窗口打开选中文件,并跳到该窗口
gi split 一个新窗口打开选中文件,但不跳到该窗口
s vsplit 一个新窗口打开选中文件,并跳到该窗口
gs vsplit 一个新 窗口打开选中文件,但不跳到该窗口
! 执行当前文件
O 递归打开选中 结点下的所有目录
x 合拢选中结点的父目录
X 递归 合拢选中结点下的所有目录
e Edit the current dif

双击 相当于 NERDTree-o
中键 对文件相当于 NERDTree-i,对目录相当于 NERDTree-e

D 删除当前书签

P 跳到根结点
p 跳到父结点
K 跳到当前目录下同级的第一个结点
J 跳到当前目录下同级的最后一个结点
k 跳到当前目录下同级的前一个结点
j 跳到当前目录下同级的后一个结点

C 将选中目录或选中文件的父目录设为根结点
u 将当前根结点的父目录设为根目录,并变成合拢原根结点
U 将当前根结点的父目录设为根目录,但保持展开原根结点
r 递归刷新选中目录
R 递归刷新根结点
m 显示文件系统菜单
cd 将 CWD 设为选中目录

I 切换是否显示隐藏文件
f 切换是否使用文件过滤器
F 切换是否显示文件
B 切换是否显示书签

q 关闭 NerdTree 窗口
? 切换是否显示 Quick Help

bufexplorer

有了bufexplorer就可以浏览和管理buffer了。tab虽然也是vim中一个重要概念,但是个人还是更喜欢直接使用buffer而不用tab。

激活bufexplorer的快捷键是 < loder>+o;
激活以后是这样的:
buffer

我们是用jk进行上下移动,按d删除一个buffer,按enter进入光标所在的buffer。当我们编辑多个文件时候就是这样简单.

ctrlp

用惯了sublime和atom的C-p吧?这个插件就是用来解决这个痛点(如果你没用试过但是有这个编辑器强烈推荐试试,如果没有就智能告诉你,这是一个项目内部模糊检索文件功能),就算有NERD tree,但是如果你清晰记得文件名中某个单词,之间模糊检索会更快!

虽然C-p是默认的按键绑定,但是这份配置绑定到了C+f.初次使用需要检索全局文件项目很大就会比较慢,但是如果小项目几秒就好了。效果图是这样的:
ctrlP

mru.vim

MRU是啥?Most Recently Used——最近打开最多的。这个插件倍整合到ctrlP了。如果想使用它,那么按下 C-f即可,当你多次按下C-f会在不同检索方式中切换,其中就会有MRU.

vim-fugitive

好吧,vim绑上了git,这一定是在犯规!vim-fugitive是一个vim中使用git的wrapper——原谅我很不好翻译这个词汇.

基本使用:

gitfugitiveaction
:Git checkout %:Gread将当前文件反转至上次的checkout状态
:Git rm %:Gremove从Git中删除该文件,并且vim中也删除该文件的buffer
:Git mv %:Gmove重命名当前的文件名以及对应的buffer名
:Git commit:Gcommit提交,可以使用ctrl+n来补全
:Git blame:Gblame查看当前文件每一行的最后一次修改都是谁完成的
:Git status:Gstatus打开一个git status命令的窗口.Ctrl+n和Ctrl+p可以在文件中上下移动

:Gstatus的内部命令

命令行为
open current file in the window below
prun git add –patch for current file
Cinvoke :Gcommit

vim-jsdoc

你不一定听过这个插件,但是一定听过sublime的DocBlockr。
什么?你没听说过?好吧,看下面的代码:

1
2
3
4
5
6
7
/**
* [foobar description]
* @param {[type]} baz [description]
* @param {[type]} quux [description]
* @return {[type]}
*/
function foobar (baz, quux) { }

vim下没有DockBlockr,但是你猜到了,vim-jsdoc可以做到同样的事情,而且它可以做的更好——依托灵活的配置。

1
2
3
4
5
"如果你只需要同DockBlockr一样的行为仅仅需要第一行配置
nmap <silent> <C-l> ?function<cr>:noh<cr><Plug>(jsdoc)
"加上这两行后会在底部ex命令行逐个提问类型 描述(推荐,好处是不需要自己移动光标去写了,而且更容易写出标准的注释)
let g:jsdoc_allow_input_prompt=1
let g:jsdoc_input_description=1

vim-easymotion

过千的star说明一切,这个插件给vim以更灵活的移动方式.定位单词不在需要按好多次jkhl。
本来想自己写下的,不过有人比我写的更好更细心,那么,就引用一下:
《VIM插件: EASYMOTION[快速跳转]》;

ultisnips

去除了snipmate,换了ultisnips,比snipmate更好的补全工具。配合vim-snippets以后,可以发挥非常大的作用,常用的代码补全都有了。

在本配置内的使用方式是: 输入短标记以后会出现下拉pop弹框,按tab切换到目标位置,然后按下< c+j>即可,具体如图,这是没有按下c-j。

按下c-j马上就变成了

1
2
3
4
5
if(true){

}else{

}

supertab

这个插件就是用< Tab>来替换< c-n>的,< S+Tab>等同于< s-p>

vim-multiple-cursors

4k5的star,只能说sulime的< c+d>好用的不行。
这里做了一些配置:

1
2
3
4
5
6
let g:multi_cursor_use_default_mapping=0
" Default mapping
let g:multi_cursor_next_key='<C-d>'
let g:multi_cursor_prev_key='<C-p>'
let g:multi_cursor_skip_key='<C-x>'
let g:multi_cursor_quit_key='<Esc>'"

按下< c+d>就可以像sublime里面一样任性的< c+d>了!

参考

《vim插件介绍-Fugitive》;
《VIM插件: EASYMOTION[快速跳转]》;
《简明 Vim 练级攻略》.
《VIM插件: MULTIPLE-CURSORS》;