1.概述

這篇文章總結(jié)下使用VscCode工具開發(fā)VUE項(xiàng)目都有哪些插件是必須要安裝，這些插件都是開發(fā)的好伴侶。

當(dāng)新建一個vue項(xiàng)目時(shí)，經(jīng)常需要在VsCode工具中安裝插件，但是沒有符合開發(fā)項(xiàng)目的插件清單，尋找這些插件還是很費(fèi)時(shí)間，這里總結(jié)的是一份項(xiàng)目開發(fā)必備的插件清單。

2.VsCode插件清單

2.1.Vetur插件讓vue文件代碼高亮

vue項(xiàng)目中vue結(jié)尾的文件代碼通默認(rèn)都是沒有高亮顯示，安裝Vetur插件可以讓vue文件代碼高亮。

2.2.Vue VSCode Snippets自動生成vue模板內(nèi)容插件

在VScode工具中使用vue開發(fā)項(xiàng)目，創(chuàng)建每個組件都要寫相同的內(nèi)容是一件繁瑣的事情，我們可以交給插件幫我們完成

1.安裝插件

2.使用插件生成vue模板代碼

在插件詳情中有完整的命令介紹

新建一個vue組件，輸入vb回車后就出來模板內(nèi)容

模板內(nèi)容展示

2.3.LiveServer實(shí)時(shí)刷新網(wǎng)頁

• 當(dāng)我們使用VSCode工具開發(fā)前端HTML頁面時(shí)，修改內(nèi)容后都要重新刷新網(wǎng)頁才能展示更新代碼的內(nèi)容。那么有沒有一種方式能夠?qū)崟r(shí)的顯示代碼更新的內(nèi)容那？
• 下面就通過LiveServer插件實(shí)現(xiàn)網(wǎng)頁內(nèi)容實(shí)時(shí)刷新

1.安裝LiveServer

在VSCode的Extends擴(kuò)展中輸入live，在LiveServer上點(diǎn)擊Install安裝即可

2.使用LiveServer打開網(wǎng)頁

• 在html頁面右鍵選擇Open with Live Server方式打開網(wǎng)頁
• 輸入代碼并保存，網(wǎng)頁自動顯示修改的代碼

3.開啟自動保存

上面修改代碼后，需要手動保存才能在網(wǎng)頁上展示新的內(nèi)容。那么我們設(shè)置VSCode自動保存代碼就可以實(shí)時(shí)的在網(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這款插件，點(diǎn)擊右下角“安裝”字樣即可安裝。

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 項(xiàng)目圖標(biāo)插件

這款主題叫做 Material Icon Theme，它采用了 Google Material Design 風(fēng)格，文件圖標(biāo)以及文件夾圖標(biāo)覆蓋非常的全面。

2.9.語法檢查格式化插件ESLint+Prettier

在創(chuàng)建項(xiàng)目時(shí)使用語法檢查器能夠規(guī)范代碼格式，不符合規(guī)則的代碼會給出錯誤提示，將影響項(xiàng)目運(yùn)行。
使用了語法檢查器本來是讓代碼開發(fā)變得規(guī)范，如果影響了項(xiàng)目運(yùn)行就不太合適，這個時(shí)候可以使用ESLint插件和Prettier - code formatter插件自動格式化代碼，修正不符合規(guī)范的代碼。

插件安裝和配置參考文章：http://www.dbjr.com.cn/article/261887.htm

總結(jié)

到此這篇關(guān)于VsCode工具開發(fā)vue項(xiàng)目必裝插件的文章就介紹到這了,更多相關(guān)VsCode開發(fā)vue必裝插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論