前不久harttle着手搭建了类似IDE的Vim环境，然而对于前端开发者这还远远不够。 本文便记录一下如何实现前端开发者关心的那些特性：不同文件类型的缩进、HTML标签匹配注释移除、HTML/CSS/Javascript自动补全、代码风格检查等等。让我们来打造一个适合前端开发的Vim！

文件类型设置

前端文件有不同的类型，而每个人对于缩进又有不同都要求。Vim中我们可以为每种文件设置不同的缩进和Tab行为。

查看当前文件类型

使用:set filetype命令可以查看当前文件的类型。例如：

filetype=html.handlebars

配置文件

那么我们知道文件类型是html，子类型是handlebars。我们对这种文件类型的配置文件位于：~/.vim/after/ftplugin/html.vim， 如果没有就创建一个。该文件的格式与~/.vimrc完全一致，在每次打开filetype=html的文件时都会被载入，我的配置是这样的：

set ts=4
set sw=4
set expandtab autoindent

ts设置Tab的大小是4，sw设置缩进大小是4，wxpandtab会将所有Tab展开为空格，autoindent会在换行时保持当前行的缩进。

如果是JavaScript文件，则对应的配置目录是~/.vim/after/ftplugin/javascript.vim。

HTML

你是否了解过Jade模板引擎？Emmet提供了类似Jade语法的编写HTML的方式。 例如输入div>p#foo$*3>a，按下快捷键<c-y>,，就会生成下面的HTML：

<div>
    <p id="foo1">
        <a href=""></a>
    </p>
    <p id="foo2">
        <a href=""></a>
    </p>
    <p id="foo3">
        <a href=""></a>
    </p>
</div>

完整的Emmet功能在这里可以查到。如果你在使用Vundle， 可以在~/.vimrc里直接添加这个插件：

Plugin 'mattn/emmet-vim'

Emmet快捷键<c-y>/可以注释当前HTML Tag，我把它映射成了更通用的注释快捷键Ctrl+/：

autocmd filetype *html* imap <c-_> <c-y>/
autocmd filetype *html* map <c-_> <c-y>/

之所以上面写<c-_>是因为，由于历史原因Vim不会收到Ctrl+/键盘消息的，但多数键盘布局上绑定<c-_>具有同样的效果(你按下 的仍然是Ctrl+/。

Emmet 中有用的快捷键还有：

  • <c-y>n：到下一个编辑点
  • <c-y>N：到上一个编辑点
  • <c-y>d：选中整个标签
  • <c-y>D：选中整个标签的内容
  • <c-y>k：删除当前标签

CSS 语法

CSS语法高亮可以引入这个插件：

Plugin 'hail2u/vim-css3-syntax'

如果你还希望LESS支持，可以继续引入：

Plugin 'groenewege/vim-less'

CSS的语法中，前后大括号是要匹配的。可以用delimitMate来自动补全后大括号，它支持大多数的编程语言。

Plugin 'Raimondi/delimitMate'

在之前的文章中，介绍过YouCompleteMe的使用。它会调用omnifunc来完成自动补全。 但对于CSS的自动补全有点麻烦，因为多数CSS的语法是上下文相关的，而YCM的自动补全触发器只考虑当前行。 较好的补救办法是手动设置一下触发器，在~/.vimrc中添加：

let g:ycm_semantic_triggers = {
    \   'css': [ 're!^\s{4}', 're!:\s+'],
    \   'html': [ '</' ],
    \ }

这样，在以四空格起始的行，以及冒号后+空格的情况出现时，会触发自动补全。另外，当HTML关闭标签时，也可以触发一下自动补全。

Javascript

JavaScript 语法高亮只需要引入这个插件：

Plugin 'pangloss/vim-javascript'

它还支持高亮写在JavaScript中的CSS和HTML，在~/.vimrc中加入以下配置：

let javascript_enable_domhtmlcss = 1

Javascript 有时会有较多的缩进，如果你希望能够比较明显地显示缩进范围的话，可以引入这个：

Plugin 'nathanaelkane/vim-indent-guides'

Javascript 的自动补全仍然是使用YCM，但我们用一个叫tern的插件来提供强大的JavaScript omnifunc：

Plugin 'marijnh/tern_for_vim'

代码风格检查

养成好的编程习惯，第一步是安装一个代码风格检查工具。 syntastic 是 Vim 中的一个代码风格检查工具，可以为不同的编程语言 （对应为 Vim 中的 filetype）配置不同的 checker。 甚至每个文件类型可以有若干个 checker，syntastic 会负责聚合警告和错误。

首先需要安装 syntastic，使用 Vundle 较为方便：

Plugin 'scrooloose/syntastic'

装好之后就可以为你需要的语言安装 checker 了，比如 JavaScript 代码风格检查 eslint、 HTML 代码风格检查 tidy、CSS 代码风格检查 stylelint 等。 以 eslint 为例，其安装和配置过程只有两步：

  1. 安装 checker 命令行工具

     npm install -g eslint

  2. 在 ~/.vimrc 中将它配置为某个文件类型（比如javascript）的 checker：

     let g:syntastic_javsacript_checkers = ['eslint']

在 Vim 中使用 :SyntasticInfo 可查看 checker 信息， 更多 Syntastic 配置方法可参考 https://github.com/vim-syntastic/syntastic。 在 Vim 中使用 eslint 一文对 eslint 有更详细的讨论， 包括如何使用同一份 eslintrc 配置进行 format 以及 lint 。

本文采用 知识共享署名 4.0 国际许可协议（CC-BY 4.0）进行许可，转载注明来源即可： https://harttle.land/2015/11/22/vim-frontend.html。如有疏漏、谬误、侵权请通过评论或 邮件 指出。