推薦VSCode 上特別好用的 Vue 插件之vetur
Vue自從發(fā)布以來就一直受到前端開發(fā)人員的熱愛，而除了一些本身優(yōu)秀的特征之外，還有就是豐富的插件和工具的支持和更新。雖然現(xiàn)在的編輯器需要安裝相應(yīng)的plugins才能進行Vue組件化開發(fā)，但是越來越多優(yōu)秀的plugins都提供了強大的支持。比如VSCode下面的Vetur就是這樣一款必備的Vue開發(fā)工具。下面就開始介紹一下它的一些功能吧
語法高亮
Vetur支持.vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數(shù)主流的前端開發(fā)腳本和插件，比如Sass和TypeScript，完整的支持高亮的語法如下所示：
語法高亮
Snippet
你可以使用一些snippet來編寫不同的腳本，比如在script中申明 lang=”ts” 來開發(fā)TypeScript
<script lang="ts"> // Use TS snippets here </script>
Emmet
VSCode本身自帶了Emmet，能夠通過Tab鍵對HTML5的代碼進行快速開發(fā)，不過，VSCode中需要修改Emmet配置才能對Vue進行支持。打開文件->首選項->設(shè)置，就會進入到 settings.json 文件中，在左側(cè)是VSCode默認的配置
在窗口右側(cè)可以進行一系列的配置，在其中添加
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
這樣就可以愉快的在Vue中體驗Emmet帶來的方便和快捷了
錯誤檢測
Vetur默認使用 eslint-plugin-vue@beta 來檢測
你可以在設(shè)置中的 settings.json 文件關(guān)閉 linting：
修改 vetur.validation.template 為false即可
格式
Vetur推薦使用2個空格來規(guī)定 editor.tabSize 和 editor.insertSpace，對于html和css/scss/less格式使用js-beautify來規(guī)范，js/ts的格式使用 TypeScript's language service，同時這些配置是可以改變的。具體可以參考：
js-beautify的Github倉庫：js-beautify
Sbulime-HTMLPrettify的Github倉庫：Sublime-HTMLPrettify
除了以上的功能外，還有代碼補全和Debugging功能，總而言之，一個工具如果能夠為開發(fā)提供非常大的便利，那么它就是非常值的推薦的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vite.config配置alias Error: ENOTEMPTY: director
這篇文章主要為大家介紹了vite.config配置alias時報錯：Error: ENOTEMPTY: directory not empty, rmdir解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解
今天小編就為大家分享一篇在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue各種事件監(jiān)聽實例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
本篇文章主要介紹了vue-cli配置環(huán)境變量的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
前段時間一直在學(xué)習(xí)vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue 實現(xiàn) rem 布局的 或者 vw 布局的方法，本文給提供多種方法,需要的朋友可以參考下2019-11-11
better scroll可以實現(xiàn)輪播圖和頁面滾動，是移動端滾動插件，這篇文章主要介紹了vue better scroll 無法滾動的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
本文主要介紹了在VueRouter中,meta對象的使用和配置方式,meta對象可以包含任何你希望附加到路由的自定義信息,這些配置信息可以靈活的滿足你的應(yīng)用需求,使得路由配置更具靈活性和可擴展性2024-10-10
element-ui自定義表格如何給input雙向綁定數(shù)據(jù)
這篇文章主要介紹了element-ui自定義表格如何給input雙向綁定數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue2+Elementui?Dialog實現(xiàn)封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫的最多的除了列表表格之外,就是各種彈窗組件,本文就來為大家詳細介紹一下Vue2如何結(jié)合Elementui?Dialog實現(xiàn)封裝自定義彈窗組件,希望對大家有所幫助2023-12-12