vue3?vscode插件volar配置教程
需要禁用vetur，否則可能會(huì)有很多沖突，vue2用vetur，vue3用volar
1.關(guān)閉遠(yuǎn)程服務(wù)
這兩個(gè)服務(wù)需要關(guān)閉，否則經(jīng)常請(qǐng)求半天，只看英文的意思是跟蹤聯(lián)系，暫時(shí)不知道這兩個(gè)服務(wù)的具體作用，不過(guò)關(guān)閉后不影響volar的正常使用，vscode左下角齒輪>設(shè)置>搜索volar
2.拆分編輯器
volar一個(gè)很有用的效果就是點(diǎn)擊這個(gè)圖標(biāo)，可以vue文件左右拆分，并自動(dòng)折疊template、script、style標(biāo)簽
volarv1.0.11版本刪除了這個(gè)拆分圖標(biāo)，社區(qū)提問(wèn)為啥拆分圖標(biāo)沒(méi)了，作者的回答是為了節(jié)省視圖空間
提問(wèn)的老哥又認(rèn)為，這應(yīng)該是一個(gè)用戶(hù)設(shè)置，由用戶(hù)來(lái)決定是否開(kāi)啟這個(gè)拆分按鈕，最終作者采取了這個(gè)建議
目前最新版已經(jīng)加了回來(lái)，默認(rèn)是關(guān)閉的，可以通過(guò)設(shè)置里勾選來(lái)開(kāi)啟
命令方式，可設(shè)置快捷鍵
vscode左下角齒輪>鍵盤(pán)快捷方式>搜索volar>命令id為volar.action.splitEditors，設(shè)置一個(gè)順手的快捷鍵
設(shè)置左右折疊的標(biāo)簽
vscode左下角齒輪>設(shè)置>搜索settings.json，加入
// 左側(cè)不折疊的標(biāo)簽，其余標(biāo)簽會(huì)折疊 "volar.splitEditors.layout.left": [ "template", "script", "scriptSetup", ], // 右側(cè)不折疊的標(biāo)簽，其余標(biāo)簽會(huì)折疊 "volar.splitEditors.layout.right": [ "styles", "customBlocks" ],
3.ref自動(dòng)補(bǔ)全.value
勾選這個(gè)
到此這篇關(guān)于vue3 vscode插件volar配置教程的文章就介紹到這了,更多相關(guān)vue3 volar配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue把頁(yè)面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問(wèn)題)
這篇文章主要介紹了vue把頁(yè)面轉(zhuǎn)換成圖片導(dǎo)出方式(html2canvas導(dǎo)出不全問(wèn)題),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中的任務(wù)隊(duì)列和異步更新策略(任務(wù)隊(duì)列,微任務(wù),宏任務(wù))
這篇文章主要介紹了vue中的任務(wù)隊(duì)列和異步更新策略(任務(wù)隊(duì)列,微任務(wù),宏任務(wù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue雙向錨點(diǎn)實(shí)現(xiàn)過(guò)程簡(jiǎn)易版(scrollIntoView)
這篇文章主要介紹了vue雙向錨點(diǎn)實(shí)現(xiàn)過(guò)程簡(jiǎn)易版(scrollIntoView),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
解決vue 界面在蘋(píng)果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓問(wèn)題
這篇文章主要介紹了vue 界面在蘋(píng)果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)抽屜彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式
這篇文章主要介紹了Vue手動(dòng)控制點(diǎn)擊事件Click觸發(fā)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue3響應(yīng)式對(duì)象的api超全實(shí)例詳解
可以把數(shù)據(jù)變成響應(yīng)式api的方法叫做響應(yīng)式api,下面這篇文章主要給大家介紹了關(guān)于vue3響應(yīng)式對(duì)象api的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
用vue寫(xiě)一個(gè)仿簡(jiǎn)書(shū)的輪播圖的示例代碼
本篇文章主要介紹了用vue寫(xiě)一個(gè)仿簡(jiǎn)書(shū)的輪播圖的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue如何使用process.env搭建自定義運(yùn)行環(huán)境
這篇文章主要介紹了vue如何使用process.env搭建自定義運(yùn)行環(huán)境，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01