寫在前面
1. 為什么要用vim
如果一定要講一個清新脫俗的理由浪漠，那是因為用vim對頸椎和腰椎好（嚴(yán)肅臉）憔晒。使用vim時候某宪，是不需要一只手控制鼠標(biāo)或者觸控板的悼做。當(dāng)兩只手都放在鍵盤上，就能將脖子和雙肩放松囱皿，身體放正勇婴，挺直腰背，目光平視屏幕了嘱腥，咳咳耕渴。
2. 為什么重復(fù)造輪子
Github上關(guān)于vim的配置已經(jīng)有很多了，但沒有真正一統(tǒng)vim界的最佳實踐（如zsh的oh-my-zsh齿兔，emacs的space-emacs橱脸，不過由于space-emacs催生出一個space-vim），所以要打造簡約專屬的IDE分苇，還得自己造輪子添诉。稍微谷歌或百度一下，就會有各種vim配置的教程医寿，思路也基本一致栏赴，所幸不是特別麻煩。
3. 對IDE的需求
- 顯示區(qū)塊： 項目結(jié)構(gòu)靖秩，文件編輯须眷，文件結(jié)構(gòu)，Shell操作沟突，Log顯示
- 主要語言：Javascript花颗，HTML，CSS等
- 次要語言：Python惠拭，Shell等
- 使用習(xí)慣：擁有sublime text的眾多特性
在sublime中編輯+terminal中查看log扩劝、執(zhí)行g(shù)it操作，兩者來回切換相當(dāng)麻煩职辅；而webstorm雖然強(qiáng)大今野，但消耗太大。用tmux的多屏復(fù)用+vim的強(qiáng)大插件足以打造一個能滿足以上要求IDE了罐农。
4. 適合本文的讀者
打算用vim打造IDE的新手条霜。沒有耐心的同學(xué)可以拉到最后看總結(jié)，直接去各個reference看原始文檔涵亏。希望本文能對你在配置vim過程中有一丟丟幫助宰睡。
開始搭建
1. 準(zhǔn)備工作
環(huán)境：MacOS 或 Linux
- 安裝iTerm2和zsh（推薦）
前往iTerm2官網(wǎng)下載蒲凶，以及使用oh-my-zsh一鍵安裝配置。具體可參考：Sourabh Bajaj 的 Mac OS X Setup Guide - 安裝tmux（必須）
$ brew install tmux
- 安裝vim（必須）
$ brew install vim --with-lua --with-override-system-vi
2. Vim配置
vim編輯器所有的配置都在 ~/.vimrc 下拆内，我們配置下第一個插件Vundle.vim——管理插件的插件旋圆。
2.1. 插件管理
Vundle可以讓你在配置文件中管理插件，并且非常方便的查找麸恍、安裝灵巧、更新或者刪除插件。 還可以幫你自動配置插件的執(zhí)行路徑和生成幫助文件抹沪，相對于Pathongen有巨大優(yōu)勢刻肄。你也可以用NeoBundle或者VimPlug，此處不作展開融欧。
# vundle 安裝
$ git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim
將下面配置加入到.vimrc文件中
" unleash all Vim power"
set nocompatible
filetype off
" set the runtime path to include Vundle and initialize"
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" let Vundle manage Vundle, required"
Plugin 'gmarik/Vundle.vim'
" Vundle List Here"
call vundle#end()
filetype plugin indent on
接著執(zhí)行安裝命令即可安裝完畢
# 在vim中
:PluginInstall
# 在終端
vim +PluginInstall +qall
為了方便vim配置的管理敏弃，創(chuàng)建新文件~/.vimrc_vundle將以上關(guān)于插件部分的配置寫入其中，然后再從~/.vimrc中引入噪馏。
" ~/.vimrc文件"
set nocompatible
filetype off
let $CONFIG_DIR = "~/"
" vundle config"
let $VUNDLE_CONFIG = $CONFIG_DIR.".vimrc_vundle"
if filereadable(expand($VUNDLE_CONFIG))
source $VUNDLE_CONFIG
endif
"~/.vimrc_vundle文件"
" set the runtime path to include Vundle and initialize"
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" let Vundle manage Vundle, required"
Plugin 'gmarik/Vundle.vim'
" Vundle List Here"
call vundle#end()
filetype plugin indent on
2.2. 添加vim插件與配置
我們在~/.vimrc中添加插件配置麦到，在~/.vimrc_vundle中添加插件 。vim的插件可以在VimAwesome這個非常awesome的網(wǎng)站上尋找欠肾，它有用Vundle安裝的腳本瓶颠，直接復(fù)制粘貼就行了。
a. 配色主題
所謂顏即是正義刺桃，賞心悅目的配色主題很重要步清。我用的配色是 molokai 主題
"~/.vimrc_vundle文件"
" Vundle List Here"
Plugin 'tomasr/molokai'
" ~/.vimrc文件"
" vim theme"
colorscheme molokai
b. 項目結(jié)構(gòu)
左窗口用 NerdTree插件 Plugin 'scrooloose/nerdtree'，是一個用于瀏覽目錄結(jié)構(gòu)的插件虏肾，配置如下：
" NERDTree"
let NERDChristmasTree=0
let NERDTreeWinSize=35
let NERDTreeChDirMode=2
let NERDTreeIgnore=['\~$', '\.pyc$', '\.swp$']
let NERDTreeShowBookmarks=1
let NERDTreeWinPos="left"
let g:nerdtree_tabs_open_on_gui_startup=1
let g:nerdtree_tabs_open_on_console_startup=1
autocmd vimenter * if !argc() | NERDTree | endif
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTreeType") && b:NERDTreeType == "primary") | q | endif
nmap <F5> :NERDTreeToggle<cr>
c. 文件結(jié)構(gòu)
右窗口用 tagbar插件 Plugin 'majutsushi/tagbar，為我們提供了一個簡單的方式去瀏覽當(dāng)前文件的結(jié)構(gòu)欢搜，并且支持在各個標(biāo)簽之間快捷的跳轉(zhuǎn)封豪。配置如下：
" Tagbar"
let g:tagbar_width=35
let g:tagbar_autofocus=1
nmap <F6> :TagbarToggle<CR>
" parse markdown"
let g:tagbar_type_markdown = {
\ 'ctagstype' : 'markdown',
\ 'kinds' : [
\ 'h:Heading_L1',
\ 'i:Heading_L2',
\ 'k:Heading_L3'
\ ]
\ }
使用tagbar還需要安裝 Exuberant ctags
$ brew install ctags
由此，左右兩側(cè)的導(dǎo)航插件安裝完成炒瘟。按F5和F6喚出左右窗口吹埠，窗口之間的切換使用ctrl+w。
d. 對js文件結(jié)構(gòu)分析的優(yōu)化
tagbar本身對javascript的分析不夠疮装，所以還需要額外的插件去支持對javascr以及ES6做標(biāo)簽化處理缘琅，推薦解決方案 是使用jsctags，當(dāng)然也可以采用其他tagbar在wiki中的其他方案廓推。關(guān)于jsctags的解決方式如下：
- 用 vundle 安裝 tern_for_vim 插件
- 在
~/.vim/bundle/tern_for_vim下執(zhí)行npm install - 安裝 jsctags
npm install -g git+https://github.com/ramitos/jsctags.git
-
~/.vimrc添加對js處理的配置
let g:tagbar_type_javascript = {
\ 'ctagsbin' : 'jsctags'
\ }
e. 其他實用的插件
- ctrlp 全局搜索
- vim-airline 狀態(tài)欄
- YouCompleteMe 自動補(bǔ)全
- vim-gitgutter 基于git diff顯示代碼變動
- vim-javascript 更多js語法高亮
vim的插件相當(dāng)多刷袍，按需裝載即可，就不一一列舉了樊展。這里記錄一個坑呻纹，vim-airline狀態(tài)欄的箭頭要正確顯示堆生，需要安裝powerline-font，然后在iterm2中啟用non-ASCII的字體
3. tmux配置
正如文章一開始的截圖所以展示的雷酪，左下方窗口是shell 操作區(qū)淑仆，右下窗口是log 輸出區(qū)域。其本質(zhì)是用tmux 創(chuàng)建了3個panel 哥力，上面1個用vim打開蔗怠，下面左右各2個，左側(cè)可以執(zhí)行g(shù)it 命令吩跋，右側(cè)啟動server 查看log
3.1. 打開tmux
執(zhí)行命令tmux寞射，創(chuàng)建一個窗口
$ tmux
3.1. 分屏
待開啟了一個窗口之后，只需再按住 ctrl-b 和 % 钞澳，一個豎直窗格就出現(xiàn)了怠惶。另外，若要把屏幕沿水平方向分割轧粟，則只需要按下 ctrl-b 和 "策治。切換tmux之間的窗口只要按下 ctrl-b + 方向鍵。
3.3. tmux 的快捷鍵前綴
剛剛所按住的 ctrl-b 是tmux的快捷鍵前綴兰吟，是用來區(qū)分tmux命令和其他shell命令的通惫，為了方便按鍵，我們將修改這個前綴為ctrl-a
" ~/.tmux.conf 文件
unbind C-b
set -g prefix C-a
如果將ctrl鍵和caps lock鍵功能對調(diào)那就更方便了混蔼。按鍵習(xí)慣因人而異履腋，開心就好。
3.4. 在tmux中vim的高亮不對
在 ~/.vimrc 中加以下配置即可
if exists('$TMUX')
set term=screen-256color
endif
3.5. 調(diào)整窗格布局
此時上面的窗格和下面2個窗格是等分的惭嚣，將vim主窗口調(diào)整的更大一點遵湖，才更合理點。我們使用以下tmux命令晚吞，注意要按前綴ctrl-a延旧，然后像vim一樣按:
resize-pane [-DLRUZ] [-x width] [-y height] [-t target-pane] [adjustment]
比如窗格0高度偏移25
:resize-pane -t 0 -y 25
3.6. 更多關(guān)于tmux
以上操作完成后，基本形成一個像截圖所示的IDE了槽地。關(guān)于tmux的window迁沫，panel，session的概念捌蚊、其他的快捷操作等等集畅，網(wǎng)上有許多教程可以參考，不在此贅述缅糟。
tmux非常強(qiáng)大挺智，你甚至可以做結(jié)對編程：將tmux的session地址分享給他人，別人可以通過ssh接入這個session窗宦，進(jìn)行協(xié)同操作逃贝。
總結(jié)
- 用tmux分屏谣辞，主屏打開vim，其他屏可以啟動server查看log沐扳、執(zhí)行g(shù)it命令做版本管理等
- vim的配置文件是
~/.vimrc泥从，用 vim-scripts 配置 - 插件匯總在 VimAwesome 網(wǎng)站上，可以用 Vundle.vim 管理
- 配置可以通過參考Github上眾多的 vim的配置 來 COPY-PASTE-MODIFY沪摄，所以我的vim配置也就沒必要完整附上了
- vim的操作訓(xùn)練可以用 vim大冒險 這個游戲來完成
