搭建属于自己的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 自带了几个主题,我们也可以通过安装插件的方式,来使用某个主题, 我推荐两个主题monokaisnazzy

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