vim html css js,打造前端开发的 Vim 环境

前不久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=4set sw=4set 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，按下快捷键,，就会生成下面的HTML：

id='foo1'> id='foo2'> id='foo3'>

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

Plugin 'mattn/emmet-vim'

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

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

Emmet 中有用的快捷键还有：n：到下一个编辑点

N：到上一个编辑点

d：选中整个标签

D：选中整个标签的内容

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 为例，其安装和配置过程只有两步：安装 checker 命令行工具

npm install -g eslint

在 ~/.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 。