就是要用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

語法高亮

重要的語法高亮，支持最好的應該是vim-vue。

使用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

語法檢查

語法檢查可以使用vim-syntastic/syntastic配合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插件是eslint-plugin-vue。

下載：

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)

官方給出瞭解決方法：vue/script-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了。