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