溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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默認使用 eslint-plugin-vue@beta 來檢測
你可以在設置中的 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功能，總而言之，一個工具如果能夠為開發提供非常大的便利，那么它就是非常值的推薦的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
