推薦VSCode 上特別好用的 Vue 插件之vetur
Vue自從發(fā)布以來就一直受到前端開發(fā)人員的熱愛，而除了一些本身優(yōu)秀的特征之外，還有就是豐富的插件和工具的支持和更新。雖然現(xiàn)在的編輯器需要安裝相應(yīng)的plugins才能進(jìn)行Vue組件化開發(fā)，但是越來越多優(yōu)秀的plugins都提供了強(qiáng)大的支持。比如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的代碼進(jìn)行快速開發(fā)，不過，VSCode中需要修改Emmet配置才能對Vue進(jìn)行支持。打開文件->首選項->設(shè)置，就會進(jìn)入到 settings.json 文件中，在左側(cè)是VSCode默認(rèn)的配置
在窗口右側(cè)可以進(jìn)行一系列的配置，在其中添加
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
這樣就可以愉快的在Vue中體驗Emmet帶來的方便和快捷了
錯誤檢測
Vetur默認(rèn)使用 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
除了以上的功能外，還有代碼補(bǔ)全和Debugging功能，總而言之，一個工具如果能夠為開發(fā)提供非常大的便利，那么它就是非常值的推薦的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Element-UI Table 表格指定列添加點擊事件
這篇文章主要介紹了關(guān)于Element-UI Table 表格指定列添加點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了axios實現(xiàn)文件上傳并獲取進(jìn)度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本篇文章主要介紹了如何理解Vue的render函數(shù)的具體用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
element動態(tài)路由面包屑的實現(xiàn)示例
本文主要介紹了element動態(tài)路由面包屑的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
ElementPlus 中el-select自定義指令實現(xiàn)觸底加載請求options數(shù)據(jù)的方法
觸底時,繼續(xù)向后端發(fā)請求獲取下一頁的數(shù)據(jù),請求回來的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實現(xiàn)觸底加載請求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue如何預(yù)覽后端傳來的二進(jìn)制圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue項目雙滑塊組件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
electron-vue?運(yùn)行報錯?Object.fromEntries?is?not?a?function
Object.fromEntries()?是?ECMAScript?2019?新增的一個靜態(tài)方法，用于將鍵值對列表（如數(shù)組）轉(zhuǎn)換為對象，如果在當(dāng)前環(huán)境中不支持該方法，可以使用?polyfill?來提供類似功能，接下來通過本文介紹electron-vue?運(yùn)行報錯?Object.fromEntries?is?not?a?function的解決方案2023-05-05
開發(fā)中經(jīng)常會使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于如何在vite里獲取env環(huán)境變量的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
下面小編就為大家分享一篇vue監(jiān)聽滾動事件 實現(xiàn)某元素吸頂或者固定位置顯示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02