概述

本人是從事web開發(fā)裁僧，負(fù)責(zé)前后端聊疲；前端用的是React + ant, 后端則用的是php語(yǔ)言的laravel获洲；本篇教程將講解我的vim配置贡珊；該配置適用于我的日常開發(fā)；
主要功能

• 代碼補(bǔ)全（支持jsx, ts, php）
• 代碼錯(cuò)誤提示
• 引用補(bǔ)全（php的自動(dòng)補(bǔ)上use, js自動(dòng)補(bǔ)上import）
• 定義函數(shù)跳轉(zhuǎn)

什么是vim爱致？

如果連vim是什么都不知道的話蒜鸡，那請(qǐng)關(guān)掉本頁(yè)面，右拐蒲讯，哪涼快哪呆著去灰署；

vim 的簡(jiǎn)單說(shuō)明和用法

vim的快捷鍵和用法很復(fù)雜，因此也勸退了很多小白悦昵；其實(shí)但指，對(duì)于剛?cè)腴T沒(méi)多久的用戶抗楔，其實(shí)是不必急著去全部了解快捷鍵和用法连躏；這里大致簡(jiǎn)單的介紹下vim的幾種模式和幾個(gè)簡(jiǎn)單的用法入热；
1勺良、三個(gè)模式

2勇婴、鍵盤操作

vim的按鍵動(dòng)作很多耕渴，可分為動(dòng)作, 命令, 操作橱脸； 記住常用的幾個(gè)即可，沒(méi)必要全部去記医寿；而像類似方向動(dòng)作蘑斧，就不需要去記乌叶，因?yàn)楝F(xiàn)在鍵盤的方向鍵就可以使用（vim下准浴，方向動(dòng)作是h, j, k,l）

鍵盤的操作乐横，大致可以分為三類葡公，在不同的模式下按下的按鍵都有不同的含義：
動(dòng)作： 需要Normal下操作，比如移動(dòng)光標(biāo)涵亏；
命令： 可以模式切換气筋，或者直接進(jìn)行文本內(nèi)容的修改
操作： 需要選中 + 按鍵的指令, 或者 按鍵 + 動(dòng)作

常用按鍵：

常用command命令谴轮， 記住兩個(gè)即可第步，保存:w, 退出vim:q粘都。

全部的按鍵可以參考一下的鍵盤圖

vim 鍵盤圖

3翩隧、常用的自帶快捷鍵

vim的所有快捷鍵都是可以自定義或者覆蓋堆生，所以vim自帶的顽频，我個(gè)人覺得比較還用且常用的，記住幾個(gè)就可以了

vim配置

接下來(lái)，我們可以通過(guò)配置最住，來(lái)打造屬于自己的的vim
在家目錄~打開.vimrc文件怠惶，沒(méi)有則創(chuàng)建策治；注意的一點(diǎn)是， 配置的格式不是json的混蔼， 如果要注釋掉某個(gè)配置惭嚣。則用"來(lái)注釋

" 基本設(shè)置
set helplang=cn " 設(shè)置幫助說(shuō)明文檔為中文
set encoding=utf-8 " 設(shè)置文本編碼為utf-8
set t_Co=256 " 即terminal Color晚吞，設(shè)置vim的顏色值
set nocompatible " 關(guān)閉對(duì)vim的兼容

" 文本相關(guān)設(shè)置
set number " 開啟行號(hào)槽地，即在vim的左邊部分顯示數(shù)字行號(hào)
syntax on " 自動(dòng)語(yǔ)法高亮
set cursorline " 讓光標(biāo)所在的行高亮
filetype on " 開啟文件檢查
filetype indent on " 文本縮進(jìn)
set autoindent  " 設(shè)置為自動(dòng)縮進(jìn)
set list " 顯示不可見字符
" 用特定的符號(hào)替換看不見的字符闷盔，比如tab逢勾， 空格
set listchars=tab:?\ ,trail:?

" 文本tab的相關(guān)設(shè)置
set tabstop=2 " tab鍵溺拱， 默認(rèn)為2個(gè)縮進(jìn)
set shiftwidth=2 " 設(shè)置兩個(gè)空格寬度
set softtabstop=2
au FileType php setlocal tabstop=4 " php 為4個(gè)縮進(jìn)
au FileType php setlocal shiftwidth=4
au FileType php setlocal softtabstop=4
set expandtab

" 文本搜索
set hlsearch " 搜索的關(guān)鍵詞高亮
exec "nohlsearch" " 每次進(jìn)入vim都去掉搜索的高亮
set incsearch " 高亮所有匹配的字符
set ignorecase " 忽略大小寫
set smartcase " 智能的判斷要不要區(qū)分搜索模式大小寫, 如果搜索的文字中出現(xiàn)大寫迫摔，則區(qū)分大小寫搜索

" 其他設(shè)置
set scrolloff=5 " 距離行尾還有5行
" 打開文件后恢復(fù)關(guān)閉前所在的位置
au BufReadPost * if line("'\"") > 1 && line("'\"") <= line("$") | exe "normal! g'\"" | endif

vim 的強(qiáng)大就是可以自定義快捷鍵來(lái)實(shí)現(xiàn)某種功能句占，而這種快捷并不想vscode那樣已經(jīng)存在的纱烘。這里需要理解幾個(gè)鍵位模式

" 文本縮進(jìn)
nmap <tab> V>  " tab 鍵縮進(jìn)
nmap <s-tab> V< " shift + tab 回退縮進(jìn)
vmap <tab> >gv
vmap <s-tab> <gv

" 搜搜用- = 鍵來(lái)切換上下文, 如搜索關(guān)鍵詞時(shí)， 按- = 查找上一個(gè)或下一個(gè)關(guān)鍵詞
nmap = nzz
nmap - Nzz

" 復(fù)制到剪貼板
nmap <c-v> "+gp  
nmap <c-c> "+y

” 行移動(dòng), 即Alt + 方向鍵來(lái)移動(dòng)代碼至扰， 部分終端的alt 鍵用A來(lái)表示 
nmap <M-up> :m .-2<CR>==
nmap <M-down> :m .+1<CR>==
imap <M-up> <Esc>:m .-2<CR>==gi
imap <M-down> <Esc>:m .+1<CR>==gi
vmap <M-up> :m '<-2<CR>gv=gv
vmap <M-down> :m '>+1<CR>gv=gv

" 分屏
map sl :set splitright<CR>:vsplit<CR>
map sh :set nosplitright<CR>:vsplit<CR>
map sk :set nosplitbelow<CR>:split<CR>
map sj :set splitbelow<CR>:split<CR>

vim 還可以自定義某個(gè)按鍵為熱鍵來(lái)組合快捷鍵

let mapleader=' '  " 將空格鍵設(shè)置為熱鍵

" 取消高亮旬盯， 當(dāng)我們搜索關(guān)鍵字的時(shí)候胖翰，之后要取消掉搜索的高亮
nmap <LEADER><CR> :nohlsearch<CR> 

" 切換分屏
map <LEADER>l <C-w>l
map <LEADER>k <C-w>k
map <LEADER>h <C-w>h
map <LEADER>j <C-w>j

" 改變分屏大小
map <LEADER><up> :res +3<CR>
map <LEADER><down> :res -3<CR>
map <LEADER><right> :vertical resize-3<CR>
map <LEADER><left> :vertical resize+3<CR>

" 設(shè)置tab分頁(yè)
map <LEADER>t :tabe<CR> " 打開新的tab
map <LEADER>- :-tabnext<CR> " 向左切換tab
map <LEADER>= :+tabnext<CR> " 向右切換tab

vim 插件安裝

vim 可以像vscode那樣萨咳，安裝插件培他， 但是在安裝插件之前舀凛，需要安裝個(gè)插件管理插件，用來(lái)管理vim的插件馋记；vim的管理插件有很多種梯醒，我這里介紹的是vim-plug;

# 安裝茸习， 將安裝包保存到~/.vim/autoload/下
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

然后在~/.vimrc的配置里号胚，指定插件的目錄涕刚， 通常都放在~/.vim/plugged/下

" vim插件
call plug#begin('~/.vim/plugged')

要安裝插件的哈杜漠，也是在配置文件里加上Plug [插件名]驾茴， 然后保存锈至，從新打開vim, 直接輸入:PlugInstall, 就會(huì)開始安裝

插件安裝

vim插件推薦

1峡捡、目錄樹
這個(gè)會(huì)在左邊顯示當(dāng)前工程的目錄

目錄樹

Plug 'scrooloose/nerdtree', { 'on': 'NERDTreeToggle' } 

" 目錄樹的相關(guān)設(shè)置
map <LEADER>n :NERDTreeToggle<CR>  " 熱鍵 + n 打開或者關(guān)閉
let g:NERDTreeDirArrowExpandable = '?' " 合上目錄顯示的圖標(biāo)
let g:NERDTreeDirArrowCollapsible = '?' " 展開目錄顯示的圖標(biāo)

2迄损、底部狀態(tài)欄
vim-airline/vim-airline,可以再vim 底部顯示當(dāng)前編輯的文件海蔽，項(xiàng)目的git分支等相關(guān)信息

底部狀態(tài)欄

Plug 'vim-airline/vim-airline' 
Plug 'vim-airline/vim-airline-themes' " 狀態(tài)欄的主題插件

" 設(shè)置主題色
let g:airline_theme='light'

3党窜、主題插件
vim 自帶了幾個(gè)主題幌衣，我們也可以通過(guò)安裝插件的方式豁护，來(lái)使用某個(gè)主題楚里， 我推薦兩個(gè)主題monokai和snazzy

monokai主題

Plug 'sickill/vim-monokai'
Plug 'connorholyday/vim-snazzy'

" 指定默認(rèn)的主題
syntax enable
colorscheme monokai

4班缎、tab對(duì)齊線
像其他的編譯器那樣达址，每隔一個(gè)tab沉唠， 都會(huì)有個(gè)標(biāo)示線满葛， 插件Yggdroot/indentLine就可以實(shí)現(xiàn)該功能

tab對(duì)齊線

Plug 'Yggdroot/indentLine' 

let g:indentLine_color_term = 243 " 對(duì)齊線的顏色
let g:indentLine_char = '┊' " 用字符串代替默認(rèn)的標(biāo)示線

6牍帚、初始會(huì)話界面
默認(rèn)直接輸入vim， 不打開指定某個(gè)文件的話肃叶，界面應(yīng)該是個(gè)公益廣告之類的十嘿；插件mhinz/vim-startify會(huì)在打開的初始界面顯示該目錄下的文件和最近常打開的文件，像vscode那樣蹦魔， 上下選擇文件勿决，即可打開文件

打開界面

Plug 'mhinz/vim-startify'

7、MarkDown插件
平時(shí)需要寫點(diǎn)markdown筆記咆繁，iamcco/markdown-preview.nvim 也可以讓vim編寫markdown筆記玩般，并且實(shí)時(shí)預(yù)覽
[圖片上傳失敗...(image-a91b95-1600610620195)]

Plug 'iamcco/markdown-preview.nvim', { 'do': { -> mkdp#util#install() }, 'for' :['markdown', 'vim-plug'] }

" 熱鍵 + m 打開markdown文件預(yù)覽
autocmd Filetype markdown map <LEADER>m :MarkdownPreview <CR>

8坏为、文件查找
在vscode中久脯，可以使用戶快捷鍵ctrl+p快速插件文件帘撰，同樣摧找，有個(gè)插件叫ctrlp可以實(shí)現(xiàn)類似功能蹬耘，但是速度很慢综苔， 我這里推薦一個(gè)速度很快的插件junegunn/fzf如筛， 這個(gè)插件需要結(jié)合軟件fzf使用;

文件查找

• 安裝fzf軟件

# mac
brew install fzf

# ubuntu
sudo apt-get install fzf

# power shell
scoop install fzf

• vimrc 中安裝與配置

Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim' 

nmap <C-P> :Files<CR> " ctrl  + p 進(jìn)行搜索

開發(fā)插件推薦

已經(jīng)幾個(gè)插件僅適用于做web開發(fā)的晤柄，包括前端和后端芥颈， 前端為js, 后端為php
1爬坑、emmet
做前端開發(fā)的怕品，對(duì)emmet這插件應(yīng)該不陌生肉康，在submline和vscode中也是必裝插件之一吼和；該軟件可以快速編寫html和標(biāo)簽補(bǔ)全, 默認(rèn)的快捷鍵為ctrl y + ,

Plug 'mattn/emmet-vim' 

let g:user_emmet_install_global = 0 " 取消全局作用
autocmd FileType html,css,js,vue,jsx EmmetInstall " 僅對(duì)前端的幾個(gè)類型的文件起作用

let g:user_emmet_leader_key='<C-Y>' " emmet的熱鍵

2刚夺、nginx高亮
vim默認(rèn)是不之支持對(duì)nginx的語(yǔ)法高亮支持的，所以得裝個(gè)插件chr4/nginx.vim

Plug 'chr4/nginx.vim'

3侠姑、代碼提示與補(bǔ)全COC
關(guān)于代碼補(bǔ)全這個(gè)创橄， 我要重點(diǎn)啰嗦下，代碼補(bǔ)全莽红，我自己也很早前早折騰了妥畏，網(wǎng)上的教程也是五花八門，單大多是千篇一律安吁，且不適用醉蚁，比如Valloric/YouCompleteMe這個(gè)插件鬼店，簡(jiǎn)直被牛皮的被各位大牛吹的上天了网棍，這個(gè)在之前的版本里，安裝起來(lái)是特別麻煩的（新的版本里簡(jiǎn)化了安裝）妇智， 他是集成了各種語(yǔ)言的智能補(bǔ)全滥玷， 就是對(duì)php的補(bǔ)全很不友好，且臃腫俘陷；

后來(lái)又找到了一個(gè)對(duì)php支持很好的插件lvht/phpcd.vim, 這個(gè)還支持函數(shù)跳轉(zhuǎn)罗捎， 對(duì)laravel框架支持和友好；但是安裝起來(lái)也很費(fèi)勁拉盾，還經(jīng)常在跳轉(zhuǎn)到定義函數(shù)的時(shí)候，也會(huì)出現(xiàn)不穩(wěn)定報(bào)錯(cuò)的情況豁状；當(dāng)然捉偏，也勉強(qiáng)能用，但是有個(gè)功能實(shí)現(xiàn)不了泻红，就是自動(dòng)補(bǔ)上use, phpstorm 我之所以覺得好用夭禽，就是因?yàn)槌俗詣?dòng)補(bǔ)全外鲫凶，還可以自動(dòng)補(bǔ)上use的功能渗勘；

• 關(guān)于coc 智能補(bǔ)全
  Conqure of Completion這個(gè)是由一個(gè)可以加載插件的的補(bǔ)全插件徙鱼，首先這個(gè)是個(gè)補(bǔ)全的插件晤锥，但是并不是某個(gè)語(yǔ)言提供支持仅财，而是要額外的安裝coc插件, 比如舷蒲，我需要php代碼補(bǔ)全驹沿，那我就需要安裝coc-phpls的coc插件游添，這個(gè)雖然是在vim上使用的惨恭，但是卻是coc的插件;
• 安裝與配置
  coc需要配合node(10.12以上版本)使用秉馏，所以要安裝node，做web開發(fā)的脱羡，應(yīng)該對(duì)node很熟悉了萝究， 這里就不廢話了免都；
  在vimrc中：

Plug 'neoclide/coc.nvim', {'branch': 'release'}  

安裝完后，就需要安裝coc插件
安裝插件有兩種帆竹，一個(gè)就是想在vim的命令行輸入: :CocInstall [插件名稱]就可以了绕娘，還有一個(gè)比較方便的就是寫在vimrc里, 比如我要安裝json和html的支持。

let g:coc_global_extensions = ['coc-json', 'coc-html']

關(guān)閉vim栽连，在打開vim就會(huì)自動(dòng)安裝（安裝過(guò)的就不會(huì)重復(fù)安裝）
如果需要配置coc业舍， 執(zhí)行:CocConfig, 就會(huì)打開coc-setting.json, 在這里面寫一些配置（其實(shí)使用默認(rèn)即可，可配置的東西也不多）

4升酣、coc插件推薦

• php補(bǔ)全coc-phpls
  這個(gè)插件使用起來(lái)跟phpStorm差不多舷暮，而且還比phpStorm還好
  支持：

  1. 類， model識(shí)別和補(bǔ)全
  2. 函數(shù)跳轉(zhuǎn)
  3. 語(yǔ)法檢查
  4. 自動(dòng)補(bǔ)上use 引用
  • PHP提示補(bǔ)全
  • PHP錯(cuò)誤提示
  • php警告
  • 參數(shù)提示
  • 自動(dòng)起別名

vimrc中配置噩茄，這邊我設(shè)置函數(shù)跳轉(zhuǎn)快捷鍵下面，設(shè)置ctrl + b在新tab中打開函數(shù)定義， 以及其他配置

" ctrl + b 跳轉(zhuǎn)到函數(shù)绩聘，并在新的tab頁(yè)面中打開
nmap <silent> <C-b> :call CocAction('jumpDefinition', 'tab drop')<CR>

" 設(shè)置按下tab時(shí)沥割，是選擇補(bǔ)全，而不是輸入tab
inoremap <silent><expr> <TAB>
      \ pumvisible() ? "\<C-n>" :
      \ <SID>check_back_space() ? "\<TAB>" :
      \ coc#refresh()
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>"

function! s:check_back_space() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# '\s'
endfunction

" 回車選中補(bǔ)全凿菩，而不是換行
if exists('*complete_info')
  inoremap <expr> <cr> complete_info()["selected"] != "-1" ? "\<C-y>" : "\<C-g>u\<CR>"
else           
  inoremap <expr> <cr> pumvisible() ? "\<C-y>" : "\<C-g>u\<CR>" 
endif

• js補(bǔ)全coc-tsserver
  前端我用的react + ant, 需要能做到組件識(shí)別和補(bǔ)全机杜，并能自動(dòng)import函數(shù)或類；coc-tsserver剛好能做到這點(diǎn)

  • 組件引入與補(bǔ)全
  • 能識(shí)別補(bǔ)全組件屬性的值

• esline 報(bào)錯(cuò) coc-eslint
  對(duì)于js代碼不規(guī)范衅谷，可用用coc-eslint來(lái)提示和修復(fù), 這個(gè)默認(rèn)設(shè)置就可以用了椒拗，需要更多配置的話，得看看官方文檔

  • esline報(bào)錯(cuò)

• 代碼格式化
  coc-prettier則可以對(duì)代碼進(jìn)行格式化获黔， 默認(rèn)的快捷鍵是熱鍵 + f蚀苛， 支持全篇格式化和僅格式化選中的

vmap <leader>f  <Plug>(coc-format-selected)
nmap <leader>f  <Plug>(coc-format-selected)

這里需要做點(diǎn)修改的是，在:CocConfig中加上配置, 設(shè)置根據(jù)esline規(guī)則進(jìn)行格式化

{
 "prettier.eslintIntegration": true, 
}

上傳配置到github

配置結(jié)束之后玷氏，可以將相關(guān)配置上傳到github上堵未，方便在其他的機(jī)子上部署
工程目錄設(shè)置

- myVim
  - vimrc // 主要配置
  - vim
    - autoload
      - plug.vim // 包管理插件
    - coc-settings.json // coc設(shè)置文件
  - README.MD // 說(shuō)明文檔

部署的時(shí)候，可以利用軟連接盏触，將工程中的配置渗蟹，鏈接到vim配置文件，這個(gè)之后的每次配置修改赞辩，都可以提交到github上

# 假設(shè)工程目錄在~/myVim
# 添加配置文件的軟連接
ln -s ~/myVim/vimrc ~/.vimrc

# 添加插件目錄的軟連接
ln -s ~/myVim/vim ~/.vim

最后推薦NEOVIM

neovim 是基于vim分支重新編譯的版本雌芽； 從性能，體驗(yàn)上都優(yōu)于vim的诗宣，對(duì)vim的插件膘怕，配置全兼容，且有很多獨(dú)占插件召庞，也就是說(shuō)岛心，vim能做的来破，neovim也能做，vim做不了的忘古，neovim也能做得了徘禁。

關(guān)于neovim
因?yàn)関im誕生于上世紀(jì)90年代，現(xiàn)在都過(guò)去二十多個(gè)年頭了髓堪，經(jīng)過(guò)多個(gè)版本的迭代送朱，vim自身就包含了大量代碼，且bug維護(hù)越發(fā)困難干旁，后來(lái)neovim的作者驶沼，就向vim提交了包含大量代碼改動(dòng)的補(bǔ)丁，被vim作者拒絕了争群，理由是大量改動(dòng)可能存在風(fēng)險(xiǎn)回怜。 于是neovim就另起爐灶，開始開發(fā)neovim, 后來(lái)就成為vim系列最熱捧的項(xiàng)目换薄。

我之所以選擇neovim, 不僅僅是性能優(yōu)越玉雾，最主要是neovim的一個(gè)獨(dú)有功能我很喜歡，就是pannel彈窗（雖然是在終端轻要，也會(huì)有個(gè)像模像樣的彈窗）复旬，比如之前介紹的fzf文件查找插件，在neovim中冲泥， 利用pannel彈窗就能更好的體現(xiàn)

neovim 上使用戶fzf功能

安裝
推薦安裝最新版的neovim, 網(wǎng)上安裝的方式很多

# mac下驹碍，利用brew安裝的就是最新版的neovim
brew install neovim

# ubuntu 用apt-get 安裝的話，可能還是0.2的版本
sudo apt-get install neovim
# 或者
curl -LO https://github.com/neovim/neovim/releases/latest/download/nvim.appimage
chmod u+x nvim.appimage
./nvim.appimage

# power shell 
scoop install neovim

從vim遷移到neovim
通用利用軟連接就可以完成遷移柏蘑， 假設(shè)我們已經(jīng)將配置放在git工程目錄里,

# 添加neovim的配置軟連接
ln -s ~/myVim/vim ~/.config/nvim
ln -s ~/myVim/vimrc ~/.config/nvim/init.vim