用 Vim 來打造自己心儀的 IDE
一年前我從 Vim 切換到了 WebStorm ，是因為 WebStorm 強大的重構功能，以及 Super Search 功能。在開發天碼營前端的過程中，涉及多文件編輯和重構時 WebStorm 的優勢便非常明顯。
最近到手了 HHKB ，從鍵盤到觸摸板的切換還是挺麻煩的，于是 Vim 編輯的需求又來了。。加之 WebStorm 經常假死，我決定重新啟用 Vim 。同時重新打造了我的 Vim ，使它能夠滿足我在 IDE 中的所有需求。這篇文章便來記述整個過程，或許有些幫助。先上圖：
上圖中，下面的 Console 是通過 Tmux 搞的。 Tmux 的配置和使用參見：優雅地使用命令行： Tmux 終端復用。
準備工作
安裝 Git 、 Homebrew （如果你是 Mac ），并安裝新版本的 Vim(>=7.3)。一般 linux 發行版都會預裝 Vim ，你需要檢查一下 vim 的版本：
$ vim --version VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Jul 4 2015 01:13:13) MacOS X (unix) version Included patches: 1-712 Compiled by Homebrew
如果上述命令失敗，那么你需要安裝一個 Vim~ 這里提供了 Vim 的基本快捷鍵備忘錄。
OSX
$ brew update $ brew install vim
Linux
apt-get install vim # ubuntu pacman -S vim # archlinux yum install vim # centos
Vundle
Vundle是基于 Git 的 vim 插件管理工具，是目前最推薦的工具。之前我的.vim下手動維護著各種插件，目錄結構看起來是這樣的：
|- doc/ | |- emmet.txt | |- NERDCommenter.txt | |- ... |- plugin/ | |- emmet.vim | |- NERDCommenter.vim | |- ... |- autoload/ | |- emmet.vim | |- NERDCommenter.vim | |- ... |- ftplugin/
使用 Vundle 后變成了這樣：
|- bundle/ | |- emmet/ | | |- doc/ | | |- autoload/ | |- NERDCommenter/ | | |- doc/ | | |- autoload/ |- ftplugin/
其中ftplugin里面是我的配置，比如編譯運行的快捷鍵等。另外，如果你在用 Git 同步 Vim 配置的話，可以把bundle/加入.gitignore。
那么怎么安裝 Vundle 呢？
git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim
然后在你的.vimrc中加入 Vundle 的配置：
set nocompatible " required filetype off " required set rtp+=~/.vim/bundle/Vundle.vim call vundle#begin() Plugin 'gmarik/Vundle.vim' call vundle#end() " required filetype plugin indent on " required
然后在 vim 中運行:PluginInstall即可（或者在 Bash 中運行vim +PluginInstall）。以后只需要在添加一行Plugin 'xxx'并運行:PluginInstall即可自動安裝插件。
窗格管理
要把 Vim 打造成一個 IDE ，你需要熟悉 Vim 如何創建窗格，以及如何在窗格間切換。 :sp可以水平分割當前窗格，:vs可以垂直分割當前窗格。可以重復多次，創建復雜的窗格布局：
C-w, C-w可以切換到下一窗格，C-w, j切換到下面的窗格，C-w, k切換到上面的窗格，C-w, h切換到左邊的窗格，C-w, l切換到右邊的窗格。 我為這些操作設置了更加方便的快捷鍵，比如 Ctrl+J 切換到下面的窗格：
nnoremap <C-J> <C-W><C-J>
多文件管理可以使用多窗格，也可以使用 Buffer 的方式。比如vim a.js b.js就會在 Buffer 中同時打開兩個文件。使用:ls列出當前 Buffer 中的文件，然后使用數字鍵切換。也可以使用:b 2切換到 Buffer 中的第二個文件。
折疊
有些人特喜歡代碼折疊，我就在這里列一下如何優雅地折疊代碼。首先在.vimrc中添加配置：
set foldmethod=indent au BufWinLeave * silent mkview " 保存文件的折疊狀態 au BufRead * silent loadview " 恢復文件的折疊狀態 nnoremap <space> za " 用空格來切換折疊狀態
開啟以 indent 來折疊代碼后，打開一個文件會發現有縮進的內容全被折疊起來了。所以我們引入一個SimpleFold來更智能地折疊：
Plugin 'tmhedberg/SimpylFold'
不要忘了運行:PluginInstall。
自動補全
自動補全當然是用YCM：
Plugin 'Valloric/YouCompleteMe'
然后進行配置就好了， YCM 是通過 Vim 的omnifunc機制來自動補全的，所以你需要為你想要支持的語言安裝一個提供omnifunc接口的 Vim 插件。
我在另一篇博客中有詳細介紹了自動補全、語法檢查等配置。
項目樹
這想必是 IDE 能提供的最大的好處之一，在 Vim 中可以使用NERDTree來顯示文件樹，它的快捷鍵非常多，所以和 Vim 一樣的越用越爽。
Plugin 'scrooloose/nerdtree' " 這個插件可以顯示文件的 Git 增刪狀態 Plugin 'Xuyuanp/nerdtree-git-plugin'
這里給出我的一些 NERDTree 配置：
" Ctrl+N 打開 /關閉
map <C-n> :NERDTreeToggle<CR>
" 當不帶參數打開 Vim 時自動加載項目樹
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif
" 當所有文件關閉時關閉項目樹窗格
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTreeType") && b:NERDTreeType == "primary") | q | endif
" 不顯示這些文件
let NERDTreeIgnore=['\.pyc$', '\~$', 'node_modules'] "ignore files in NERDTree
" 不顯示項目樹上額外的信息，例如幫助、提示什么的
let NERDTreeMinimalUI=1全局搜索
WebStrom 的全局搜索是我當初使用它的主要原因；而現在全局搜索總是突然崩潰，也是我放棄 WebStorm 而轉到 Vim 的主要原因。
成也蕭何敗蕭何
安裝ctrlp：
Plugin 'kien/ctrlp.vim'
然后按下C-P，便可以全局搜索啦。使用C-j, C-k上下翻頁，<Enter>打開選中文件。同樣，給出一些有用的配置：
let g:ctrlp_working_path_mode = 'ra'
set wildignore+=*/tmp/*,*/node_modules/*,*.so,*.swp,*.zip
let g:ctrlp_custom_ignore = {'dir': '\v[\/]\.(git|hg|svn)$', 'file': '\v\.(exe|so|dll)$'}剪切板
剪切板想必是所有 Vim 用戶的痛。但是！在 Mac 下只需要設置：
set clipboard=unnamed
你在 Vim 中 copy 的所有內容都會上系統剪切板。在 Vim 中拷貝內容時，可以切換到拷貝模式防止自動縮進和補全。 我的快捷鍵是<F9>：
set pastetoggle=<F9>
狀態欄
有沒有注意到我酷炫的狀態欄？安裝一個powerline：
Plugin 'Lokaltog/powerline', {'rtp': 'powerline/bindings/vim/'}此外，為了正確顯示 Powerline 的圖標，還需要一些設置：
set guifont=Inconsolata\ for\ Powerline:h15 let g:Powerline_symbols = 'fancy' set encoding=utf-8 set t_Co=256 set fillchars+=stl:\ ,stlnc:\ set term=xterm-256color set termencoding=utf-8
然后在系統字體庫中導入powerline font，如果是 Mac 的話可以使用 Font Book 來導入。 然后需要設置 terminal （ iTerm ）的 non-ASCII 字體為 PowerlineSymboles ：
注釋、反注釋
NERDCommenter是個不錯的工具，支持非常多的語言：
Plugin 'scrooloose/nerdcommenter' " commenter: \cc \cu
然后按下\cc來注釋當前航，\cu來反注釋，\c<space>來切換注釋。其中的\\是可以設置的：
let mapleader=';'
Loremipsum
哈哈如果你沒見過標題中的這個詞就可以跳過了。前端開發中通常需要添加一些占位符來讓頁面看起來有內容又像人話， loremipsum （拉丁語）通常就是這些占位符的起始字符。比如下面一段：
Sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis sit amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec est neque, dignissim a, eleifend vitae, lobortis ut.
安裝一個loremipsum即可：
Plugin 'vim-scripts/loremipsum'
我還加了點設置來方便控制長度：
inoremap Lorem <Esc><Esc>:Loremipsum 20<CR> inoremap Ipsum <Esc><Esc>:Loremipsum 70<CR>
這樣，當輸入Lorem時產生長度為 20 單詞的占位符，輸入Ipsum時產生長度為 70 的占位符。
參考鏈接：
- https://realpython.com/blog/python/vim-and-python-a-match-made-in-heaven/
- https://coderwall.com/p/yiot4q/setup-vim-powerline-and-iterm2-on-mac-os-x
原文出自我自己的博客，喜歡前端開發、 Linux 和 Vim 的 V 友歡迎訪問我天碼營的主頁。
來自：http://v2ex.com/t/235055