从零开始配置你的vim(前端向)

4,524 阅读6分钟

前言

大家好,我是Kira

作为一个vim使用者,入职了新公司,在换了工作电脑的情况下,得从零开始配置vim,在此做个记录,也分享给大家,一起踩坑Go!

Notice 本文不介绍vim的使用方法,仅记录vim相关配置(~/.vimrc),参数值可根据自己需要调整。


常规配置

vim本身自带很多基础功能,我们先对部分基础功能做一个配置。

  • 文件类型

    vim包括很多vim插件需要根据不同文件类型采取不同操作,因此我们需要打开vim的文件类型支持,如下:

    filetype on
    filetype plugin on
    filetype plugin indent on
    
  • 语法高亮

    vim支持语法高亮(特殊文件/语言类型需要插件支持),如下:

    syntax on
    
  • 缩进

    vim可以对缩进参数进行配置,如下按序是tab键宽度(空格数)、自动缩进/符号移位长度(空格数),tab进制(即满几个空格转换成一个tab)、tab键是否拆分成空格、自动缩进、智能缩进:

    set tabstop=2
    set shiftwidth=2
    set softtabstop=2
    set expandtab
    set autoindent
    set smartindent
    
  • 折叠

    vim提供折叠代码的功能,我们可以自己配置折叠方法、等级等参数:

    set foldmethod=syntax
    set foldlevelstart=999
    
  • 备份

    vim可以选择对已有文件编辑保存时是否创建旧内容的备份(个人选择不创建):

    set nobackup
    

    如果选择启用旧内容备份,则还有其他相关参数可以配置:

    • 后缀名:backupext

    • 文件位置:backupdir

    • 文件过滤: backupskip

  • 背景色

    vim由于运行在终端里,所以需要用户手动告知背景色是什么(dark/light),由此vim会自动优化colorscheme的颜色显示:

    set background=dark
    
  • 配色文件

    vim可以自己编写配色方案,一般以xxx.vim存放在~/.vim/colors里:

    colorscheme xxx
    
  • map前缀

    为防止与其他功能冲突,vim很多插件的快捷键会采用前缀+快捷命令唤起的模式。vim也提供了设置前缀的方法:

    let g:mapleader = ","
    
  • 自动补全视图

    vim自带自动补全功能,并且可以设置自动补全时的视图表现,包括是否展示预览窗口、是否展示预览Popup等:

    set completeopt-=preview
    " set completeopt+=popup
    

插件

vim有各种各样丰富的插件,来满足不同开发者的不同需求。作为一个前端猴子,从之前的React开发到现在的Vue开发,我配置了很多前端开发可能用到的插件。

NERD Commenter

Nerd Commenter是一个注释插件,提供多种注释命令,配合语法分析器使用十分方便。

其配置和快捷键可以参考它的github主页

我仅设置了注释符与内容之间的空格数,其它均采用默认值:

let g:NERDSpaceDelims = 1

The NERDTree

The NERDTree是一个文件系统浏览器。可以展示复杂的目录系统,可以从中打开文件浏览或者编辑。

image.png

提供的命令可以参考doc文档

我这里主要配置了一些快捷键:

nnoremap <leader>to :NERDTree<CR>
nnoremap <leader>tc :NERDTreeClose<CR>
nnoremap <leader>tt :NERDTreeToggle<CR>
nnoremap <leader>tf :NERDTreeFind<CR>
nnoremap <leader>tfc :NERDTreeFocus<CR>

YouCompleteMe

YouCompleteMe本身是一个强力且聪明的vim自动补全工具。

吐槽 对React的补全,use居然不能补全出来useEffect,我真是一脸疑问。所以暂时放弃了YCM的使用,转而继续使用tsuquyomi+OmniComplete做代码补全。

tsuquyomi

tsuquyomi提供了ts的补全、跳转和语法检查等一系列功能,把你的vim变成一个ts IDE。

它有很多可自定义的配置,下面列举几个我自己用的配置项:

  • 单引号import
let g:tsuquyomi_single_quote_import = 1
  • 禁用快速fix
let g:tsuquyomi_disable_quickfix = 1
  • 变量类型hint快捷键
autocmd FileType typescript nmap <buffer> <Leader>t : <C-u>echo tsuquyomi#hint()<CR>

吐槽 目前TsuImport命令(用来自动添加变量引入语句)在我的电脑上没有结果,期待作者解决。

ALE

ALE是一个异步的语法检查器,咱们可以把它当做LSP的客户端。

  • 警示格式

    我们可以对ALE的errors以及warnings的显示格式进行配置:

let g:ale_sign_error = "E"
let g:ale_sign_warning = "W"
let g:ale_echo_msg_error_str = "E"
let g:ale_echo_msg_warning_str = "W"
let g:ale_echo_msg_format = "[%linter%] %s"
  • 语法检查时机

    什么时候进行语法检查,也是可以由我们控制:

let g:ale_lint_on_text_changed = "never"
let g:ale_lint_on_insert_leave = 1
let g:ale_lint_on_enter = 1
  • 语法检查工具

    我们可以为不同的语言分别指定语法检查工具,比如:

let g:ale_linters = {
\ 'vue': ['eslint', 'vls'],
\  }

由于ale会运行当前文件类型所有可用的语法检查工具,因此我们配合ale_linters_explicit可以实现,对指定的文件类型只使用指定的linters:

let g:ale_linters_explicit = 1
  • 禁用补全

    由于我们使用了tsuquyomi进行ts及tsx补全,因此我们禁用ale的补全:

let g:ale_completion_enabled = 0
  • 跳转错误/警告快捷键设置

    配置一下查看下一个/第一个错误的快捷键:

nnoremap <leader>an <Plug>(ale_next_wrap)
nnoremap <leader>af <Plug>(ale_first)

当然了,我们可以根据自己的需要配置。

typescript-vim & vim-jsx-typescript

typescript-vimvim-jsx-typescript是vim的typescript和tsx语法文件,可以配合用来做代码高亮以及折叠,主要配置项是配色方案。

将自定义的配色方案写在配色文件里,所有的语法segments定义都在对应插件的源码里,比如:

hi tsxCloseTag ctermfg=63
hi tsxTag ctermfg=63
...

vim-prettier

vim-prettier是常用的格式化插件prettier的vim版本。与vsc版本的一样,默认使用项目下的.prettierrc.js作为配置文件。

vim-prettier有一些有趣的配置:

  • 保存时自动保存
let g:prettier#autoformat = 1
  • 自动保存时,是否需要特定标志
let g:prettier#autoformat_require_pragma = 1

如果这个标志位设为1,则需要再在文件开头设置@prettier或者@format标志,才能在保存时自动格式化:

/** @format */
/** @prettier */

Notice 必须要这种格式的注释,用双斜杠注释是不生效的。猜测是因为prettier cli要求的,而vim-prettier没有写清楚。但是令我匪夷所思的是,git主页的gif示例中,作者是采用双斜杠注释的,但是自动格式化生效了。

vim-minimap

vim-minimap是vim右上角的小地图导航,功能比较单一,相对vsc上的小地图可以指示搜索项和错误项等,它只能指示代码位置,但是聊胜于无吧。

可以配置小地图配色:

let g:minimap_highlight = 'MatchParen'

写在最后

自己使用vim主要是因为这样双手可以尽可能少的离开键盘,这是让我非常爽的一件事。

吐槽 vue的生态相比我大React还是有些差距,插件数量和质量都不令人满意,比如ale + volar高版本在vim中竟然无法正确检测语法错误,让我不得不放弃在vim中配置vue的想法。

最后奉上我自己的vim配置供有需要的人参考(可能会根据需求不定期更新),包括~/.vimrcvim配色方案kira-vim-config