VIM配置---面向前端

我的vim配置地址：asin929/vim

重量级插件的配置

参见vim配置—重量级插件完成YouCompleteMe、Syntastic、vim-autoformat的安装。这些插件也是后面插件的基础。

Emmet也是进行WEB开发的必装插件。

Web插件–关于JS

语法高亮插件

othree/yajs.vim：更好的js语法高亮

othree/javascript-libraries-syntax.vim：Syntax highlighting for well-known JS libraries

语句补全

YouCompleteMe相关配置：

let g:ycm_semantic_triggers =  {
\...
\   'javascript': ['.', 're!(?=[a-zA-Z]{3,4})'],
\ ...
\ }

tern_for_vim：与YouCompleteMe联合使用，实现JS的完美补全。比较好的文章– VIM的JavaScript补全。

语法检查

npm install -g jshint

，安装jshint后，Syntastic会默认调用其进行js语法检查

js代码格式化

npm install -g js-beautify

，安装js-beautify后，vim-autoformat会调用其完成js，html，css的格式化。

Web插件–关于HTML

语句补全

YouCompleteMe相关配置：

let g:ycm_semantic_triggers =  {
\...
\ 'html': ['<', '"', '</', ' '],
\ ...
\ }

vim-closetag:自动闭合hmtl标签

Valloric/MatchTagAlways：自动匹配html标签，支持在标签间跳转。

语法检查

sudo yum install tidy

，安装tidy后，Syntastic会默认调用其进行js语法检查

代码格式化：见 js代码格式化

Web插件–关于CSS

语法高亮

vim-css3-syntax

gorodinskiy/vim-coloresque：显示CSS颜色。类似插件还有 ap vim-css-color，lilydjwg/colorizer，Rykka/colorv.vim。

语句补全

YouCompleteMe相关配置：

let g:ycm_semantic_triggers =  {
\...
\ 'scss,css': [ 're!^\s{2,4}', 're!:\s+' ],
\ ...
\ }

语法检查

npm install -g csslint

，安装jshint后，Syntastic会默认调用其进行css语法检查

代码格式化：见 js代码格式化

更多

以上配置已经完全满足前端编辑的需求了，再结合Grunt或Gulp或Browsersync可以实现实时预览WEB页面的功能，至此使用vim作前端开发已配置完毕。

参考

bigvim

webvim

polite:一个为前端开发者量身打造的Vim配置和插件精选集