準備

在vscode中寫vue頁面是一件很快樂的事情。
在使用vue-cli建立一個vue專案的時候我們多會選擇一個eslint來對我們的程式碼風格和樣式做一個監控的樣子。
可是無盡的報錯讓人腦殼疼，所以用外掛來搞定這些問題。方法可能會用到以下外掛：

1. eslint
   這個外掛主要是可以在寫的時候就提醒，程式碼中所存在的不符合要求的地方。

2. vetur
   寫vue必備的神器道具。後面用來這是相關的格式工具

3. prettier - code formatter
   用來格式化的格式化工具針對vue需要配置一下。

讓vue程式碼完美符合vue-cli的eslint要求有2種方法：

1. vuter + eslint
   呼叫vuter預設的prettier格式化程式碼的時候，沒有設定的情況下會有單引號和尾部跟;符號的問題。
   如果按照網上的一些方法將vuter的js格式器改為vscode-typescript就可以解決。

"vetur.format.defaultFormatter.js": "vscode-typescript"

這樣就解決了VUE中的格式化問題，但是它不會更正你已經存在的字串的雙引號問題。例如：

export default{
  name: "test"
}

eslint的autofix其實很強，可以自行解決雙引號，尾部;的問題。按照eslint的規則去自動修復一些問題。

"eslint.validate": ["javascript", "javascriptreact", {"language":"vue","autoFix": true}],
"eslint.autoFixOnSave": true,
 

這樣配置好，就可以快樂的使用了。

那有小夥伴覺得我不能放棄prettier,我還有其他的東西要格式化，那麼看下一種：

2. vuter + eslint + prettier

在vscode中setting.json做一些設定：使用下面的配置就可以直接格式化vue檔案。

eslint設定 {"language":"vue","autoFix": true} 第一可以檢測到vue,第二用eslint解決space-before-function-parent。

"eslint.validate": ["javascript", "javascriptreact", {"language":"vue","autoFix": true}],
"eslint.autoFixOnSave": true,
 

vuter需要的設定

"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.js": "prettier",

vuter引用格式化工具的時候的配置，例如prettier是要在這裡配置,而直接在setting.json中對prettier的設定是無效的。 這裡的配置讓prettier直接就格式化完了基本所有的東西，包括雙引號，尾部;的問題，eslint的autofix只是解決了function引數前要插入一個空格的問題。

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "singleQuote": true,
    "semi": false,
  }
},

配置好就可以快樂使用格式化了。
其實仔細看會注意到了這個選項：

"vetur.format.defaultFormatter.js": "prettier-eslint"

但是使用因為prettier-eslint無法格式化vue中的script,可能後期作者會改進。我們目前只有使用eslint來解決這個問題，如果後期能夠支援的話，如下面的設定一樣，prettier就可以像在外部設定直接按照eslint規則來格式化vue中的scirpt內容。

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "singleQuote": true,
    "semi": false,
    "eslintIntegration": true
  }
},

最後，祝願小夥伴們千行無BUG。