Vim Plugins For Node.js

使用Vim作為Node.js的IDE環境也是個不錯的選擇。

Vim: http://www.vim.org/download.php

Node.js在Github上也有一篇關於Vim插件的推薦文章。

https://github.com/joyent/node/wiki/Vim-Plugins

下面就整理一下配置Vim的一些步驟。

1. Pathogen

這是Vim中用來方便管理插件的插件，有了它，之后介紹的很多插件安裝就會顯得簡單。

在~\vimfiles下新建兩個文件夾，~\vimfiles\autoload和~\vimfiles\bundle

復制pathogen.vim到~\vimfiles\autoload\pathogen.vim

記事本打開~\_vimrc，在最后加入如下代碼：

"自動縮進
set autoindent
"語法高亮
syntax on
"自動檢測文件類型並加載相應的設置
filetype plugin indent on
"不自動換行
set nowrap
"智能對齊方式
set smartindent
"一個tab是4個字符
set tabstop=4
"按一次tab前進4個字符
set softtabstop=4
"顯示行號
set number
"缺省不產生備份文件
set nobackup

call pathogen#infect()

2. Tabular

Vim中的代碼對齊插件，可以實現各種各樣的對齊功能

命令行進入~\vimfiles\bundle，使用git命令

git clone git://github.com/godlygeek/tabular.git

打開Vim，鍵盤輸入建立文檔索引

:helptags ~\vimfiles\bundle\tabular\doc

可輸入下面命令來查看幫助文檔

:help tabular

常用命令如下

:Tab /=        等號對齊
:Tab /:        冒號對齊
:Tab /:\zs     冒號后的文字對齊

效果圖

3. jshint

JS語法查錯插件

命令行進入~\vimfiles\bundle，使用git命令

git clone https://github.com/walm/jshint.vim.git

打開Vim，鍵盤輸入建立文檔索引

:helptags ~\vimfiles\bundle\jshint.vim\doc

可輸入下面命令來查看幫助文檔

:help jshint

常用命令如下

:JSHint

效果圖

4. Syntastic

這是VIM中針對語法檢查的擴展應用，可以更准確的定位到語法錯誤點

命令行進入~\vimfiles\bundle，使用git命令

git clone https://github.com/scrooloose/syntastic.git

打開Vim，鍵盤輸入建立文檔索引

:helptags ~\vimfiles\bundle\syntastic\doc

可輸入下面命令來查看幫助文檔

:help syntastic

效果圖

5. Vim-JavaScript

JavaScript語法高亮

命令行進入~\vimfiles\bundle，使用git命令

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

6. Jade

Jade模板語法高亮

命令行進入~\vimfiles\bundle，使用git命令

git clone git://github.com/digitaltoad/vim-jade.git

7. CoffeeScript

CoffeeScript語法高亮

命令行進入~\vimfiles\bundle，使用git命令

git clone https://github.com/kchmck/vim-coffee-script.git

8. Stylus

Stylus語法高亮

命令行進入~\vimfiles\bundle，使用git命令

git clone https://github.com/wavded/vim-stylus.git

9. SnipMate

Vim中的Code Snippets

解壓縮snipMate.zip到~\vimfiles

修改_vimrc，在最后一行加入

"設置代碼片段目錄
let snippets_dir = $VIM.'\vimfiles\snippets\'

打開Vim，鍵盤輸入建立文檔索引

:helptags ~\vimfiles\doc

可輸入下面命令來查看幫助文檔

:help snipmate

10. nodejs-snippets

Vim snippets for Node.js

git獲取

git clone https://github.com/jamescarr/snipmate-nodejs.git

復制snippets文件夾到~\vimfiles\snippets

11. vim-node

Vim Dictionary for Node.js

git獲取

git clone https://github.com/guileen/vim-node.git

復制dict文件夾到~\vimfiles\dict

修改_vimrc，在最后一行加入

"添加字典文件
au FileType javascript set dictionary+=$VIM.'\vimfiles\dict\node.dict'

12. vim-nodejs-complete

Vim代碼提示 for Node.js

git獲取

git clone https://github.com/myhere/vim-nodejs-complete.git

復制after文件夾到~\vimfiles\after

使用方法：在編輯js代碼時候，按ctrl-x和ctrl-o進入提示模式。

效果圖