VUE代碼格式化配置vetur、eslint、prettier的故事

准備

在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。

作者：chan2017
鏈接：https://www.jianshu.com/p/f15b67c94c78
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。