为Node.js4配置VIM编辑器

安装必要插件:

pathogen 插件管理

主页:https://github.com/tpope/vim-pathogen

有了这个,就可以像 Textmate / Sublime Text 那样方便地安装卸载插件。后面安装的插件只需将它们放到 ~/.vim/bundle/ 里面独立一个文件夹,pathogen 更会自动加载。卸载时进入到 ~/.vim/bundle/ 找到对应的文件夹删除即可!干净利落。

mkdir -p ~/.vim/autoload ~/.vim/bundle && \ curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

然后在 ~/.vimrc 加入:

execute pathogen#infect()

auto-pairs 自动配对

主页:https://github.com/jiangmiao/auto-pairs

当输入(时会自动补齐),包括中括号,尖括号等。删除的时候更会自动删除右边对应的配对符号。需要在括号之间加一对空格也只需要按一下空格就行。

git clone git://github.com/jiangmiao/auto-pairs.git ~/.vim/bundle/auto-pairs

vim-closetag 自动关闭 HTML 标签

主页:https://github.com/alvan/vim-closetag

snipmate 的html标签太少了,不实用。自动化的更合适,当输入 时会自动补全 。

git clone https://github.com/alvan/vim-closetag.git ~/.vim/bundle/vim-closetag

安装完成之后在 ~/.vimrc 加入配置,指定生效的文件扩展名:

let g:closetag_filenames = "*.html,*.xhtml,*.phtml"

vim-surround 智能包围

主页:https://github.com/tpope/vim-surround

在 Sublime Text 中,如果你选定一段文字。按一下’键或”等有包含意义的按键,编辑器会自动在尾部帮你追加一个对应的结束符。这个插件不但可以完成类似的功能还更加地强大!替换括号,再增加一层括号,追加。都不是问题!并且 html tag 的包含也是支持的哇!

git clone git://github.com/tpope/vim-surround.git ~/.vim/bundle/vim-surround

nerdcommenter 快速注释

主页:https://github.com/scrooloose/nerdcommenter

安装:

git clone https://github.com/scrooloose/nerdcommenter ~/.vim/bundle/nerdcommenter

快速切换注释代码。可视模式下,当前行或选中行后按以下按键进行切换:

1
2
3
4
\cc 注释
\cs “性感注释",貌似在js里面就是函数说明的注释样式
\cu 撤销注释
\ci 按行切换注释`

vim-repeat 自动重复插件

主页:https://github.com/tpope/vim-repeat

这个有点类似宏的东西,配合 vim-surround 功能无比强大。比如说你现在要把 js 中声明的 { a: 'foo': b: 'bar', c: ...} 转化成为一个标准的 json 文档,那么,需要将 a,b,c…加上双引号,’foo’,’bar’,…转换为双引号。利用 vim-surround 可以追加和替换,但是每一次重复打 ysiw” 和 cs’” 也是挺麻烦的。vim-repeat 可以自动帮你重复上一次的命令。只要将光标定位到对应的单上面再按一下.键,命令就自动重复!

git clone git://github.com/tpope/vim-repeat.git ~/.vim/bundle/vim-repeat

NERDTree 文件管理器

主页:https://github.com/scrooloose/nerdtree

即是在侧栏显示一个树型的文件浏览器,几乎稍微现代些的代码编辑器都是内置的。但对于VIM来讲,这个功能还是需要加个插件才能实现。由于要考虑到 shell 环境,这个在 gvim + tab 的环境体验并不良好。但在单 tab 模式下。该有的功能还是一样不少,比 Sublime text 和 Textmate 的文件管理功能都要强大。书签,定义根目录,新建,删除,重命名,移动都是有的。鼠标或键盘操作都支持!

git clone https://github.com/scrooloose/nerdtree.git ~/.vim/bundle/nerdtree

snipemate.vim 代码片断伴侣

主页:https://github.com/msanders/snipmate.vim

实现打几个字符按一下tab自动生成一段格式好的代码的功能,比如 func 生成 function() {} 之类的。具体片断跟语法插件有关,不再细表

git clone git://github.com/msanders/snipmate.vim.git ~/.vim/bundle/snipmate.vim

syntastic 语法错误定位

主页:https://github.com/scrooloose/syntastic

在出错行的行号列显示高亮提示,方便定位出错的行。

git clone https://github.com/scrooloose/syntastic.git ~/.vim/bundle/syntastic

vim-javascript javascript语法插件

主页:https://github.com/pangloss/vim-javascript

基本的javascript语法插件,目前还有在更新

git clone https://github.com/pangloss/vim-javascript.git ~/.vim/bundle/vim-javascript

vim-es6 ES6语法高亮及代码片断

主页:https://github.com/isRuslan/vim-es6

除了语法高亮,还提供了几个 es6 特有的代码片断。

git clone https://github.com/isRuslan/vim-es6.git

eslint

主页:http://eslint.org/

安装:

npm i eslint -g

配置文件: ~/.eslintrc

` { “parser”: “babel-eslint”, “env”: { “es6”: true, “mocha”: true }, “plugins”: [ “react”, “json” ], “ecmaFeatures”: { “jsx”: true, “modules”: true

}, “rules”: { “semi”: 2 } } `

安装 Unite 文件搜索快速打开

这是一个牛逼的插件,可以通过关键字快速打开切换不同的文件。配合 pt (the_platinum_searcher) 可以实现文件夹级别的搜索

首先需要安装 vimproc.vim 让 vim 可以支持异步操作,这个 clone 之后还要编译一下:

git clone https://github.com/Shougo/vimproc.vim.git ~/.vim/bundle/vimproc.vim cd ~/.vim/bundle/vimproc.vim make

然后安装 pt, 具体步骤查看: https://github.com/monochromegane/the_platinum_searcher

最后安装 Unite:

git clone https://github.com/Shougo/unite.vim.git ~/.vim/bundle/unite.vim

安装 tern_for_vim js 自动完成

  1. 安装 tern_for_vim

git clone https://github.com/ternjs/tern_for_vim.git ~/.vim/bundle/tern_for_vim

  1. 安装 ternjs

全局安装:npm i tern -g 或者在 tern_for_vim 里面执行 npm i 也可以

配置 .vimrc/.gvimrc

.vimrc

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
" 启用 pathogen 插件管理
execute pathogen#infect()

" 开启语法着色
syntax on

" 开启文件类型
filetype plugin indent on

" 一个 tab 等于 2 个空格的宽度
set ts=2
set sw=2

" 按 tab 插入对应数量的空格
set expandtab

" 显示行号
set number

" 切换 NERDTree
map <C-t> :NERDTreeToggle<CR>

" 自动缩进
set autoindent

" 允许未保存的情况下打开新的文件或切换 buffer
set hidden

" 退出时若 session 中含有未保存的 buffer 提示保存
set confirm

" 设定自动关闭标签的有效文件扩展名
let g:closetag_filenames = "*.html,*.xhtml,*.phtml,*.js"

" 重复粘贴时按 \p 即可
vnoremap <leader>p "_dP

" 设定 javascript 的语法检测使用 eslint
let g:syntastic_javascript_checkers = ['eslint']

" 设定 jsx 着色对非 jsx 的文件也有效,如 js 文件
let g:jsx_ext_required = 0

"高亮多作的行尾空格
" 1. 新建一个高亮组
highlight ExtraWhitespace ctermbg=red guibg=red
" 2. 匹配行尾空格
match ExtraWhitespace /\s\+$/

" 配置 Unite 使用 pt 搜索
if executable('pt')
let g:unite_source_grep_command = 'pt'
let g:unite_source_grep_default_opts = '--nogroup --nocolor'
let g:unite_source_grep_recursive_opt = ''
let g:unite_source_grep_encoding = 'utf-8'
endif

function! ProjectOpen()
execute ':Unite -no-split file:' . ProjectRootGuess()
endfunction

function! ProjectGrep()
execute ':Unite -no-split grep:' . ProjectRootGuess()
endfunction

" 对 pwd 进行正则搜索
nnoremap <silent> <Leader>g :<C-u>call ProjectGrep()<CR>

" 打开文件 file
nnoremap <silent> <Leader>f :<C-u>call ProjectOpen()<CR>

" 打开文件 file_rec
nnoremap <silent> <Leader>c :<C-u>Unite -no-split file:.<CR>

" 打开 Unite 结果窗口
nnoremap <silent> <Leader><Space> :<C-u>UniteResume -no-split<CR>

" 快速切换窗口
nnoremap <silent> <Leader>w <C-w><C-w>

" 允许 Unite 删除文件
call unite#custom#alias('file', 'delete', 'vimfiler__delete')

" 自动将 pwd 切换到当前文件
set autochdir

" 将 shell 执行结果放到新开的 Scratch buffer。 使用方法: Shell eslint ./
command! -complete=shellcmd -nargs=+ Shell call s:RunShellCommand(<q-args>)
function! s:RunShellCommand(cmdline)
let isfirst = 1
let words = []
for word in split(a:cmdline)
if isfirst
let isfirst = 0 " don't change first word (shell command)
else
if word[0] =~ '\v[%#<]'
let word = expand(word)
endif
let word = shellescape(word, 1)
endif
call add(words, word)
endfor
let expanded_cmdline = join(words)
botright new
setlocal buftype=nofile nobuflisted noswapfile nowrap
call setline(1, 'You entered: ' . a:cmdline)
call setline(2, 'Expanded to: ' . expanded_cmdline)
call append(line('$'), substitute(getline(2), '.', '=', 'g'))
silent execute '$read !'. expanded_cmdline
1
endfunction

" 命令别名
ca shell Shell

" 关闭临时文件
set noswapfile

.gvimrc

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
42
43
44
45
46
" 高度 50 行
set lines=999

" 亮度 140 列
set columns=999

" 颜色主题
colo solarized

" 背影黑色
set background=dark

" 字体
set guifont=Monaco:h13

" 隐藏菜单栏
set guioptions-=m

" 自动开启 NERDTree
"NERDTreeToggle

" 设定 NERDTree 根目录
"NERDTree ~/Projects

" 默认目录
cd ~/Projects

if has("gui_macvim")
" Press Ctrl-Tab to switch between open tabs (like browser tabs) to
" the right side. Ctrl-Shift-Tab goes the other way.
noremap <C-Tab> :tabnext<CR>
noremap <C-S-Tab> :tabprev<CR>

" Switch to specific tab numbers with Command-number
noremap <D-1> :tabn 1<CR>
noremap <D-2> :tabn 2<CR>
noremap <D-3> :tabn 3<CR>
noremap <D-4> :tabn 4<CR>
noremap <D-5> :tabn 5<CR>
noremap <D-6> :tabn 6<CR>
noremap <D-7> :tabn 7<CR>
noremap <D-8> :tabn 8<CR>
noremap <D-9> :tabn 9<CR>
" Command-0 goes to the last tab
noremap <D-0> :tablast<CR>
endif

Share Comments