就是要用Vim写Vue

Vim关于Vue的生态链还是很少，不过凑活凑活还是能用的。

缩进

缩进采用的是两个空格，.vimrc配置：

?

1 2 3 4 5 6

au BufNewFile,BufRead *.html,*.js,*.vue set tabstop=2 au BufNewFile,BufRead *.html,*.js,*.vue set softtabstop=2 au BufNewFile,BufRead *.html,*.js,*.vue set shiftwidth=2 au BufNewFile,BufRead *.html,*.js,*.vue set expandtab au BufNewFile,BufRead *.html,*.js,*.vue set autoindent au BufNewFile,BufRead *.html,*.js,*.vue set fileformat=unix

语法高亮

重要的语法高亮，支持最好的应该是vim-vue。

使用Vundle下载：

?

1	Plugin 'posva/vim-vue'

?

1	:PluginInstall

这样语法高亮基本上就实现了，不过会出现滑动过快高亮失效的情况，文档中给出的原因是vue包含html、css、js语句，vim-vue有时候会感到困惑，解决办法：

?

1	autocmd FileType vue syntax sync fromstart

如果想使用一些已经写好的html、css、js配置，可以添加：

?

1	autocmd BufRead,BufNewFile *.vue setlocal filetype=vue.html.javascript.css

语法检查

语法检查可以使用vim-syntastic/syntastic配合ESLint。

使用Vundle下载：

?

1	Plugin 'scrooloose/syntastic'

?

1	:PluginInstall

配置eslint检查器：

?

1	let g:syntastic_javascript_checkers = ['eslint']

 可以使用打开一个vue文件，输入命令：

?

1	:SyntasticInfo

可以看到：

?

1 2 3 4 5 6 7

Syntastic version: 3.8.0-101 (Vim 704, Linux, GUI) Info for filetype: vue Global mode: active Filetype vue is active The current file will be checked automatically Available checker: eslint Currently enabled checker: eslint

现在就差ESLint了。

ESLint

Vue的官方推荐ESLint插件是eslint-plugin-vue。

下载：

?

1	npm install eslint eslint-plugin-vue

配置.eslintrc

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

{   "extends": ["plugin:vue/recommended"],   "plugins": [     "vue"   ],    "parserOptions": {     "parser": "babel-eslint",   },    "rules": {   },    "settings": {     "html/html-extensions": [".html", ".vue"],   },  }

  注意，配置中不要包含eslint-plugin-html插件，eslint-plugin-html会使eslint-plugin-vue失效，因为eslint-plugin-html会从<script>中提取内容，但eslint-plugin-vue是需要<script>和<template>标签的。

?

1 2 3 4

"plugins": [     "vue", -   "html"  //去除   ]

这样，:w保存vue文件时就会有红块报错了：

在每行之前的 >> 表示该行中有语法错误，将光标移到该行，错误描述就会展示在 Vim 窗口的最底下。

输入:Errors命令也会打印出详细的报错信息。

缩进错误

配合eslint-plugin-standard使用的时候，如果<script>缩进如下：

?

1 2 3 4 5 6

<script>   let a = {     foo: 1,     bar: 2   } </script>

会报缩进错误：

?

1	Expected indentation of 0 spaces but found 2. (indent)

官方给出了解决方法：vue/script-indent

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

{   "extends": ["plugin:vue/recommended", "standard"],   "plugins": [     "vue"   ],    "parserOptions": {     "parser": "babel-eslint",   },    "rules": {      "vue/script-indent": ["error", 2, { "baseIndent": 1  }]   },   "settings": {       "html/html-extensions": [".html", ".vue"],   },   "overrides": [     {       "files": ["*.vue"],       "rules": {         "indent": "off"       }     }   ] }

一是添加rule：

?

1	"vue/script-indent": ["error", 2, { "baseIndent": 1 }]

数字2代表1次缩进2个空格，数字1代表缩进1次。

二是关闭默认indent：

?

1 2 3 4 5 6 7 8

"overrides": [   {     "files": ["*.vue"],     "rules": {       "indent": "off"     }   } ]

over。可以愉悦得用Vim写Vue了。