在開(kāi)篇我要說(shuō)的是, 有很多人希望將vim打造成一個(gè)ide, 我個(gè)人不是很贊成這個(gè)觀點(diǎn), 因?yàn)関im無(wú)論怎么配置都不會(huì)有ide方便和強(qiáng)大, 所以我覺(jué)得如果你追求vim像ide一樣強(qiáng)大, 那還不如直接去用ide好了, 所以這篇文章并不是教你怎么把vim弄的像ide一樣強(qiáng)大, 只是教你如何讓vim變的更順手而已

先把我的.vimrc配置文件貼一下

" 基本設(shè)置
set number
set hls

"語(yǔ)法高亮
syntax on
syntax enable

" 縮進(jìn)設(shè)置
set shiftwidth=2                " 設(shè)置格式化時(shí)代碼縮進(jìn)為2個(gè)空格
set tabstop=2                   " tab鍵縮進(jìn)為4格子
set expandtab                   " tab鍵轉(zhuǎn)換為空格
set smartindent                 " 智能縮進(jìn)
set incsearch                   " 開(kāi)啟實(shí)時(shí)搜索功能
set ignorecase                  " 搜索時(shí)大小寫(xiě)不敏感
set wildmenu                    " vim 自身命令行模式智能補(bǔ)全
let mapleader="\<Space>"

" 代碼折疊
set nofoldenable
"set foldmethod=indent
set foldmethod=syntax

" 主題設(shè)置
set background=dark
colorscheme solarized

set nocompatible              " be iMproved, required

" vim-plug
call plug#begin('~/.vim/bundle')

Plug 'scrooloose/nerdtree'
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
Plug 'jiangmiao/auto-pairs'
Plug 'godlygeek/tabular'
Plug 'plasticboy/vim-markdown'
Plug 'Valloric/YouCompleteMe'
" Plug 'vim-syntastic/syntastic'
Plug 'edkolev/tmuxline.vim'
Plug 'majutsushi/tagbar'
Plug 'ternjs/tern_for_vim'
Plug 'pangloss/vim-javascript'
Plug 'mattn/emmet-vim'
Plug 'Chiel92/vim-autoformat'
Plug 'iamcco/mathjax-support-for-mkdp'
Plug 'iamcco/markdown-preview.vim'
Plug 'ctrlpvim/ctrlp.vim'
Plug 'leafgarland/typescript-vim'
Plug 'Quramy/tsuquyomi'
Plug 'Yggdroot/indentLine'
Plug 'w0rp/ale'
Plug 'scrooloose/nerdcommenter'
Plug 'tpope/vim-surround'

call plug#end()

" NERDTree
let NERDChristmasTree=0
let NERDTreeWinSize=35
let NERDTreeChDirMode=2
let NERDTreeIgnore=['\~$', '\.pyc$', '\.swp$']
let NERDTreeShowBookmarks=1
let NERDTreeWinPos="left"
" 關(guān)閉NERDTree快捷鍵
" map <leader>t :NERDTreeToggle<CR>
" 顯示行號(hào)
" let NERDTreeShowLineNumbers=1
" let NERDTreeAutoCenter=1
" 是否顯示隱藏文件
let NERDTreeShowHidden=1
" 在終端啟動(dòng)vim時(shí)走贪，共享NERDTree
let g:nerdtree_tabs_open_on_console_startup=1
" 忽略一下文件的顯示
let NERDTreeIgnore=['\.pyc','\~$','\.swp']
" 顯示書(shū)簽列表
let NERDTreeShowBookmarks=1
" Automatically open a NERDTree if no files where specified
autocmd vimenter * if !argc() | NERDTree | endif
" Close vim if the only window left open is a NERDTree
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTreeType") && b:NERDTreeType == "primary") | q | endif
" Open a NERDTree
nmap <F5> :NERDTreeToggle<CR>

" airline
"打開(kāi)tabline功能,方便查看Buffer和切換,省去了minibufexpl插件
let g:airline#extensions#tabline#enabled = 1
let g:airline#extensions#tabline#buffer_nr_show = 1

" Exuberant ctags
let Tlist_Ctags_Cmd="/usr/local/bin/ctags"
let Tlist_Show_One_File=1
let Tlist_Exit_OnlyWindow=1
let Tlist_Use_Right_Window=1

" Syntastics
" set statusline+=%#warningmsg#
" set statusline+=%{SyntasticStatuslineFlag()}
" set statusline+=%*

" let g:syntastic_always_populate_loc_list = 1
" let g:syntastic_auto_loc_list = 1
" let g:syntastic_check_on_open = 1
" let g:syntastic_check_on_wq = 0
" let g:syntastic_javascript_checkers = ['eslint']

" tagbar
let g:tagbar_width=35
let g:tagbar_autofocus=1
nmap <F6> :TagbarToggle<CR>

let g:tagbar_type_markdown = {
      \ 'ctagstype' : 'markdown',
      \ 'kinds' : [
      \ 'h:Heading_L1',
      \ 'i:Heading_L2',
      \ 'k:Heading_L3'
      \ ]
      \ }
let g:tagbar_type_javascript = {
      \ 'ctagsbin' : 'jsctags'
      \ }
" let g:tagbar_type_typescript = {
"   \ 'ctagsbin' : 'tstags',
"  \ 'ctagsargs' : '-f-',
"  \ 'kinds': [
"   \ 'e:enums:0:1',
"  \ 'f:function:0:1',
"  \ 't:typealias:0:1',
"  \ 'M:Module:0:1',
"  \ 'I:import:0:1',
"  \ 'i:interface:0:1',
"  \ 'C:class:0:1',
"  \ 'm:method:0:1',
"  \ 'p:property:0:1',
"  \ 'v:variable:0:1',
"  \ 'c:const:0:1',
"  \ ],
"  \ 'sort' : 0
" \ }
let g:tagbar_type_typescript = {
      \ 'ctagstype': 'typescript',
      \ 'kinds': [
      \ 'c:classes',
      \ 'n:modules',
      \ 'f:functions',
      \ 'v:variables',
      \ 'v:varlambdas',
      \ 'm:members',
      \ 'i:interfaces',
      \ 'e:enums',
      \ ]
      \ }

" vim-javascript
let g:javascript_plugin_jsdoc = 1
let javascript_enable_domhtmlcss = 1
let g:javascript_plugin_ngdoc = 1
let g:javascript_plugin_flow = 1

augroup javascript_folding
  au!
  au FileType javascript setlocal foldmethod=syntax
augroup END

" YouCompleteMe
if !exists("g:ycm_semantic_triggers")
 let g:ycm_semantic_triggers = {}
endif
let g:ycm_semantic_triggers['typescript'] = ['.']

"ctrlp
let g:ctrlp_show_hidden=1 "顯示隱藏文件
" 忽略一下文件類型
let g:ctrlp_custom_ignore = {
       \ 'dir':  '\.git$\|\.hg$\|\.svn$',
      \ 'file': '\.exe$\|\.so$\|\.dll$\|\.pyc$' }

" autoformat
noremap <F3> :Autoformat<CR>

" vim-indentline
let g:indentLine_color_term = 239 "對(duì)齊線顏色
" let g:indentLine_char = 'c' "對(duì)齊線符號(hào), c表示任意ASCII碼字符, 你還可以用下面這幾個(gè)符號(hào)之一:  |, ┆, │, ?, 或 ▏

" ale-setting {{{
let g:ale_set_highlights = 0
"自定義error和warning圖標(biāo)
let g:ale_sign_error = '?'
let g:ale_sign_warning = '?'
"在vim自帶的狀態(tài)欄中整合ale
let g:ale_statusline_format = ['? %d', '? %d', '? OK']
"顯示Linter名稱,出錯(cuò)或警告等相關(guān)信息
let g:ale_echo_msg_error_str = 'E'
let g:ale_echo_msg_warning_str = 'W'
let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'
"打開(kāi)文件時(shí)不進(jìn)行檢查
" let g:ale_lint_on_enter = 0

"普通模式下坠狡，sp前往上一個(gè)錯(cuò)誤或警告遂跟，sn前往下一個(gè)錯(cuò)誤或警告
"nmap sp <Plug>(ale_previous_wrap)
"nmap sn <Plug>(ale_next_wrap)
"<Leader>s觸發(fā)/關(guān)閉語(yǔ)法檢查
"nmap <Leader>s :ALEToggle<CR>
"<Leader>d查看錯(cuò)誤或警告的詳細(xì)信息
"nmap <Leader>d :ALEDetail<CR>
"使用clang對(duì)c和c++進(jìn)行語(yǔ)法檢查，對(duì)python使用pylint進(jìn)行語(yǔ)法檢查
let g:ale_linters = {
\   'c++': ['clang'],
\   'c': ['clang'],
\   'python': ['pylint'],
\   'javascript': ['eslint'],
\}
" }}}

" nerdcommenter
" Add spaces after comment delimiters by default
let g:NERDSpaceDelims = 1

vim-plug

我們首先要裝的就是管理插件的插件——vim-plug幻锁。

下載地址

https://github.com/junegunn/vim-plug

功能說(shuō)明

vim-plug是管理插件的插件，主要用來(lái)管理和安裝vim中的插件触幼。

安裝

1. 安裝vim-plug

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

2. 在.vimrc文件中增加如下代碼：

" 設(shè)置vim-plug管理的插件安裝位置
 call plug#begin('~/.vim/bundle')


" 下面就是一些插件的例子.
" 插件必須裝在  plug#begin/end這兩行命令之間.
" 對(duì)于在github上面的插件, 我們可以用以下方法添加, 只需要添加`用戶名/插件名稱`就行
Plug 'tpope/vim-fugitive'
" 對(duì)于在http://vim-scripts.org/vim/scripts.html下的插件, 我們直接添加插件名稱就行
" Plug 'L9'
" 對(duì)于不是github也不是vim-scripts的插件, 則需要用完整路徑
Plug 'git://git.wincent.com/command-t.git'
" 本地或者你自己的插件
Plug 'file:///home/gmarik/path/to/plugin'


" 所有的插件都需要安裝在這條命令之前
call plug#end()            " 必須的

3. 退出vim并重啟vim后在vim中輸入命令 :PlugInstall安裝所有添加到.vimrc的插件
4. 如果沒(méi)有.vimrc文件, 則自己創(chuàng)建一個(gè)touch ~/.vimrc
5. 以后只要直接在Vim中輸入指令:PlugUpdate就能更新插件
6. 我們還可以在Vim中輸入指令:PlugUpgrade來(lái)更新vim-plug

Vim主題

這里推薦solarized主題
安裝也很簡(jiǎn)單
將下載下來(lái)的solarized.vim文件拷貝到~/.vim/colors/中, 然后在.vimrc中輸入如下代碼:

syntax enable
set background=dark
colorscheme solarized

最終配色效果如下:

NERDTree

下載地址

https://github.com/scrooloose/nerdtree

2究飞、功能說(shuō)明

NERDTree是Vim最常用的插件之一，可以在Vim運(yùn)行時(shí)顯示目錄和文件結(jié)構(gòu)亿傅，類似TextMate左側(cè)的文件瀏覽器，但操作起來(lái)更為方便葵擎，你可以在手不離開(kāi)鍵盤(pán)的情況下快速瀏覽文件，并在文件和文件夾之間進(jìn)行切換签餐。

安裝

1. 進(jìn)入.vimrc
2. 添加Plug 'scrooloose/nerdtree'
3. 在Vim中運(yùn)行:PlugInstall

使用說(shuō)明

打開(kāi)Vim，輸入:NERDTree盯串，即可呼出執(zhí)行Vim命令的當(dāng)前目錄的文件目錄。為了方便使用冠摄，我在.vimrc中定義了快捷鍵，可以用Ctrl+t打開(kāi)NERDTree河泳，你可以定義自己習(xí)慣的快捷鍵年栓。

NERDTree提供了豐富的鍵盤(pán)操作方式來(lái)瀏覽和打開(kāi)文件，我簡(jiǎn)單介紹一些常用的快捷鍵：

文件相關(guān)操作
o  : 在光標(biāo)所在的上一個(gè)窗口打開(kāi)文件某抓，并將光標(biāo)置于新打開(kāi)的窗口
go : 預(yù)覽文件，光標(biāo)停留在NERDTree窗口中
t  : 在新標(biāo)簽中打開(kāi)文件并激活
gt : 在新標(biāo)簽打開(kāi)文件食拜，光標(biāo)留在NERDTree窗口中
i  : 水平分割打開(kāi)文件
gi : 水平分割預(yù)覽
s  : 垂直分割打開(kāi)文件
gs : 垂直分割預(yù)覽
 
目錄樹(shù)相關(guān)操作
o  : 展開(kāi)/關(guān)閉目錄
O  : 遞歸展開(kāi)目錄副编。慎用，如果目錄層級(jí)多呻待，打開(kāi)會(huì)很慢
x  : 關(guān)閉父目錄
C  : 切換光標(biāo)所在目錄為根目錄
u  : 切換目錄樹(shù)的根目錄為上層目錄
U  : 切換目錄樹(shù)的根目錄為上層目錄，并保持舊的目錄樹(shù)的狀態(tài)
r  : 刷新當(dāng)前目錄
R  : 刷新當(dāng)前根目錄（這個(gè)在新加入文件后會(huì)用到）
cd : 切換vim工作目錄為光標(biāo)所在目錄（命令模式下:pwd可查看當(dāng)前工作目錄）

想了解更多操作方式蚕捉，可以通過(guò)? 查看詳細(xì)的幫助信息

配置NERDTree

在.vimrc中對(duì)NERDTree進(jìn)行配置

" NERD tree
let NERDChristmasTree=0
let NERDTreeWinSize=35
let NERDTreeChDirMode=2
let NERDTreeIgnore=['\~$', '\.pyc$', '\.swp$']
let NERDTreeShowBookmarks=1
let NERDTreeWinPos="left"
let NERDTreeShowHidden=1
" Automatically open a NERDTree if no files where specified
autocmd vimenter * if !argc() | NERDTree | endif
" Close vim if the only window left open is a NERDTree
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTreeType") && b:NERDTreeType == "primary") | q | endif
" Open a NERDTree
nmap <F5> :NERDTreeToggle<cr>

這樣按F5就能打開(kāi)NERDTree

Command-T

下載地址

https://wincent.com/products/command-t

2柴淘、功能說(shuō)明

Command-T是一個(gè)基于Ruby和C擴(kuò)展實(shí)現(xiàn)的快速文件瀏覽的插件秘通，類似TextMate的Go to File（Command+T呼出）功能肺稀，或Eclipse的Open Resource（Command+Shift+r）功能，可以通過(guò)模糊匹配快速定位并打開(kāi)文件话原。

安裝

1. 由于現(xiàn)在的mac都自帶ruby了, 所以一般都不需要安裝ruby

2. 在.vimrc中添加Plug 'wincent/command-t'并在vim中運(yùn)行命令:PlugInstall

3. 編譯C擴(kuò)展

 cd ~/.vim/bundle/command-t/ruby/command-t/ext/command-t
 ruby extconf.rb
 make

使用說(shuō)明

輸入:CommandT可進(jìn)入文件快速定位功能

1. ctrl+j/k 上下選擇文件繁仁，選中后回車打開(kāi)文件
2. ctrl+t 以tab方式打開(kāi)文件
3. ctrl+s/v 可以水平或垂直分割窗口打開(kāi)文件
4. ctrl+c 退出該模式

該插件還有個(gè)常用命令归园，:CommandTBuffer，可以瀏覽緩沖區(qū)的文件蔓倍，并重新打開(kāi)。操作方式同上默勾。

注意事項(xiàng)

Vim版本需要支持ruby擴(kuò)展聚谁。我們可以在Vim中輸入:ruby 1檢查，如果出現(xiàn)E319: Sorry, the command is not available in this version就表示不支持环疼。

如果出現(xiàn)上述情況朵耕，我們就需要自己去編譯能夠支持ruby的Vim，嫌麻煩的話可以直接安裝vim-nox阎曹，自帶Ruby支持，在Ubuntu下安裝命令如下：sudo apt-get install vim-nox栅贴。

執(zhí)行ruby extconf.rb命令時(shí)如果出現(xiàn)找不到mkmf包的情況熏迹，說(shuō)明你需要安裝ruby-dev的包

如果覺(jué)得Command-T安裝麻煩, 可以使用ctrlp, 安裝和使用非常簡(jiǎn)單, 就是有點(diǎn)慢
在.vimrc中增加下面代碼可以開(kāi)啟ctrlp中搜索隱藏文件的功能

let g:ctrlp_show_hidden=1 "顯示隱藏文件
" 忽略一下文件類型
let g:ctrlp_custom_ignore = {
     \ 'dir':  '\.git$\|\.hg$\|\.svn$',
     \ 'file': '\.exe$\|\.so$\|\.dll$\|\.pyc$' }

airline

下載地址

https://github.com/vim-airline/vim-airline

功能說(shuō)明

airline是Vim的一個(gè)非常漂亮的狀態(tài)欄插件，安裝了airline之后坛缕，Vim底部將會(huì)出現(xiàn)一個(gè)增強(qiáng)型狀態(tài)欄，當(dāng)Vim處于NORMAL祷膳、INSERT直晨、BLOCK等狀態(tài)時(shí)膨俐，狀態(tài)欄會(huì)呈現(xiàn)不同的顏色，同時(shí)狀態(tài)欄還會(huì)顯示當(dāng)前編輯文件的格式（uft-8等）焚刺、文件類型（java、xml等）和光標(biāo)位置等兄淫，喜歡的就裝蔓姚。

如圖所示：

安裝

安裝airline

Plug 'vim-airline/vim-airline'

:PlugInstall

使用說(shuō)明

安裝之后，再次打開(kāi)Vim泄私，你就會(huì)發(fā)現(xiàn)底部已經(jīng)多了一個(gè)彩色的狀態(tài)欄了备闲。
在.vimrc中添加下面語(yǔ)句可以打開(kāi)airline頂部的tab, 用來(lái)顯示buffer信息

let g:airline#extensions#tabline#enabled = 1
let g:airline#extensions#tabline#buffer_nr_show = 1

主題安裝

請(qǐng)參照https://github.com/vim-airline/vim-airline-themes

注意事項(xiàng)

通常第一次裝完都會(huì)出現(xiàn)亂碼, 這是由于字體庫(kù)的問(wèn)題導(dǎo)致的, 通過(guò)官方提供的辦法就可以解決

# clone
git clone https://github.com/powerline/fonts.git --depth=1
# install
cd fonts
./install.sh
# clean-up a bit
cd ..
rm -rf fonts

auto-pairs

自動(dòng)匹配括號(hào)
https://github.com/jiangmiao/auto-pairs

安裝地址

Plug 'jiangmiao/auto-pairs'

Ctags

1. 安裝exuberant ctags

exuberant ctags 的安裝恬砂，可用brew來(lái)安裝
brew install ctags-exuberant

安裝完， which ctags
如果是/usr/bin/ctags,系統(tǒng)默認(rèn)先看到我們安裝的ctags
打開(kāi)~/根目錄下的.profile泻骤，如果你也沒(méi)發(fā)現(xiàn)有這個(gè)文件，沒(méi)關(guān)系钧椰，創(chuàng)建一個(gè)符欠！
然后在里面添加：export PATH="/usr/local/bin:/usr/local/sbin:$PATH"
再到終端執(zhí)行：source ~/.profile
然后再看看which ctags，如無(wú)意外诊沪，應(yīng)該是/usr/local/bin/ctags
最后在.vimrc配置文件添加：

let Tlist_Ctags_Cmd="/usr/local/bin/ctags"
let Tlist_Show_One_File=1
let Tlist_Exit_OnlyWindow=1
let Tlist_Use_Right_Window=1

2. 使用ctags編譯項(xiàng)目tags文件

終端cd 項(xiàng)目目錄，然后執(zhí)行：
ctags -R
你會(huì)發(fā)現(xiàn)目錄中多了一個(gè)tags的文件端姚，這個(gè)就是vim里面taglist會(huì)尋找的文件！
在vim中對(duì)準(zhǔn)某個(gè)對(duì)象調(diào)用的方法按control + ] 看看能否調(diào)到那個(gè)方法的定義＝ヂ恪？
control + t 返回原方法

YouCompleteMe

YouCompleteMe是一個(gè)快速尚氛、支持模糊匹配的vim代碼補(bǔ)全引擎洞渤。由于它是基于Clang引擎為C/C++/Objective-C提供代碼提示，也支持其他語(yǔ)言代碼提示的引擎讯柔，例如基于Jedi的Python代碼補(bǔ)全护昧，基于OmniSharp的C#代碼補(bǔ)全，基于Gocode的Go代碼補(bǔ)全捏卓。

1. 安裝YouCompleteMe

Plug 'Valloric/YouCompleteMe'

2. 安裝cmake, 因?yàn)閅ouCompeleteMe需要用到cmake編譯, 所以我們需要先安裝cmake

brew install cmake

3. 編譯YouCompleteMe
   如果我們只需要C系語(yǔ)法的補(bǔ)全, 則需要安裝clang并執(zhí)行下列代碼

cd ~/.vim/bundle/YouCompleteMe
./install.py --clang-completer

對(duì)于JavaScript的補(bǔ)全我們則需要安裝npm后, 執(zhí)行下面代碼

cd ~/.vim/bundle/YouCompleteMe
./install.py

對(duì)于TypeScript的補(bǔ)全我們則需要在npm中安裝過(guò)TypeScript依賴后, 執(zhí)行下面代碼

cd ~/.vim/bundle/YouCompleteMe
./install.py

其他語(yǔ)言同樣的都是安裝各自語(yǔ)言的編譯器后, 執(zhí)行下面代碼

cd ~/.vim/bundle/YouCompleteMe
./install.py

你也可以在全部安裝完xbuild, go, tsserver, node, npm, rustc, 和 cargo等編譯器后, 執(zhí)行下列代碼完全對(duì)所有YouCompleteMe支持的所有語(yǔ)言進(jìn)行代碼補(bǔ)全的編譯

cd ~/.vim/bundle/YouCompleteMe
./install.py --all

ale

ale是一款支持多語(yǔ)言的語(yǔ)法檢查插件, 同樣用vim-plug安裝
安裝后再.vimrc中進(jìn)行如下設(shè)置, 就可以對(duì)python, js, c ,c++進(jìn)行語(yǔ)法檢測(cè)了, 設(shè)置完成后, 安裝相應(yīng)語(yǔ)言的錯(cuò)誤檢測(cè)工具即可

" ale-setting {{{
let g:ale_set_highlights = 0
"自定義error和warning圖標(biāo)
let g:ale_sign_error = '?'
let g:ale_sign_warning = '?'
"在vim自帶的狀態(tài)欄中整合ale
let g:ale_statusline_format = ['? %d', '? %d', '? OK']
"顯示Linter名稱,出錯(cuò)或警告等相關(guān)信息
let g:ale_echo_msg_error_str = 'E'
let g:ale_echo_msg_warning_str = 'W'
let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'
"打開(kāi)文件時(shí)不進(jìn)行檢查
let g:ale_lint_on_enter = 0

"普通模式下怠晴，sp前往上一個(gè)錯(cuò)誤或警告，sn前往下一個(gè)錯(cuò)誤或警告
nmap sp <Plug>(ale_previous_wrap)
nmap sn <Plug>(ale_next_wrap)
"<Leader>s觸發(fā)/關(guān)閉語(yǔ)法檢查
nmap <Leader>s :ALEToggle<CR>
"<Leader>d查看錯(cuò)誤或警告的詳細(xì)信息
nmap <Leader>d :ALEDetail<CR>
"使用clang對(duì)c和c++進(jìn)行語(yǔ)法檢查稿械，對(duì)python使用pylint進(jìn)行語(yǔ)法檢查
let g:ale_linters = {
\   'c++': ['clang'],
\   'c': ['clang'],
\   'python': ['pylint'],
 \   'javascript': ['eslint'],
\}
" }}}

因?yàn)槲覀冎贫薳slint作為js檢測(cè)工具, 所以我們就需要安裝并設(shè)置eslint

1. 在npm中全局安裝eslint, 我自己用的是yarn, npm安裝我想前端應(yīng)該都不陌生, 這里就不詳細(xì)復(fù)述了

yarn global add eslint

2. 為了使eslint能應(yīng)用到我們的項(xiàng)目, 我們每次都需要在新項(xiàng)目的根目錄下先初始化一個(gè)eslint配置文件, 并根據(jù)提示配置eslint, 這需要注意, 如果我們要支持react語(yǔ)法檢測(cè), 需要在npm全局環(huán)境下安裝eslint-plugin-react, 同時(shí)eslint依賴package.json文件, 所以在配置eslint前需要提前配置好package.json文件

eslint --init

3. 用一個(gè)xxx文件測(cè)試eslint是否安裝成功

eslint xxx.js

如果可以運(yùn)行成功就說(shuō)明配置好了, 運(yùn)行錯(cuò)誤則根據(jù)提示修改配置即可

4. 當(dāng)所有配置都弄好后, 再用vim打開(kāi)文件, 就會(huì)有語(yǔ)法檢測(cè)了

   
   

autoformat

autoformat, 同syntastic差不多,autoformat也是需要調(diào)用外部插件才能實(shí)現(xiàn)代碼格式化的vim格式化代碼插件

js的格式化我們需要安裝js-beautify

1. 先用npm安裝js-beautify

yarn global add js-beautify

2. 具體配置可以看這篇文章http://aiezu.com/article/linux_vim_plugin_autoformat_install.html

tagbar

之前我們左窗口用NERDTree實(shí)現(xiàn)項(xiàng)目文件夾瀏覽, 這次右窗口用tagbar插件 Plug 'majutsushi/tagbar美莫，為我們提供了一個(gè)簡(jiǎn)單的方式去瀏覽當(dāng)前文件的結(jié)構(gòu)梯捕，并且支持在各個(gè)標(biāo)簽之間快捷的跳轉(zhuǎn)。tagbar需要用到我們上面提到的ctags, 所以請(qǐng)先安裝ctags, tagbar配置如下：

" 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。

tagbar本身對(duì)javascript的分析不夠魁兼，所以還需要額外的插件去支持對(duì)javascr以及ES6做標(biāo)簽化處理漠嵌，推薦解決方案是使用jsctags，當(dāng)然也可以采用其他tagbar在wiki中的其他方案献雅。關(guān)于jsctags的解決方式如下：

• 用 vim-plug 安裝 tern_for_vim 插件
• 在 ~/.vim/bundle/tern_for_vim下執(zhí)行 npm install
• 創(chuàng)建~/.tern-config文件, 并加入以下設(shè)置, 在項(xiàng)目文件夾中沒(méi)有設(shè)置.tern-project文件時(shí), 每次tern都會(huì)優(yōu)先加載這個(gè)設(shè)置文件

 {
   "libs": [
     "browser",
     "jquery",
     "react"
   ],
   "plugins": {
       "doc_comment": null,
       "angular": {},
       "node": {}
   }
 }

jsctags安裝

npm install -g git+https://github.com/ramitos/jsctags.git

• ~/.vimrc添加對(duì)js處理的配置

let g:tagbar_type_javascript = {
  \ 'ctagsbin' : 'jsctags'
\ }

vim-javascript

vim-javascript是vim用的JavaScript高亮插件, 直裝接用Vundle安裝就好了, 然后按照官網(wǎng)設(shè)置就好了

emmet-vim

emmet-vim是一個(gè)在vim中使用emmet的插件, emmet相信前端再熟悉不過(guò)了, 這里就不多做介紹了
安裝就跟平時(shí)安裝Vundle插件沒(méi)有什么區(qū)別
這里唯一要說(shuō)的就是vim中默認(rèn)的emmet快捷鍵不是tab是<C-y>,

讓vim支持markdown

這里我們需要vim-markdown和vim-instant-markdown

• 安裝vim-markdown

我用的是vundle管理插件挺身，所以修改.vimrc锌仅，添加

Plug 'godlygeek/tabular'
Plug 'plasticboy/vim-markdown'

之后執(zhí)行

:PlugInstall

這里作者提到如用vim-plug管理插件，那么godlygeek/tabular這個(gè)插件必須在plasticboy/vim-markdown之前

• 安裝vim-instance-markdown

這是一個(gè)實(shí)時(shí)預(yù)覽的插件贱傀，當(dāng)你用vim打開(kāi)markdown文檔的時(shí)候，會(huì)自動(dòng)打開(kāi)一個(gè)瀏覽器窗口府寒，并且可以實(shí)時(shí)預(yù)覽报腔。此插件目前只支持OSX 和 Unix/Linuxes操作系統(tǒng)。

安裝之前需要先安裝node.js
用npm安裝依賴

sudo npm -g install instant-markdown-d

在.vimrc文件中添加：

Plug 'suan/vim-instant-markdown'

安裝即可

• 更新: vim-instant-markdown可以用markdown-preview代替, 這個(gè)也挺好用的
  
  

vim-indentline

indentline是一款顯示縮進(jìn)對(duì)齊線的工具, 安裝方法同上
安裝完成后可以在.vimrc中設(shè)置對(duì)齊線顏色和樣式

let g:indentLine_color_term = 239
let g:indentLine_char = 'c' // where 'c' can be any ASCII character. You can also use one of |, ┆, │, ?, or ▏ to display more beautiful lines. However, these characters will only work with files whose encoding is UTF-8.

nerdcommenter

nerdcommenter是vim的注釋插件

然后使用<leader>cc快捷鍵進(jìn)行注釋選中的行纤房，<leader>cu進(jìn)行反注釋翻诉。

其中<leader>是vim的leader鍵盤(pán)，默認(rèn)情況下是反斜桿\碰煌，則上述快捷鍵分別為：\cc和cu。你可以使用命令自定義吁津，例如命令let mapleader="\<Space>"將<leader>定義為空格鍵。

還有不懂的使用:help NERDCommenter命令查看幫助碍脏。

簡(jiǎn)單介紹下NERD Commenter的常用鍵綁定，詳析的使用方法役拴，請(qǐng):help NERDCommenter。
在Normal或者Visual 模式下：

• <leader>ca
  在可選的注釋方式之間切換河闰，比如C/C++ 的塊注釋/* */和行注釋//
• <leader>cc
  注釋當(dāng)前行
• <leader>c<space>
  切換注釋/非注釋狀態(tài)
• <leader>cs
  以”性感”的方式注釋
• <leader>cA
  在當(dāng)前行尾添加注釋符褥紫，并進(jìn)入Insert模式
• <leader>cu
  取消注釋
• <leader>c$
  從光標(biāo)開(kāi)始到行尾注釋 ，這個(gè)要說(shuō)說(shuō)因?yàn)?code>c$也是從光標(biāo)到行尾的快捷鍵 部念，這個(gè)按過(guò)<leader>后,要快一點(diǎn)按c$
• 2<leader>cc
  光標(biāo)以下2行添加注釋, 這里面2可以替換成任意數(shù)字
• 2<leader>cu
  光標(biāo)以下2行取消注釋, 這里面2可以替換成任意數(shù)字
• <leader>2,cm
  光標(biāo)以下count行添加塊注釋(2,cm)
• Normal模式下氨菇，幾乎所有命令前面都可以指定行數(shù)
• Visual模式下執(zhí)行命令，會(huì)對(duì)選中的特定區(qū)塊進(jìn)行注釋/反注釋

vim-surround

vim-surround是一款添加引號(hào), 括號(hào)等符號(hào)的插件, 我們可以通過(guò)這個(gè)插件方便的給單詞, 句子, 行等快速的添加引號(hào), 括號(hào)等, 直接安裝好了就能用, 不需要配置
具體的使用可以參考這篇文章https://blog.csdn.net/demorngel/article/details/69055317

vim的一些其他設(shè)置

在.vimrc中, 我們還可以對(duì)其他一些東西做設(shè)置, 下面就是一些典型的設(shè)置:

set helplang=cn 中文幫助文檔(前提是下了中文包)
syntax enable 語(yǔ)法高亮
syntax on  自動(dòng)語(yǔ)法高亮
set number 顯示行號(hào)
set hrs 搜索高亮
colorscheme desert 設(shè)定配色方案, 需要提前下載配色方案
set guifont=Consolas:h12:cANSI 英文字體
set guifontwide=SimSun-ExtB:h12:cGB2312
set tabstop=4 表示Tab代表4個(gè)空格的寬度
set shiftwidth=4 表示代碼塊換行縮進(jìn)4格
set expandtab 表示Tab自動(dòng)轉(zhuǎn)換成空格
set autoindent 表示換行后自動(dòng)縮進(jìn)
set autoread  當(dāng)文件在外部被修改時(shí)乌询，自動(dòng)重新讀取
set history=400 vim記住的歷史操作的數(shù)量豌研，默認(rèn)的是20
set nocompatible 使用vim自己的鍵盤(pán)模式,而不是兼容vi的模式
set confirm 處理未保存或者只讀文件時(shí),給出提示
set smartindent 智能對(duì)齊

yarn global安裝的依賴包地址是~/.config/yarn/global
npm global安裝的依賴包地址是/usr/local/lib/node_modules/

經(jīng)過(guò)上面的配置, vim已經(jīng)算是一個(gè)很不錯(cuò)的前端編輯器了, 我們可以很方便的使用了。