用vim寫vue

一、使用到的插件：

1. 文法高亮：posva/vim-vue

2. 文法檢查：vim-syntastic/syntastic  + eslint-plugin-vue

3. 代碼格式化：MaraniMatias/vue-formatter

以上插件的安裝方式，參照github相應文檔即可。

二、配置：

1. .vimrc的配置，隻列出了與VUE相關的：

"VUE 相關配置
"采用兩個空格的縮進
 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
"這個是解決偶爾高亮失效的，貌似沒什麼鳥用 
 autocmd FileType vue syntax sync fromstart
"代碼格式化的快捷鍵，設定為F9
 autocmd FileType vue noremap <buffer> <F9> :%!vue-formatter<CR>
"啟用eslint代碼檢查，如果不想受限制，可以注釋掉
 let g:syntastic_javascript_checkers = ['eslint']

           

2. .eslintrc的配置，放在每個項目下的，請照抄

{
  "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"
      }
    }
  ]
}
           

三、其中的坑：

代碼請按以下順序:

<template>
</template>
<script>
</script>
<style>
</style>           

我之前喜歡把style放在script之前，每次格式化後，總會出現“undifined”，然後會把script等複制一份append在後面，仔細研究後才發現了這個坑。