在開篇我要說的是, 有很多人希望將vim打造成一個ide, 我個人不是很贊成這個觀點, 因為vim無論怎么配置都不會有ide方便和強大, 所以我覺得如果你追求vim像ide一樣強大, 那還不如直接去用ide好了, 所以這篇文章并不是教你怎么把vim弄的像ide一樣強大, 只是教你如何讓vim變的更順手而已
先把我的.vimrc配置文件貼一下
" 基本設(shè)置
set number
set hls
"語法高亮
syntax on
syntax enable
" 縮進設(shè)置
set shiftwidth=2 " 設(shè)置格式化時代碼縮進為2個空格
set tabstop=2 " tab鍵縮進為4格子
set expandtab " tab鍵轉(zhuǎn)換為空格
set smartindent " 智能縮進
set incsearch " 開啟實時搜索功能
set ignorecase " 搜索時大小寫不敏感
set wildmenu " vim 自身命令行模式智能補全
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>
" 顯示行號
" let NERDTreeShowLineNumbers=1
" let NERDTreeAutoCenter=1
" 是否顯示隱藏文件
let NERDTreeShowHidden=1
" 在終端啟動vim時，共享NERDTree
let g:nerdtree_tabs_open_on_console_startup=1
" 忽略一下文件的顯示
let NERDTreeIgnore=['\.pyc','\~$','\.swp']
" 顯示書簽列表
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
"打開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 "對齊線顏色
" let g:indentLine_char = 'c' "對齊線符號, c表示任意ASCII碼字符, 你還可以用下面這幾個符號之一: |, ┆, │, ?, 或 ▏
" ale-setting {{{
let g:ale_set_highlights = 0
"自定義error和warning圖標
let g:ale_sign_error = '?'
let g:ale_sign_warning = '?'
"在vim自帶的狀態(tài)欄中整合ale
let g:ale_statusline_format = ['? %d', '? %d', '? OK']
"顯示Linter名稱,出錯或警告等相關(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%]'
"打開文件時不進行檢查
" let g:ale_lint_on_enter = 0
"普通模式下，sp前往上一個錯誤或警告，sn前往下一個錯誤或警告
"nmap sp <Plug>(ale_previous_wrap)
"nmap sn <Plug>(ale_next_wrap)
"<Leader>s觸發(fā)/關(guān)閉語法檢查
"nmap <Leader>s :ALEToggle<CR>
"<Leader>d查看錯誤或警告的詳細信息
"nmap <Leader>d :ALEDetail<CR>
"使用clang對c和c++進行語法檢查，對python使用pylint進行語法檢查
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
功能說明
vim-plug是管理插件的插件，主要用來管理和安裝vim中的插件。
安裝
- 安裝vim-plug
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
- 在
.vimrc文件中增加如下代碼：
" 設(shè)置vim-plug管理的插件安裝位置
call plug#begin('~/.vim/bundle')
" 下面就是一些插件的例子.
" 插件必須裝在 plug#begin/end這兩行命令之間.
" 對于在github上面的插件, 我們可以用以下方法添加, 只需要添加`用戶名/插件名稱`就行
Plug 'tpope/vim-fugitive'
" 對于在http://vim-scripts.org/vim/scripts.html下的插件, 我們直接添加插件名稱就行
" Plug 'L9'
" 對于不是github也不是vim-scripts的插件, 則需要用完整路徑
Plug 'git://git.wincent.com/command-t.git'
" 本地或者你自己的插件
Plug 'file:///home/gmarik/path/to/plugin'
" 所有的插件都需要安裝在這條命令之前
call plug#end() " 必須的
- 退出vim并重啟vim后在vim中輸入命令
:PlugInstall安裝所有添加到.vimrc的插件 - 如果沒有
.vimrc文件, 則自己創(chuàng)建一個touch ~/.vimrc - 以后只要直接在Vim中輸入指令
:PlugUpdate就能更新插件 - 我們還可以在Vim中輸入指令
:PlugUpgrade來更新vim-plug
Vim主題
這里推薦solarized主題
安裝也很簡單
將下載下來的solarized.vim文件拷貝到~/.vim/colors/中, 然后在.vimrc中輸入如下代碼:
syntax enable
set background=dark
colorscheme solarized
最終配色效果如下:
NERDTree
下載地址
https://github.com/scrooloose/nerdtree
2、功能說明
NERDTree是Vim最常用的插件之一，可以在Vim運行時顯示目錄和文件結(jié)構(gòu)，類似TextMate左側(cè)的文件瀏覽器，但操作起來更為方便，你可以在手不離開鍵盤的情況下快速瀏覽文件，并在文件和文件夾之間進行切換。
安裝
- 進入
.vimrc - 添加
Plug 'scrooloose/nerdtree' - 在Vim中運行
:PlugInstall
使用說明
打開Vim，輸入:NERDTree，即可呼出執(zhí)行Vim命令的當前目錄的文件目錄。為了方便使用，我在.vimrc中定義了快捷鍵，可以用Ctrl+t打開NERDTree，你可以定義自己習(xí)慣的快捷鍵。
NERDTree提供了豐富的鍵盤操作方式來瀏覽和打開文件，我簡單介紹一些常用的快捷鍵：
文件相關(guān)操作
o : 在光標所在的上一個窗口打開文件，并將光標置于新打開的窗口
go : 預(yù)覽文件，光標停留在NERDTree窗口中
t : 在新標簽中打開文件并激活
gt : 在新標簽打開文件，光標留在NERDTree窗口中
i : 水平分割打開文件
gi : 水平分割預(yù)覽
s : 垂直分割打開文件
gs : 垂直分割預(yù)覽
目錄樹相關(guān)操作
o : 展開/關(guān)閉目錄
O : 遞歸展開目錄。慎用，如果目錄層級多，打開會很慢
x : 關(guān)閉父目錄
C : 切換光標所在目錄為根目錄
u : 切換目錄樹的根目錄為上層目錄
U : 切換目錄樹的根目錄為上層目錄，并保持舊的目錄樹的狀態(tài)
r : 刷新當前目錄
R : 刷新當前根目錄（這個在新加入文件后會用到）
cd : 切換vim工作目錄為光標所在目錄（命令模式下:pwd可查看當前工作目錄）
想了解更多操作方式，可以通過? 查看詳細的幫助信息
配置NERDTree
在.vimrc中對NERDTree進行配置
" 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就能打開NERDTree
Command-T
下載地址
https://wincent.com/products/command-t
2、功能說明
Command-T是一個基于Ruby和C擴展實現(xiàn)的快速文件瀏覽的插件，類似TextMate的Go to File（Command+T呼出）功能，或Eclipse的Open Resource（Command+Shift+r）功能，可以通過模糊匹配快速定位并打開文件。
安裝
由于現(xiàn)在的mac都自帶ruby了, 所以一般都不需要安裝ruby
在
.vimrc中添加Plug 'wincent/command-t'并在vim中運行命令:PlugInstall編譯C擴展
cd ~/.vim/bundle/command-t/ruby/command-t/ext/command-t
ruby extconf.rb
make
使用說明
輸入:CommandT可進入文件快速定位功能
- ctrl+j/k 上下選擇文件，選中后回車打開文件
- ctrl+t 以tab方式打開文件
- ctrl+s/v 可以水平或垂直分割窗口打開文件
- ctrl+c 退出該模式
該插件還有個常用命令，:CommandTBuffer，可以瀏覽緩沖區(qū)的文件，并重新打開。操作方式同上。
注意事項
Vim版本需要支持ruby擴展。我們可以在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命令時如果出現(xiàn)找不到mkmf包的情況，說明你需要安裝ruby-dev的包
如果覺得Command-T安裝麻煩, 可以使用ctrlp, 安裝和使用非常簡單, 就是有點慢
在.vimrc中增加下面代碼可以開啟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
功能說明
airline是Vim的一個非常漂亮的狀態(tài)欄插件，安裝了airline之后，Vim底部將會出現(xiàn)一個增強型狀態(tài)欄，當Vim處于NORMAL、INSERT、BLOCK等狀態(tài)時，狀態(tài)欄會呈現(xiàn)不同的顏色，同時狀態(tài)欄還會顯示當前編輯文件的格式（uft-8等）、文件類型（java、xml等）和光標位置等，喜歡的就裝。
如圖所示：
安裝
安裝airline
Plug 'vim-airline/vim-airline'
:PlugInstall
使用說明
安裝之后，再次打開Vim，你就會發(fā)現(xiàn)底部已經(jīng)多了一個彩色的狀態(tài)欄了。
在.vimrc中添加下面語句可以打開airline頂部的tab, 用來顯示buffer信息
let g:airline#extensions#tabline#enabled = 1
let g:airline#extensions#tabline#buffer_nr_show = 1
主題安裝
請參照https://github.com/vim-airline/vim-airline-themes
注意事項
通常第一次裝完都會出現(xiàn)亂碼, 這是由于字體庫的問題導(dǎo)致的, 通過官方提供的辦法就可以解決
# 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
自動匹配括號
https://github.com/jiangmiao/auto-pairs
安裝地址
Plug 'jiangmiao/auto-pairs'
Ctags
- 安裝exuberant ctags
exuberant ctags 的安裝，可用brew來安裝
brew install ctags-exuberant
安裝完， which ctags
如果是/usr/bin/ctags,系統(tǒng)默認先看到我們安裝的ctags
打開~/根目錄下的.profile，如果你也沒發(fā)現(xiàn)有這個文件，沒關(guān)系，創(chuàng)建一個！
然后在里面添加：export PATH="/usr/local/bin:/usr/local/sbin:$PATH"
再到終端執(zhí)行：source ~/.profile
然后再看看which ctags，如無意外，應(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
- 使用ctags編譯項目tags文件
終端cd 項目目錄，然后執(zhí)行：
ctags -R
你會發(fā)現(xiàn)目錄中多了一個tags的文件，這個就是vim里面taglist會尋找的文件！
在vim中對準某個對象調(diào)用的方法按control + ] 看看能否調(diào)到那個方法的定義！？
control + t 返回原方法
YouCompleteMe
YouCompleteMe是一個快速、支持模糊匹配的vim代碼補全引擎。由于它是基于Clang引擎為C/C++/Objective-C提供代碼提示，也支持其他語言代碼提示的引擎，例如基于Jedi的Python代碼補全，基于OmniSharp的C#代碼補全，基于Gocode的Go代碼補全。
- 安裝YouCompleteMe
Plug 'Valloric/YouCompleteMe'
- 安裝cmake, 因為YouCompeleteMe需要用到cmake編譯, 所以我們需要先安裝cmake
brew install cmake
- 編譯YouCompleteMe
如果我們只需要C系語法的補全, 則需要安裝clang并執(zhí)行下列代碼
cd ~/.vim/bundle/YouCompleteMe
./install.py --clang-completer
對于JavaScript的補全我們則需要安裝npm后, 執(zhí)行下面代碼
cd ~/.vim/bundle/YouCompleteMe
./install.py
對于TypeScript的補全我們則需要在npm中安裝過TypeScript依賴后, 執(zhí)行下面代碼
cd ~/.vim/bundle/YouCompleteMe
./install.py
其他語言同樣的都是安裝各自語言的編譯器后, 執(zhí)行下面代碼
cd ~/.vim/bundle/YouCompleteMe
./install.py
你也可以在全部安裝完xbuild, go, tsserver, node, npm, rustc, 和 cargo等編譯器后, 執(zhí)行下列代碼完全對所有YouCompleteMe支持的所有語言進行代碼補全的編譯
cd ~/.vim/bundle/YouCompleteMe
./install.py --all
ale
ale是一款支持多語言的語法檢查插件, 同樣用vim-plug安裝
安裝后再.vimrc中進行如下設(shè)置, 就可以對python, js, c ,c++進行語法檢測了, 設(shè)置完成后, 安裝相應(yīng)語言的錯誤檢測工具即可
" ale-setting {{{
let g:ale_set_highlights = 0
"自定義error和warning圖標
let g:ale_sign_error = '?'
let g:ale_sign_warning = '?'
"在vim自帶的狀態(tài)欄中整合ale
let g:ale_statusline_format = ['? %d', '? %d', '? OK']
"顯示Linter名稱,出錯或警告等相關(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%]'
"打開文件時不進行檢查
let g:ale_lint_on_enter = 0
"普通模式下，sp前往上一個錯誤或警告，sn前往下一個錯誤或警告
nmap sp <Plug>(ale_previous_wrap)
nmap sn <Plug>(ale_next_wrap)
"<Leader>s觸發(fā)/關(guān)閉語法檢查
nmap <Leader>s :ALEToggle<CR>
"<Leader>d查看錯誤或警告的詳細信息
nmap <Leader>d :ALEDetail<CR>
"使用clang對c和c++進行語法檢查，對python使用pylint進行語法檢查
let g:ale_linters = {
\ 'c++': ['clang'],
\ 'c': ['clang'],
\ 'python': ['pylint'],
\ 'javascript': ['eslint'],
\}
" }}}
因為我們制定了eslint作為js檢測工具, 所以我們就需要安裝并設(shè)置eslint
- 在npm中全局安裝eslint, 我自己用的是yarn, npm安裝我想前端應(yīng)該都不陌生, 這里就不詳細復(fù)述了
yarn global add eslint
- 為了使eslint能應(yīng)用到我們的項目, 我們每次都需要在新項目的根目錄下先初始化一個eslint配置文件, 并根據(jù)提示配置eslint, 這需要注意, 如果我們要支持react語法檢測, 需要在npm全局環(huán)境下安裝eslint-plugin-react, 同時eslint依賴package.json文件, 所以在配置eslint前需要提前配置好package.json文件
eslint --init
- 用一個xxx文件測試eslint是否安裝成功
eslint xxx.js
如果可以運行成功就說明配置好了, 運行錯誤則根據(jù)提示修改配置即可
-
當所有配置都弄好后, 再用vim打開文件, 就會有語法檢測了
autoformat
autoformat, 同syntastic差不多,autoformat也是需要調(diào)用外部插件才能實現(xiàn)代碼格式化的vim格式化代碼插件
js的格式化我們需要安裝js-beautify
- 先用npm安裝js-beautify
yarn global add js-beautify
tagbar
之前我們左窗口用NERDTree實現(xiàn)項目文件夾瀏覽, 這次右窗口用tagbar插件 Plug 'majutsushi/tagbar，為我們提供了一個簡單的方式去瀏覽當前文件的結(jié)構(gòu)，并且支持在各個標簽之間快捷的跳轉(zhuǎn)。tagbar需要用到我們上面提到的ctags, 所以請先安裝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本身對javascript的分析不夠，所以還需要額外的插件去支持對javascr以及ES6做標簽化處理，推薦解決方案是使用jsctags，當然也可以采用其他tagbar在wiki中的其他方案。關(guān)于jsctags的解決方式如下：
- 用 vim-plug 安裝 tern_for_vim 插件
- 在
~/.vim/bundle/tern_for_vim下執(zhí)行npm install - 創(chuàng)建
~/.tern-config文件, 并加入以下設(shè)置, 在項目文件夾中沒有設(shè)置.tern-project文件時, 每次tern都會優(yōu)先加載這個設(shè)置文件
{
"libs": [
"browser",
"jquery",
"react"
],
"plugins": {
"doc_comment": null,
"angular": {},
"node": {}
}
}
jsctags安裝
npm install -g git+https://github.com/ramitos/jsctags.git
-
~/.vimrc添加對js處理的配置
let g:tagbar_type_javascript = {
\ 'ctagsbin' : 'jsctags'
\ }
vim-javascript
vim-javascript是vim用的JavaScript高亮插件, 直裝接用Vundle安裝就好了, 然后按照官網(wǎng)設(shè)置就好了
emmet-vim
emmet-vim是一個在vim中使用emmet的插件, emmet相信前端再熟悉不過了, 這里就不多做介紹了
安裝就跟平時安裝Vundle插件沒有什么區(qū)別
這里唯一要說的就是vim中默認的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這個插件必須在plasticboy/vim-markdown之前
- 安裝vim-instance-markdown
這是一個實時預(yù)覽的插件，當你用vim打開markdown文檔的時候，會自動打開一個瀏覽器窗口，并且可以實時預(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代替, 這個也挺好用的
vim-indentline
indentline是一款顯示縮進對齊線的工具, 安裝方法同上
安裝完成后可以在.vimrc中設(shè)置對齊線顏色和樣式
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快捷鍵進行注釋選中的行，<leader>cu進行反注釋。
其中<leader>是vim的leader鍵盤，默認情況下是反斜桿\，則上述快捷鍵分別為：\cc和cu。你可以使用命令自定義，例如命令let mapleader="\<Space>"將<leader>定義為空格鍵。
還有不懂的使用:help NERDCommenter命令查看幫助。
簡單介紹下NERD Commenter的常用鍵綁定，詳析的使用方法，請:help NERDCommenter。
在Normal或者Visual 模式下：
-
<leader>ca
在可選的注釋方式之間切換，比如C/C++ 的塊注釋/* */和行注釋// -
<leader>cc
注釋當前行 -
<leader>c<space>
切換注釋/非注釋狀態(tài) -
<leader>cs
以”性感”的方式注釋 -
<leader>cA
在當前行尾添加注釋符，并進入Insert模式 -
<leader>cu
取消注釋 -
<leader>c$
從光標開始到行尾注釋 ，這個要說說因為c$也是從光標到行尾的快捷鍵 ，這個按過<leader>后,要快一點按c$ -
2<leader>cc
光標以下2行添加注釋, 這里面2可以替換成任意數(shù)字 -
2<leader>cu
光標以下2行取消注釋, 這里面2可以替換成任意數(shù)字 -
<leader>2,cm
光標以下count行添加塊注釋(2,cm) - Normal模式下，幾乎所有命令前面都可以指定行數(shù)
- Visual模式下執(zhí)行命令，會對選中的特定區(qū)塊進行注釋/反注釋
vim-surround
vim-surround是一款添加引號, 括號等符號的插件, 我們可以通過這個插件方便的給單詞, 句子, 行等快速的添加引號, 括號等, 直接安裝好了就能用, 不需要配置
具體的使用可以參考這篇文章https://blog.csdn.net/demorngel/article/details/69055317
vim的一些其他設(shè)置
在.vimrc中, 我們還可以對其他一些東西做設(shè)置, 下面就是一些典型的設(shè)置:
set helplang=cn 中文幫助文檔(前提是下了中文包)
syntax enable 語法高亮
syntax on 自動語法高亮
set number 顯示行號
set hrs 搜索高亮
colorscheme desert 設(shè)定配色方案, 需要提前下載配色方案
set guifont=Consolas:h12:cANSI 英文字體
set guifontwide=SimSun-ExtB:h12:cGB2312
set tabstop=4 表示Tab代表4個空格的寬度
set shiftwidth=4 表示代碼塊換行縮進4格
set expandtab 表示Tab自動轉(zhuǎn)換成空格
set autoindent 表示換行后自動縮進
set autoread 當文件在外部被修改時，自動重新讀取
set history=400 vim記住的歷史操作的數(shù)量，默認的是20
set nocompatible 使用vim自己的鍵盤模式,而不是兼容vi的模式
set confirm 處理未保存或者只讀文件時,給出提示
set smartindent 智能對齊
yarn global安裝的依賴包地址是
~/.config/yarn/global
npm global安裝的依賴包地址是/usr/local/lib/node_modules/
經(jīng)過上面的配置, vim已經(jīng)算是一個很不錯的前端編輯器了, 我們可以很方便的使用了。
