当前位置: 首页 > 工具软件 > Vim.js > 使用案例 >

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

刘选
2023-12-01

前不久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 。

 类似资料: