網上有一大堆關於格式化vue程式碼的方法，但基本都配合使用了prettier格式化外掛，相信搗鼓過的同學肯定會跟我一樣都有一種感受：雜亂！prettier外掛在使用的時候需要與eslint配合使用，兩者在一起使用的話不僅會產生衝突（你需要額外在prettier規則配置裡配置上和eslint一樣的規則），而且兩者功能重疊（兩者在一起工作的原理也是在eslint --fix以後再用prettier去格式化程式碼）。eslint --fix已經能幫你格式化出一套漂亮的vue程式碼，再用prettier就顯得多此一舉。
其實，要想統一併寫出一手漂亮的vue程式碼，最簡單直接的辦法就是按照vue官方提供的vue風格指南，配合官方提供的配套的校驗外掛eslint-plugin-vue，再在VSCode中安裝vetur和eslint外掛即可。
第一步、Vetur
vetur是vue官方提供的支援vue編寫風格的VSCode外掛。具體的安裝很簡單，這裡我就介紹幾個vetur常用的功能：
vue程式碼高亮
支援多種語言，包括但不侷限於ts、coffee。
快速生成程式碼片段
當你新建一個vue檔案時，你可以通過輸入scaffold快速生成如下程式碼：
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
複製程式碼或者通過輸入template、script、style，生成相應的html、script、style程式碼。
使用縮寫語法快速編寫html、css等
vetur整合了emmet外掛，比如輸入div.a回車就變成<div class="a"></div>。emmet還有很多功能，想要了解更多的同學可以上emmet官網逛逛。
靜態檢查程式碼錯誤
能夠靜態的檢測template、script、style中的語法錯誤。
格式化程式碼
vetur官方建議配合prettier來進行程式碼格式化，但本文並不採取prettier來進行程式碼的格式化，有興趣的同學可以去瀏覽vetur官網。
智慧提示
vetur整合了vue的語法，所以當你在編寫一些vue具有的指令、事件或者生命週期等一切屬於vue的語法時，都會對你進行智慧化的提示，從而讓你快速的編寫出vue程式碼。
框架支援
vetur還對一些框架有支援，比如vue-router、element-ui等，能給這些框架提供自動補全屬性的功能。
第二步、VSCode中的eslint
VSCode中的eslint外掛將使用安裝在當前開啟的工作區資料夾中的eslint庫，也就是會讀取你當前專案的eslint配置資訊。如果你的eslint配置是寫在.eslintrc.js檔案中，則VSCode中的eslint外掛將會讀取.eslintrc.js檔案的配置資訊來對你的程式碼做靜態分析，並標記出不符合規範的程式碼片段。
安裝完eslint外掛以後，我們需要在VSCode配置中新增幾個選項：
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true
複製程式碼配置好這兩個選項後，VSCode就能靜態的對vue程式碼進行檢查，並提示有不符合規範的地方，並且當檔案儲存時，將自動修復不符合規範的地方。
第三步、程式碼中的eslint
程式碼中不僅需要js的eslint還需要vue的eslint。
安裝
npm install --save-dev eslint eslint-plugin-vue
複製程式碼eslint-plugin-vue這個外掛的作用是能用eslint按照官方提供的風格指南來校驗.vue檔案的template和script裡的程式碼。eslint-plugin-vue提供了一系列的規則供開發者們參考。
配置
在.eslintrc.js中寫入：
module.exports = {
extends: [
// add more generic rulesets here, such as:
'eslint:recommended',
'plugin:vue/essential'
],
rules: {
// override/add rules settings here, such as:
// 'vue/html-self-closing': 'off'
}
}
複製程式碼配合第二步，VSCode就可以按照vue風格指南對.vue檔案的script片段進行eslint和vue風格指南靜態校驗。
雖然script片段統一了風格，但是每個人寫template的風格也不一樣，如果還想約束並校驗template的風格，則將上述的配置修改為：
module.exports = {
extends: [
...,
'plugin:vue/recommended'
]
}
複製程式碼當你修改儲存時，VSCode就會對你程式碼裡的template和script裡的程式碼進行eslint自動修復。
最後
本文的目的也是為了讓用VSCode開發Vue的同學們不再被其他的外掛搞得亂七八糟，只需要eslint，不需要下載額外的格式化外掛，也不需要額外的繁瑣的配置，按照上述幾步，就能很輕鬆的格式化出漂亮的Vue程式碼。