首頁 > 軟體

VsCode工具開發vue專案必裝外掛清單(推薦!)

2022-09-06 18:04:58

1.概述

這篇文章總結下使用VscCode工具開發VUE專案都有哪些外掛是必須要安裝，這些外掛都是開發的好伴侶。

當新建一個vue專案時，經常需要在VsCode工具中安裝外掛，但是沒有符合開發專案的外掛清單，尋找這些外掛還是很費時間，這裡總結的是一份專案開發必備的外掛清單。

2.VsCode外掛清單

2.1.Vetur外掛讓vue檔案程式碼高亮

vue專案中vue結尾的檔案程式碼通預設都是沒有高亮顯示，安裝Vetur外掛可以讓vue檔案程式碼高亮。

2.2.Vue VSCode Snippets自動生成vue模板內容外掛

在VScode工具中使用vue開發專案，建立每個元件都要寫相同的內容是一件繁瑣的事情，我們可以交給外掛幫我們完成

1.安裝外掛

2.使用外掛生成vue模板程式碼

在外掛詳情中有完整的命令介紹

新建一個vue元件，輸入vb回車後就出來模板內容

模板內容展示

2.3.LiveServer實時重新整理網頁

  • 當我們使用VSCode工具開發前端HTML頁面時，修改內容後都要重新重新整理網頁才能展示更新程式碼的內容。那麼有沒有一種方式能夠實時的顯示程式碼更新的內容那？
  • 下面就通過LiveServer外掛實現網頁內容實時重新整理

1.安裝LiveServer

在VSCode的Extends擴充套件中輸入live，在LiveServer上點選Install安裝即可

2.使用LiveServer開啟網頁

  • 在html頁面右鍵選擇Open with Live Server方式開啟網頁
  • 輸入程式碼並儲存，網頁自動顯示修改的程式碼

3.開啟自動儲存

上面修改程式碼後，需要手動儲存才能在網頁上展示新的內容。那麼我們設定VSCode自動儲存程式碼就可以實時的在網頁顯示新的內容。

2.4.開發工具設定2個空格縮排

  • File-Preferences-Settings
  • 搜尋tabsize，設定空格為2

2.5.browser外掛瀏覽器外掛檢視html檔案

1.安裝建立

在擴充套件欄的搜尋欄中輸入open in browser，找到open in browser這款外掛，點選右下角“安裝”字樣即可安裝。

2.瀏覽html檔案

vscode開啟一個html檔案方式：

1.按下Alt+B即可開啟預設的瀏覽器。

2.如果需要在非預設瀏覽器上開啟 快捷鍵 Shift+Alt+B

3.還可以通過在html檔案上右鍵來選擇開啟方式。

2.6.設定目錄分級顯示

在當前目錄下如果只有一個分支，這個分支總是橫向顯示，我們更習慣是分級顯示。

1.設定目錄分級顯示

  • File–Preferences–Settings
  • Features–Explorer–去掉Compact Folders勾選

檢視目錄分級顯示

2.7.Bracket Pair Colorizer彩虹括號

編寫程式碼的過程中，免不了會有函數巢狀或是其他一些邏輯判斷等層層巢狀，隨著程式碼量的增加，你會不會感覺括號巢狀太多層而導致程式碼難以閱讀。

VSCode中安裝 Bracket Pair Colorizer外掛，安裝此外掛後，再閱讀自己的程式碼，各個成對兒的括號都會以不同的顏色進行區別

2.8.Material Icon Theme 專案圖示外掛

這款主題叫做 Material Icon Theme，它採用了 Google Material Design 風格，檔案圖示以及資料夾圖示覆蓋非常的全面。

2.9.語法檢查格式化外掛ESLint+Prettier

在建立專案時使用語法檢查器能夠規範程式碼格式，不符合規則的程式碼會給出錯誤提示，將影響專案執行。
使用了語法檢查器本來是讓程式碼開發變得規範，如果影響了專案執行就不太合適，這個時候可以使用ESLint外掛和Prettier - code formatter外掛自動格式化程式碼，修正不符合規範的程式碼。

外掛安裝和設定參考文章：https://www.jb51.net/article/261887.htm

總結

到此這篇關於VsCode工具開發vue專案必裝外掛的文章就介紹到這了,更多相關VsCode開發vue必裝外掛內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com