準(zhǔn)備

在vscode中寫vue頁面是一件很快樂的事情。
在使用vue-cli創(chuàng)建一個vue項(xiàng)目的時候我們多會選擇一個eslint來對我們的代碼風(fēng)格和樣式做一個監(jiān)控的樣子。
可是無盡的報錯讓人腦殼疼，所以用插件來搞定這些問題。方法可能會用到以下插件：

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

2. vetur
   寫vue必備的神器道具。后面用來這是相關(guān)的格式工具

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

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

1. vuter + eslint
   調(diào)用vuter默認(rèn)的prettier格式化代碼的時候，沒有設(shè)置的情況下會有單引號和尾部跟;符號的問題。
   如果按照網(wǎng)上的一些方法將vuter的js格式器改為vscode-typescript就可以解決。

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

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

export default{
  name: "test"
}

eslint的autofix其實(shí)很強(qiáng)，可以自行解決雙引號，尾部;的問題。按照eslint的規(guī)則去自動修復(fù)一些問題。

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

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

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

2. vuter + eslint + prettier

在vscode中setting.json做一些設(shè)置：使用下面的配置就可以直接格式化vue文件。

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

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

vuter需要的設(shè)置

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

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

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

配置好就可以快樂使用格式化了。
其實(shí)仔細(xì)看會注意到了這個選項(xiàng)：

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

但是使用因?yàn)閜rettier-eslint無法格式化vue中的script,可能后期作者會改進(jìn)。我們目前只有使用eslint來解決這個問題，如果后期能夠支持的話，如下面的設(shè)置一樣，prettier就可以像在外部設(shè)置直接按照eslint規(guī)則來格式化vue中的scirpt內(nèi)容。

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

最后，祝愿小伙伴們千行無BUG。