就是要用Vim写Vue

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

缩进

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

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

语法高亮

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

使用vundle下载：

plugin 'posva/vim-vue'

:plugininstall

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

autocmd filetype vue syntax sync fromstart

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

autocmd bufread,bufnewfile *.vue setlocal filetype=vue.html.javascript.css

语法检查

语法检查可以使用配合eslint。

使用vundle下载：

plugin 'scrooloose/syntastic' 

:plugininstall

配置eslint检查器：

let g:syntastic_javascript_checkers = ['eslint']

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

:syntasticinfo

可以看到：

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插件是。

下载：

npm install eslint eslint-plugin-vue

配置.eslintrc

{
  "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>标签的。

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

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

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

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

缩进错误

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

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

会报缩进错误：

expected indentation of 0 spaces but found 2. (indent)

官方给出了解决方法：

{
  "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：

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

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

二是关闭默认indent：

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

over。可以愉悦得用vim写vue了。