VsCode工具開發(fā)vue項目必裝插件清單(推薦!)
1.概述
這篇文章總結(jié)下使用VscCode工具開發(fā)VUE項目都有哪些插件是必須要安裝，這些插件都是開發(fā)的好伴侶。
當(dāng)新建一個vue項目時，經(jīng)常需要在VsCode工具中安裝插件，但是沒有符合開發(fā)項目的插件清單，尋找這些插件還是很費時間，這里總結(jié)的是一份項目開發(fā)必備的插件清單。
2.VsCode插件清單
2.1.Vetur插件讓vue文件代碼高亮
vue項目中vue結(jié)尾的文件代碼通默認(rèn)都是沒有高亮顯示，安裝Vetur插件可以讓vue文件代碼高亮。
2.2.Vue VSCode Snippets自動生成vue模板內(nèi)容插件
在VScode工具中使用vue開發(fā)項目，創(chuàng)建每個組件都要寫相同的內(nèi)容是一件繁瑣的事情，我們可以交給插件幫我們完成
1.安裝插件
2.使用插件生成vue模板代碼
在插件詳情中有完整的命令介紹
新建一個vue組件，輸入vb回車后就出來模板內(nèi)容
模板內(nèi)容展示
2.3.LiveServer實時刷新網(wǎng)頁
- 當(dāng)我們使用VSCode工具開發(fā)前端HTML頁面時，修改內(nèi)容后都要重新刷新網(wǎng)頁才能展示更新代碼的內(nèi)容。那么有沒有一種方式能夠?qū)崟r的顯示代碼更新的內(nèi)容那？
- 下面就通過LiveServer插件實現(xiàn)網(wǎng)頁內(nèi)容實時刷新
1.安裝LiveServer
在VSCode的Extends擴(kuò)展中輸入live，在LiveServer上點擊Install安裝即可
2.使用LiveServer打開網(wǎng)頁
- 在html頁面右鍵選擇Open with Live Server方式打開網(wǎng)頁
- 輸入代碼并保存，網(wǎng)頁自動顯示修改的代碼
3.開啟自動保存
上面修改代碼后，需要手動保存才能在網(wǎng)頁上展示新的內(nèi)容。那么我們設(shè)置VSCode自動保存代碼就可以實時的在網(wǎng)頁顯示新的內(nèi)容。
2.4.開發(fā)工具設(shè)置2個空格縮進(jìn)
- File-Preferences-Settings
- 搜索tabsize，設(shè)置空格為2
2.5.browser插件瀏覽器插件查看html文件
1.安裝創(chuàng)建
在擴(kuò)展欄的搜索欄中輸入open in browser，找到open in browser這款插件，點擊右下角“安裝”字樣即可安裝。
2.瀏覽html文件
vscode打開一個html文件方式：
1.按下Alt+B即可打開默認(rèn)的瀏覽器。
2.如果需要在非默認(rèn)瀏覽器上打開 快捷鍵 Shift+Alt+B
3.還可以通過在html文件上右鍵來選擇打開方式。
2.6.設(shè)置目錄分級顯示
在當(dāng)前目錄下如果只有一個分支，這個分支總是橫向顯示，我們更習(xí)慣是分級顯示。
1.設(shè)置目錄分級顯示
- File–Preferences–Settings
- Features–Explorer–去掉Compact Folders勾選
查看目錄分級顯示
2.7.Bracket Pair Colorizer彩虹括號
編寫代碼的過程中，免不了會有函數(shù)嵌套或是其他一些邏輯判斷等層層嵌套，隨著代碼量的增加，你會不會感覺括號嵌套太多層而導(dǎo)致代碼難以閱讀。
VSCode中安裝 Bracket Pair Colorizer插件，安裝此插件后，再閱讀自己的代碼，各個成對兒的括號都會以不同的顏色進(jìn)行區(qū)別
2.8.Material Icon Theme 項目圖標(biāo)插件
這款主題叫做 Material Icon Theme，它采用了 Google Material Design 風(fēng)格，文件圖標(biāo)以及文件夾圖標(biāo)覆蓋非常的全面。
2.9.語法檢查格式化插件ESLint+Prettier
在創(chuàng)建項目時使用語法檢查器能夠規(guī)范代碼格式，不符合規(guī)則的代碼會給出錯誤提示，將影響項目運(yùn)行。
使用了語法檢查器本來是讓代碼開發(fā)變得規(guī)范，如果影響了項目運(yùn)行就不太合適，這個時候可以使用ESLint插件和Prettier - code formatter插件自動格式化代碼，修正不符合規(guī)范的代碼。
插件安裝和配置參考文章：http://www.dhdzp.com/article/261887.htm
總結(jié)
到此這篇關(guān)于VsCode工具開發(fā)vue項目必裝插件的文章就介紹到這了,更多相關(guān)VsCode開發(fā)vue必裝插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue實現(xiàn)京東網(wǎng)站商品放大鏡效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Vue自定義指令實現(xiàn)對數(shù)字進(jìn)行千分位分隔
對數(shù)字進(jìn)行千分位分隔后展示應(yīng)該是大部分同學(xué)都做過的功能了吧,常規(guī)的做法通常是編寫一個工具函數(shù)來對數(shù)據(jù)進(jìn)行轉(zhuǎn)換,那么我們可不可以通過vue指令來實現(xiàn)這一功能呢,下面我們就來探索一下呢2024-02-02
Vue3+Vite+ElementPlus構(gòu)建學(xué)習(xí)筆記
這篇文章主要介紹了Vue3+Vite+ElementPlus構(gòu)建的相關(guān)資料,文中還介紹如何在Vue3項目中加入ElementPlus庫,并提供了完整引入的示例,需要的朋友可以參考下2024-12-12
vue項目設(shè)置scrollTop不起作用(總結(jié))
這篇文章主要介紹了vue項目設(shè)置scrollTop不起作用(總結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧詳解
這篇文章主要介紹了vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧,結(jié)合實例形式詳細(xì)分析了vue中雙向數(shù)據(jù)綁定的概念、原理、常見操作技巧與相關(guān)注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了解決vue-cli輸入命令vue ui沒效果的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中pc移動滾動穿透問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
基于Vue自定義指令實現(xiàn)按鈕級權(quán)限控制思路詳解
這篇文章主要介紹了基于vue自定義指令實現(xiàn)按鈕級權(quán)限控制,本文給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
Vue3響應(yīng)式高階用法之markRaw()的使用
在Vue3中,markRaw()用于防止對象被轉(zhuǎn)換為響應(yīng)式,適用于管理大型庫對象或靜態(tài)數(shù)據(jù),有助于優(yōu)化性能和防止不必要的修改,本文就來詳細(xì)的介紹一下,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了Vue.js進(jìn)行查詢操作的實例詳解的相關(guān)資料,需要的朋友可以參考下2017-08-08