概述

本人是從事web開發(fā)，負責前后端；前端用的是React + ant, 后端則用的是php語言的laravel；本篇教程將講解我的vim配置；該配置適用于我的日常開發(fā)；
主要功能

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

什么是vim？

如果連vim是什么都不知道的話，那請關掉本頁面，右拐，哪涼快哪呆著去；

vim 的簡單說明和用法

vim的快捷鍵和用法很復雜，因此也勸退了很多小白；其實，對于剛入門沒多久的用戶，其實是不必急著去全部了解快捷鍵和用法；這里大致簡單的介紹下vim的幾種模式和幾個簡單的用法；
1、三個模式

2、鍵盤操作

vim的按鍵動作很多，可分為動作, 命令, 操作； 記住常用的幾個即可，沒必要全部去記；而像類似方向動作，就不需要去記，因為現(xiàn)在鍵盤的方向鍵就可以使用（vim下，方向動作是h, j, k,l）

鍵盤的操作，大致可以分為三類，在不同的模式下按下的按鍵都有不同的含義：
動作： 需要Normal下操作，比如移動光標；
命令： 可以模式切換，或者直接進行文本內(nèi)容的修改
操作： 需要選中 + 按鍵的指令, 或者 按鍵 + 動作

常用按鍵：

常用command命令， 記住兩個即可，保存:w, 退出vim:q。

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

vim 鍵盤圖

3、常用的自帶快捷鍵

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

vim配置

接下來，我們可以通過配置，來打造屬于自己的的vim
在家目錄~打開.vimrc文件，沒有則創(chuàng)建；注意的一點是， 配置的格式不是json的， 如果要注釋掉某個配置。則用"來注釋

" 基本設置
set helplang=cn " 設置幫助說明文檔為中文
set encoding=utf-8 " 設置文本編碼為utf-8
set t_Co=256 " 即terminal Color，設置vim的顏色值
set nocompatible " 關閉對vim的兼容

" 文本相關設置
set number " 開啟行號，即在vim的左邊部分顯示數(shù)字行號
syntax on " 自動語法高亮
set cursorline " 讓光標所在的行高亮
filetype on " 開啟文件檢查
filetype indent on " 文本縮進
set autoindent  " 設置為自動縮進
set list " 顯示不可見字符
" 用特定的符號替換看不見的字符，比如tab， 空格
set listchars=tab:?\ ,trail:?

" 文本tab的相關設置
set tabstop=2 " tab鍵， 默認為2個縮進
set shiftwidth=2 " 設置兩個空格寬度
set softtabstop=2
au FileType php setlocal tabstop=4 " php 為4個縮進
au FileType php setlocal shiftwidth=4
au FileType php setlocal softtabstop=4
set expandtab

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

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

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

" 文本縮進
nmap <tab> V>  " tab 鍵縮進
nmap <s-tab> V< " shift + tab 回退縮進
vmap <tab> >gv
vmap <s-tab> <gv

" 搜搜用- = 鍵來切換上下文, 如搜索關鍵詞時， 按- = 查找上一個或下一個關鍵詞
nmap = nzz
nmap - Nzz

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

” 行移動, 即Alt + 方向鍵來移動代碼， 部分終端的alt 鍵用A來表示 
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 還可以自定義某個按鍵為熱鍵來組合快捷鍵

let mapleader=' '  " 將空格鍵設置為熱鍵

" 取消高亮， 當我們搜索關鍵字的時候，之后要取消掉搜索的高亮
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>

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

vim 插件安裝

vim 可以像vscode那樣，安裝插件， 但是在安裝插件之前，需要安裝個插件管理插件，用來管理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, 就會開始安裝

插件安裝

vim插件推薦

1、目錄樹
這個會在左邊顯示當前工程的目錄

目錄樹

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

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

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

底部狀態(tài)欄

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

" 設置主題色
let g:airline_theme='light'

3、主題插件
vim 自帶了幾個主題，我們也可以通過安裝插件的方式，來使用某個主題， 我推薦兩個主題monokai和snazzy

monokai主題

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

" 指定默認的主題
syntax enable
colorscheme monokai

4、tab對齊線
像其他的編譯器那樣，每隔一個tab， 都會有個標示線， 插件Yggdroot/indentLine就可以實現(xiàn)該功能

tab對齊線

Plug 'Yggdroot/indentLine' 

let g:indentLine_color_term = 243 " 對齊線的顏色
let g:indentLine_char = '┊' " 用字符串代替默認的標示線

6、初始會話界面
默認直接輸入vim， 不打開指定某個文件的話，界面應該是個公益廣告之類的；插件mhinz/vim-startify會在打開的初始界面顯示該目錄下的文件和最近常打開的文件，像vscode那樣， 上下選擇文件，即可打開文件

打開界面

Plug 'mhinz/vim-startify'

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

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

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

8、文件查找
在vscode中，可以使用戶快捷鍵ctrl+p快速插件文件，同樣，有個插件叫ctrlp可以實現(xiàn)類似功能，但是速度很慢， 我這里推薦一個速度很快的插件junegunn/fzf， 這個插件需要結合軟件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 進行搜索

開發(fā)插件推薦

已經(jīng)幾個插件僅適用于做web開發(fā)的，包括前端和后端， 前端為js, 后端為php
1、emmet
做前端開發(fā)的，對emmet這插件應該不陌生，在submline和vscode中也是必裝插件之一；該軟件可以快速編寫html和標簽補全, 默認的快捷鍵為ctrl y + ,

Plug 'mattn/emmet-vim' 

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

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

2、nginx高亮
vim默認是不之支持對nginx的語法高亮支持的，所以得裝個插件chr4/nginx.vim

Plug 'chr4/nginx.vim'

3、代碼提示與補全COC
關于代碼補全這個， 我要重點啰嗦下，代碼補全，我自己也很早前早折騰了，網(wǎng)上的教程也是五花八門，單大多是千篇一律，且不適用，比如Valloric/YouCompleteMe這個插件，簡直被牛皮的被各位大牛吹的上天了，這個在之前的版本里，安裝起來是特別麻煩的（新的版本里簡化了安裝）， 他是集成了各種語言的智能補全， 就是對php的補全很不友好，且臃腫；

后來又找到了一個對php支持很好的插件lvht/phpcd.vim, 這個還支持函數(shù)跳轉， 對laravel框架支持和友好；但是安裝起來也很費勁，還經(jīng)常在跳轉到定義函數(shù)的時候，也會出現(xiàn)不穩(wěn)定報錯的情況；當然，也勉強能用，但是有個功能實現(xiàn)不了，就是自動補上use, phpstorm 我之所以覺得好用，就是因為除了自動補全外，還可以自動補上use的功能；

• 關于coc 智能補全
  Conqure of Completion這個是由一個可以加載插件的的補全插件，首先這個是個補全的插件，但是并不是某個語言提供支持，而是要額外的安裝coc插件, 比如，我需要php代碼補全，那我就需要安裝coc-phpls的coc插件，這個雖然是在vim上使用的，但是卻是coc的插件;
• 安裝與配置
  coc需要配合node(10.12以上版本)使用，所以要安裝node，做web開發(fā)的，應該對node很熟悉了， 這里就不廢話了；
  在vimrc中：

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

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

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

關閉vim，在打開vim就會自動安裝（安裝過的就不會重復安裝）
如果需要配置coc， 執(zhí)行:CocConfig, 就會打開coc-setting.json, 在這里面寫一些配置（其實使用默認即可，可配置的東西也不多）

4、coc插件推薦

• php補全coc-phpls
  這個插件使用起來跟phpStorm差不多，而且還比phpStorm還好
  支持：

  1. 類， model識別和補全
  2. 函數(shù)跳轉
  3. 語法檢查
  4. 自動補上use 引用
  • PHP提示補全
  • PHP錯誤提示
  • php警告
  • 參數(shù)提示
  • 自動起別名

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

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

" 設置按下tab時，是選擇補全，而不是輸入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

" 回車選中補全，而不是換行
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補全coc-tsserver
  前端我用的react + ant, 需要能做到組件識別和補全，并能自動import函數(shù)或類；coc-tsserver剛好能做到這點

  • 組件引入與補全
  • 能識別補全組件屬性的值

• esline 報錯 coc-eslint
  對于js代碼不規(guī)范，可用用coc-eslint來提示和修復, 這個默認設置就可以用了，需要更多配置的話，得看看官方文檔

  • esline報錯

• 代碼格式化
  coc-prettier則可以對代碼進行格式化， 默認的快捷鍵是熱鍵 + f， 支持全篇格式化和僅格式化選中的

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

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

{
 "prettier.eslintIntegration": true, 
}

上傳配置到github

配置結束之后，可以將相關配置上傳到github上，方便在其他的機子上部署
工程目錄設置

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

部署的時候，可以利用軟連接，將工程中的配置，鏈接到vim配置文件，這個之后的每次配置修改，都可以提交到github上

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

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

最后推薦NEOVIM

neovim 是基于vim分支重新編譯的版本； 從性能，體驗上都優(yōu)于vim的，對vim的插件，配置全兼容，且有很多獨占插件，也就是說，vim能做的，neovim也能做，vim做不了的，neovim也能做得了。

關于neovim
因為vim誕生于上世紀90年代，現(xiàn)在都過去二十多個年頭了，經(jīng)過多個版本的迭代，vim自身就包含了大量代碼，且bug維護越發(fā)困難，后來neovim的作者，就向vim提交了包含大量代碼改動的補丁，被vim作者拒絕了，理由是大量改動可能存在風險。 于是neovim就另起爐灶，開始開發(fā)neovim, 后來就成為vim系列最熱捧的項目。

我之所以選擇neovim, 不僅僅是性能優(yōu)越，最主要是neovim的一個獨有功能我很喜歡，就是pannel彈窗（雖然是在終端，也會有個像模像樣的彈窗），比如之前介紹的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
通用利用軟連接就可以完成遷移， 假設我們已經(jīng)將配置放在git工程目錄里,

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