用 Vim 写 JavaScript

Blog 除草啦!

^^^^^^^^^^^^^^^

说说我用了哪些工具让我更愉快的用 vim 来写代码。

我自己用的是 neovim,下面提到 vim 时,如果没有特殊说明,你可以认为我说的是 neovim。当然不管你用的是 vim 还是 neovim, 你都可以继续支持乌干达的儿童

语法高亮

大神可以不用语法高亮。但我不行。

我用了 sheerun/vim-polyglot 这个插件,这个插件本身包含了各种语言相应的语法插件 。因为对应的语法插件会按需加载,所以并不会太影响 vim 的加载速度。(当然使用这个插件后,语法检测还是会占用额外的加载时间,但基本可以忽略不计,其 GitHub readme 声称语法检测部分会花 17 毫秒左右)

Plug 'sheerun/vim-polyglot'
let g:javascript_plugin_jsdoc = 1
let g:javascript_plugin_flow = 1
let g:jsx_ext_required = 0

Plug 'flowtype/vim-flow', { 'for': ['javascript'] }
let g:flow#autoclose = 1
let g:flow#enable = 0

如果你跟我一样,用 postcss 来代替 sass/scss,并且用的是 .css 作文件后缀,那么在你的 *.css 文件中可能会有很多非 css 语法,比如 selector 嵌套,inline comment 等,并不能很准备的被高亮。我的做法是让 css 文件使用 sass 的语法。如果不想全局设置的话,可以在 *.css 文件的开头加上:

// vi: set ft=sass :

然后使用 postcss-scss 来让 postcss 支持解析 sass/scss,并用 插件 postcss-strip-inline-comments strip 掉 inline comment。

补全

Vim 除了学习曲线比较陡峭外,相较于很多现代编辑器和 IDE, 比较缺失的就是智能的语法补全。

Vim 中的补全插件我最开始是用 ycm-core/YouCompleteMe,后来转到 Shougo/deoplete.nvim,大半年前开始用起 neoclide/coc.nvim。coc 可以认为是目前最强大,体验最好的补全插件。coc 本身也主要是用 TypeScript 写的。

coc 使用了和 vscode 一样的 Language Server Protocol(LSP) 技术来进行补全,搭配相应语言的 LSP 能实现和 vscode 类似的补全体验。我也会很建议你用 neovim,因为 coc 支持用 neovim 的 floating window 来显示补全的额外信息,比如函数的原型和说明。floating window 是 neovim 0.4.0 的功能,但目前 0.4.0 还未正式发布,需要自己去 neovim GitHub release 页面去下载 nightly 版本。coc 有着自己的插件系统,相应语言的补全支持也是通过安装相应的插件来实现。coc 的 GitHub readme 上有非常完整的配置例子。安装 coc 后, 在 vim 中用命令 :CocInstall 来安装 coc 插件。

比如我就安装了以下插件:

:CocInstall coc-tsserver
:CocInstall coc-word
:CocInstall coc-syntax
:CocInstall coc-dictionary
:CocInstall coc-neosnippet
:CocInstall coc-json
:CocInstall coc-css
:CocInstall coc-eslint
:CocInstall coc-git

其中 coc-tsserver 提供 TypeScript 和 JavaScript 的 LSP 支持。

其他插件

fzf 和 fzf 的 vim 插件是我十分离不开的工具,fzf 可以让我们在 vim 中通过模糊搜索的方式快速切换 buffer。其 GitHub 页面上有着非常完整的配置例子。 我在 zsh 中也一直用 fzf 来替代 ctrl+c,可以快速地模糊查找历史命令。

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

Prettier 真正做到了用工具来格式化 JS 代码。作为一个一直羡慕 golang 有 gofmt 的人,我在 Prettier 项目还处于非常 early phase 的时候就开始使用它。其 vim 插件必不可少, copy/paste 代码方便多了 :)

Plug 'prettier/vim-prettier', {
  \ 'do': 'yarn install',
  \ 'for': [
  \   'javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql',
  \   'markdown', 'vue', 'yaml', 'html', 'wxml'
  \ ]}

因为有很多重复性很高的代码,所以 snippet 插件也必不可少。Shougo/neosnippet-snippets 中包含了很多各个语言中常用的 snippet,自己也会添加很多平时会常用的代码段。

Plug 'Shougo/neosnippet.vim'
Plug 'Shougo/neosnippet-snippets'

下面的几个插件,我感觉也是写代码时经常会用到的,好像并没有什么好说的。

Plug 'scrooloose/nerdtree', { 'on': 'NERDTreeToggle' }
Plug 'mbbill/undotree', { 'on': 'UndotreeToggle' }
Plug 'tpope/vim-fugitive'
Plug 'tpope/vim-commentary'

*     *     *

最后顺便自荐一下我 porting 的 vim colorscheme haishanh/night-owl.vim,感觉还是挺适合 JS 的。

haishanh/night-owl.vim syntax highlight example screenshot