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作前端开发已配置完毕。

---

参考

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