搭建属于自己的vim IDE

概述

本人是从事web开发，负责前后端；前端用的是React + ant, 后端则用的是php语言的laravel；本篇教程将讲解我的vim配置；该配置适用于我的日常开发；
主要功能

  • 代码补全（支持jsx, ts, php）
  • 代码错误提示
  • 引用补全（php的自动补上use, js自动补上import）
  • 定义函数跳转

什么是vim？

如果连vim是什么都不知道的话，那请关掉本页面，右拐，哪凉快哪呆着去；

vim 的简单说明和用法

vim的快捷键和用法很复杂，因此也劝退了很多小白；其实，对于刚入门没多久的用户，其实是不必急着去全部了解快捷键和用法；这里大致简单的介绍下vim的几种模式和几个简单的用法；
1、三个模式

模式 说明 作用
Normal 一般模式 在该模式下即可以进行"动作"，如复制，黏贴，删除当前行等
Insert 插入模式 按下“动作” i或者a, 即可进入该模式，可以正常输入文本内容
Visual 块模式 按下"动作"v,就可以进入该模式，可以对内容进行选择

2、键盘操作

vim的按键动作很多，可分为动作, 命令, 操作； 记住常用的几个即可，没必要全部去记；而像类似方向动作，就不需要去记，因为现在键盘的方向键就可以使用（vim下，方向动作是h, j, k,l）

键盘的操作，大致可以分为三类，在不同的模式下按下的按键都有不同的含义：
动作： 需要Normal下操作，比如移动光标；
命令： 可以模式切换，或者直接进行文本内容的修改
操作： 需要选中 + 按键的指令, 或者 按键 + 动作

常用按键：

按键 类型 效果 说明
i 命令 进入插入模式 在当前光标坐在位置进入插入模式
a 命令 进入插入模式 在当前光标所在字符位置的后面进入插入模式
o 命令 进入插入模式 在当前光标行所在行的另起一行，并进入插入模式
d 操作 删除 块模式下，选择内容后，按下d即为删除选中的内容
y 操作 复制 在块模式下，选中内容，按下y即为复制选中的内容
Y, 也就是shift + y 命令 复制当前行
p 命令 黏贴 在光标的所在位置后黏贴
P, 也就是shift + p 命令 黏贴 在光标所在位置前黏贴
u 命令 撤销 相当于我们才普通编译器里的ctrl+ z
: 命令 进入command 可以输入其他命令进行操作， 如保存:w
/ 动作 搜索关键词 按下/，就可以再顶部输入要关键词， 就可以再当前上下文进行搜索
Esc 命令 退回到一般模式 要进行动作或者命令都需要退回到一般模式

常用command命令， 记住两个即可，保存:w, 退出vim:q。

全部的按键可以参考一下的键盘图


vim 键盘图

3、常用的自带快捷键

vim的所有快捷键都是可以自定义或者覆盖，所以vim自带的，我个人觉得比较还用且常用的，记住几个就可以了

快捷键 执行的动作 说明
shift + g 跳到文本最后一行 其实就是输入大写的G
g+g 跳转到文本的第一行
d + d 删除当前行
ctrl + o 跳到上一次编辑的位置

vim配置

接下来，我们可以通过配置，来打造属于自己的的vim
在家目录~打开.vimrc文件，没有则创建；注意的一点是， 配置的格式不是json的， 如果要注释掉某个配置。则用"来注释

" 基本设置
set helplang=cn " 设置帮助说明文档为中文
set encoding=utf-8 " 设置文本编码为utf-8
set t_Co=256 " 即terminal Color，设置vim的颜色值
set nocompatible " 关闭对vim的兼容

" 文本相关设置
set number " 开启行号，即在vim的左边部分显示数字行号
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 " 智能的判断要不要区分搜索模式大小写, 如果搜索的文字中出现大写，则区分大小写搜索

" 其他设置
set scrolloff=5 " 距离行尾还有5行
" 打开文件后恢复关闭前所在的位置
au BufReadPost * if line("'\"") > 1 && line("'\"") <= line("$") | exe "normal! g'\"" | endif

vim 的强大就是可以自定义快捷键来实现某种功能，而这种快捷并不想vscode那样已经存在的。这里需要理解几个键位模式

模式 说明
map 一般模式下的按键操作
nmap 在一般模式下的按键操作，与map存在区别，一般用于重定义一个命令
imap 在编辑模式下的按键操作
vmap 在块模式下的按键操作 
" 文本缩进
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、目录树
这个会在左边显示当前工程的目录

目录树

类似的插件有很多个，有scrooloose/nerdtree， 或者preservim/nerdtree， 我这里用的是scrooloose/nerdtree

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

" 目录树的相关设置
map <LEADER>n :NERDTreeToggle<CR>  " 热键 + n 打开或者关闭
let g:NERDTreeDirArrowExpandable = '▸' " 合上目录显示的图标
let g:NERDTreeDirArrowCollapsible = '▾' " 展开目录显示的图标

2、底部状态栏
vim-airline/vim-airline,可以再vim 底部显示当前编辑的文件，项目的git分支等相关信息

底部状态栏

也有配套的主题插件vim-airline-themes

Plug 'vim-airline/vim-airline' 
Plug 'vim-airline/vim-airline-themes' " 状态栏的主题插件

" 设置主题色
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就可以实现该功能

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可以实现类似功能，但是速度很慢， 我这里推荐一个速度很快的插件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 进行搜索

开发插件推荐

已经几个插件仅适用于做web开发的，包括前端和后端， 前端为js, 后端为php
1、emmet
做前端开发的，对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
关于代码补全这个， 我要重点啰嗦下，代码补全，我自己也很早前早折腾了，网上的教程也是五花八门，单大多是千篇一律，且不适用，比如Valloric/YouCompleteMe这个插件，简直被牛皮的被各位大牛吹的上天了，这个在之前的版本里，安装起来是特别麻烦的（新的版本里简化了安装）， 他是集成了各种语言的智能补全， 就是对php的补全很不友好，且臃肿；

后来又找到了一个对php支持很好的插件lvht/phpcd.vim, 这个还支持函数跳转， 对laravel框架支持和友好；但是安装起来也很费劲，还经常在跳转到定义函数的时候，也会出现不稳定报错的情况；当然，也勉强能用，但是有个功能实现不了，就是自动补上use, phpstorm 我之所以觉得好用，就是因为除了自动补全外，还可以自动补上use的功能；

  • 关于coc 智能补全
    Conqure of Completion这个是由一个可以加载插件的的补全插件，首先这个是个补全的插件，但是并不是某个语言提供支持，而是要额外的安装coc插件, 比如，我需要php代码补全，那我就需要安装coc-phpls的coc插件，这个虽然是在vim上使用的，但是却是coc的插件;
  • 安装与配置
    coc需要配合node(10.12以上版本)使用，所以要安装node，做web开发的，应该对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， 执行:CocConfig, 就会打开coc-setting.json, 在这里面写一些配置（其实使用默认即可，可配置的东西也不多）

4、coc插件推荐

  • php补全coc-phpls
    这个插件使用起来跟phpStorm差不多，而且还比phpStorm还好
    支持：

    1. 类， model识别和补全
    2. 函数跳转
    3. 语法检查
    4. 自动补上use 引用
    • PHP提示补全
    • PHP错误提示
    • php警告
    • 参数提示
    • 自动起别名

vimrc中配置，这边我设置函数跳转快捷键，设置ctrl + b在新tab中打开函数定义， 以及其他配置

" ctrl + b 跳转到函数，并在新的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函数或类；coc-tsserver刚好能做到这点

    • 组件引入与补全
    • 能识别补全组件属性的值

  • esline 报错 coc-eslint
    对于js代码不规范，可用用coc-eslint来提示和修复, 这个默认设置就可以用了，需要更多配置的话，得看看官方文档

    • esline报错

  • 代码格式化
    coc-prettier则可以对代码进行格式化， 默认的快捷键是热键 + f， 支持全篇格式化和仅格式化选中的

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

这里需要做点修改的是，在:CocConfig中加上配置, 设置根据esline规则进行格式化

{
 "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分支重新编译的版本； 从性能，体验上都优于vim的，对vim的插件，配置全兼容，且有很多独占插件，也就是说，vim能做的，neovim也能做，vim做不了的，neovim也能做得了。

关于neovim
因为vim诞生于上世纪90年代，现在都过去二十多个年头了，经过多个版本的迭代，vim自身就包含了大量代码，且bug维护越发困难，后来neovim的作者，就向vim提交了包含大量代码改动的补丁，被vim作者拒绝了，理由是大量改动可能存在风险。 于是neovim就另起炉灶，开始开发neovim, 后来就成为vim系列最热捧的项目。

我之所以选择neovim, 不仅仅是性能优越，最主要是neovim的一个独有功能我很喜欢，就是pannel弹窗（虽然是在终端，也会有个像模像样的弹窗），比如之前介绍的fzf文件查找插件，在neovim中， 利用pannel弹窗就能更好的体现

neovim 上使用户fzf功能

安装
推荐安装最新版的neovim, 网上安装的方式很多

# 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
通用利用软连接就可以完成迁移， 假设我们已经将配置放在git工程目录里,

# 添加neovim的配置软连接
ln -s ~/myVim/vim ~/.config/nvim
ln -s ~/myVim/vimrc ~/.config/nvim/init.vim
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,657评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,889评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,057评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,509评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,562评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,443评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,251评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,129评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,561评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3赞 335
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,621评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,220评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2赞 354