Vue自從釋出以來就一直受到前端開發人員的熱愛，而除了一些本身優秀的特徵之外，還有就是豐富的外掛和工具的支援和更新。雖然現在的編輯器需要安裝相應的plugins才能進行Vue元件化開發，但是越來越多優秀的plugins都提供了強大的支援。比如VSCode下面的Vetur就是這樣一款必備的Vue開發工具。下面就開始介紹一下它的一些功能吧

Github倉庫：Vetur
官方文件：Vetur文件

語法高亮

Vetur支援.vue檔案的語法高亮顯示，除了支援template模板以外，還支援大多數主流的前端開發指令碼和外掛，比如Sass和TypeScript，完整的支援高亮的語法如下所示：

Snippet

你可以使用一些snippet來編寫不同的指令碼，比如在script中申明 lang=”ts” 來開發TypeScript

<script lang="ts">
  // Use TS snippets here
</script>

Emmet

VSCode本身自帶了Emmet，能夠通過Tab鍵對HTML5的程式碼進行快速開發，不過，VSCode中需要修改Emmet配置才能對Vue進行支援。開啟檔案->首選項->設定，就會進入到 settings.json 檔案中，在左側是VSCode預設的配置

在視窗右側可以進行一系列的配置，在其中新增

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

這樣就可以愉快的在Vue中體驗Emmet帶來的方便和快捷了

錯誤檢測

Vetur預設使用 [email protected] 來檢測

你可以在設定中的 settings.json 檔案關閉 linting：

修改 vetur.validation.template 為false即可

格式

Vetur推薦使用2個空格來規定 editor.tabSize 和 editor.insertSpace，對於html和css/scss/less格式使用js-beautify來規範，js/ts的格式使用 TypeScript’s language service，同時這些配置是可以改變的。具體可以參考：

js-beautify的Github倉庫：js-beautify

Sbulime-HTMLPrettify的Github倉庫：Sublime-HTMLPrettify

除了以上的功能外，還有程式碼補全和Debugging功能，總而言之，一個工具如果能夠為開發提供非常大的便利，那麼它就是非常值的推薦的。