为Node.js4配置VIM编辑器

安装必要插件：

pathogen 插件管理

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

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

1

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

然后在 ~/.vimrc 加入：

1

execute pathogen#infect()

auto-pairs 自动配对

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

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

1

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

vim-closetag 自动关闭 HTML 标签

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

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

1

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

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

1

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

vim-surround 智能包围

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

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

1

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

nerdcommenter 快速注释

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

安装：

1

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 可以自动帮你重复上一次的命令。只要将光标定位到对应的单上面再按一下.键，命令就自动重复！

1

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 的文件管理功能都要强大。书签，定义根目录，新建，删除，重命名，移动都是有的。鼠标或键盘操作都支持！

1

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

snipemate.vim 代码片断伴侣

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

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

1

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

syntastic 语法错误定位

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

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

1

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

vim-javascript javascript语法插件

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

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

1

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

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

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

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

1

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

eslint

主页：http://eslint.org/

安装：

1

npm i eslint -g

配置文件： ~/.eslintrc

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{
   "ecmaFeatures" : {
      "jsx" : true,
      "modules" : true
   },
   "env" : {
      "es6" : true,
      "mocha" : true
   },
   "parser" : "babel-eslint",
   "plugins" : [
      "react",
      "json"
   ],
   "rules" : {
      "semi" : 2
   }
}

安装 Unite 文件搜索快速打开

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

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

1
2
3


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:

1

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

安装 `tern_for_vim` js 自动完成

安装 tern_for_vim

1

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

安装 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

Contents