【整理分享】50+ 個實用VSCode插件，快來收藏使用！
- 青灯夜游轉載
- 2022-08-31 11:51:145259瀏覽
雖然前端 IDE 很多，vim、notepad 、sublime text3、atom......，但誰是地表最強 IDE 大家心裡都清楚，我自然不必多說。
我是一個使用 VSCode 超過 7 年的用戶，從 VSCode 正式發布的第一年我就開始使用，一直至今，是一個不折不扣的資深用戶和生產力狂魔。
這篇文章主要介紹了這麼多年我在使用 VSCode 過程中用到的一些不錯的插件。 【推薦學習：《vscode入門教學》】
很多人吐槽裸的VSCode 不好用，就像是裸的Obsidian 一樣，它們的精髓在於擴展（中國人喜歡叫插件，下文全部稱呼它們插件好了）。一個經過精心設定的 VSCode 無異於瑞士軍刀，生產力神器。
摸魚
掘金
第一個當然是它。
身為資深掘友，如果連怎麼在 VSCode 中玩轉掘金都不會，還怎麼好意思說自己是混前端圈的？
這是暗色主題：
這是亮色主題：
這是文章頁面：
還有聊天模式、禪模式等功能，快來體驗！
下載網址：marketplace.visualstudio.com/items?itemN…
##力扣
可以登陸力扣帳號，直接在VSCode 看題目和寫題解！
marketplace.visualstudio.com/items?itemN…
##小霸王想在VSCode 中打遊戲？它可以做到！
不過我不玩遊戲，也不建議在工作時間打遊戲。刷刷掘金或力扣還好。
下載位址：
copilot
程式碼提示神器，自從用了它，寫程式基本上不怎麼用手了。
看，我輸入一個 f，它把我想做的事全都想好了， 連函數名稱、參數、參數型別都想好了。
下載網址：marketplace.visualstudio.com/items?itemN…
##Tabninetabnine 和copilot 的作用很類似，同樣是基於AI 來幫助我們自動完成程式碼。 不過 tabnine 要比 copilot 貴一點，但功能也相對多。 下載地址：
marketplace.visualstudio.com/items?itemN…##turbo-console-log
######################################## #要問寫 JS 的同學，我們寫過最多的程式碼是什麼？那麼 console.log 絕對上榜！
有了這款插件，只需要將遊標移到要列印的變數上面，按下ctrl option l，就會在下一行自動輸入console.log，並且貼心的把檔名、行號、變數名稱這些訊息都帶了，是不是很方便？
下載網址：marketplace.visualstudio.com/items?itemN…
##indent-rainbow
彩虹縮進，當我們的程式碼嵌套結構比較複雜後，它可以幫助我們對鎖定進行對其檢查。每個縮排都有不同的交替彩虹色。
marketplace.visualstudio.com/items?itemN…
##indent-rainbow- palettes彩虹縮排調色盤。如果你使用了彩虹縮進，但想用其他漸層色，那就需要這款外掛了！它目前支援 16 種漸層色。
標籤高亮。當我們有一個複雜的 DOM 結構時，我們可以使用這個插件來讓結束標籤高亮，這樣防止我們犯一些低階的錯誤。
下載位址：
顏色高亮。 透過填滿背景色來突顯顏色變數。
支援CSS：
也支援JavaScript：
#待辦事項高亮。 我們在寫程式的過程中，有很多時候發現了一些需要做的事情和需要修復的 Bug，但現在沒時間完成，所以會寫註解。為了讓這些註解難以忽略，我們可以使用這個外掛。
它預設會高亮 TODO 和 FIXME 關鍵字。 我們也可以配置其他關鍵字和設定高亮色。下載網址：
marketplace.visualstudio.com/items?itemN…
註解高亮。 這個外掛幫助我們在程式碼中插入更人性化的註解。 除了 TODO 和 FIXME 之外，它還可以為註解定義一些類型。
我們也可以自訂其他類型的註解。 下載位址：marketplace.visualstudio.com/items?itemN…
我們在寫 JavaScript 專案時，會導入很多函式庫。 這個外掛可以幫助我們查看導入包的體積。 下載網址：marketplace.visualstudio.com/items?itemN… ##auto-close- tag marketplace.visualstudio.com/items?itemN… ##code-spell- checker拼字錯誤檢查。 當我們編寫程式碼時，偶爾會出現單字拼錯的情況，這個外掛可以檢查到可能拼錯的單字，並有波浪線提醒。 它支援駝峰命名法。 智慧路徑感知，可以幫我們自動補充檔案名稱。 下載網址： JavaScript 的字串可以支援三種形式，單引號、雙引號、尖角號，有時我們想要拼接字串時，需要將原來的單引號或雙引號改為尖角號。使用這個插件，只需要按下快速鍵 cmd '就可以做到。 marketplace.visualstudio.com/items?itemN… 它可以自動轉換JavaScript 的範本字串。 和 ToggleQuotes 不同的是，它是自動完成的。 下載位址： ##IntelliSense for CSS class names in HTML class 的自動補全智慧提示。 下載位址：marketplace.visualstudio.com/items?itemN… tailwind CSS 的自動補全智能提示。 如果你使用 tailwind CSS 的話，可以停用 IntelliSense for CSS class names in HTML。 下載網址：marketplace.visualstudio.com/items?itemN… 這個插件可以幫助我們智慧感知要導入的模組。 當我們輸入 import 時它會自動完成。 下載網址：marketplace.visualstudio.com/items?itemN… ##################################### 有時候我們想要修改變數的命名規則，像是中橫線、底線、全大寫等。 下載網址：marketplace.visualstudio.com/items?itemN… ##Nested Comments 因為被嵌套的註釋會和第一個註釋開頭組合成有效的註釋，而後面的部分將會被忽略。 marketplace.visualstudio.com/items?itemN… ##Auto Rename Tag#自動重新命名標籤，你可以在前面修改，也可以在後面修改，它都會同步修改。 這個外掛提供了ES7/React/Redux/React-Native 等程式碼片段。 可以快速建立模板程式碼，提高我們的開發效率。 下載位址： 這個外掛程式將ESLint 整合到VSCode 中，我們可以透過這個外掛程式來檢查工作區的程式碼。 下載網址：marketplace.visualstudio.com/items?itemN… 非常經典的插件，這個插件可以格式化各種各樣的文件內容。 marketplace.visualstudio.com/items?itemN… 它可以將複雜的JSX 提取到單獨的元件或檔案中，這在重構的時候非常有用。 下載位址： #當我們需要將某一段DOM 標籤包起來時，這個外掛很管用。 我們可以選擇一段 DOM 標籤，然後按住 Options w，就可以在外層建立一個標籤了。 下載位址： 下載網址：marketplace.visualstudio.com/items?itemN… ##Hungry Delete marketplace.visualstudio.com/items?itemN… ##Paste JSON as Code 當我們複製了一段JSON，想根據這段JSON 產生對應的JSON 結構，那麼可以使用這款外掛程式。 不管是前端項目還是後端項目，大多都會使用.env 檔案來保存環境變數。 這款外掛程式可以對 .env 檔案進行高亮。 下載位址： 德古拉的官方主題，最經典的主題之一，也是我的最愛。 marketplace.visualstudio.com/items?itemN… Material Theme 提供了Material 風格的主題，讓程式碼看起來更酷。 下載網址： 如果你是Atom 的用戶，或是喜歡Atom 主題的開發者，可以嘗試這個主題外掛。 marketplace.visualstudio.com/items?itemN… VSCode Icons 這個外掛就是來做這件事兒的！ VSCode 預設的目錄結構長這樣： 使用VSCode Icons 後圖示變成這樣了： 下載網址：marketplace.visualstudio.com/items?itemN… Material Icon Theme #幾乎是最全的圖示主題外掛。 支援這麼多種資料夾： 下載位址：marketplace.visualstudio.com/items?itemN… todo-tree todo tree 可以透過TODO 和FIXME 註解來管理專案。 我們可以快速查看被打了註解的檔案。 下載網址：marketplace.visualstudio.com/items?itemN… ##vscode-peacock 它預設支援的顏色有 Angular 紅、微軟藍、JS 黃、mandalorian 藍、Node 綠、React 藍等等。 marketplace.visualstudio.com/items?itemN…
##Quokka.js 下載連結：marketplace.visualstudio.com/items?itemN… ##rest-client 測試API 的方式很多，像是重量級的PostMan，輕量級的curl。但是它們在 VSCode 中使用起來都不是那麼方便。 下載網址：marketplace.visualstudio.com/items?itemN… 當我們的專案使用多個編輯器工具開發時，想要統一程式碼風格，就需要配置不同工具的設定檔。 marketplace.visualstudio.com/items?itemN… Git Lens 可以快速在 Github 中開啟專案、檔案、Action、PR 等。 下載網址：marketplace.visualstudio.com/items?itemN… ##open in browser 在 HTML 檔案中右鍵，選單中會有兩個選項，或使用對應的快捷鍵。 marketplace.visualstudio.com/items?itemN… ##Live Server當我們修改html 的內容，想讓瀏覽器和程式碼保持一致時，就需要這個外掛。 在 HTML 檔案中右鍵，選單中會有兩個選項，或使用對應的快捷鍵。 它可以在VSCode 中即時預覽HTML。 但是它不支援 React、Angular 這類框架開發的應用。 下載位址： 當我們有多個項目時，可以透過這個外掛程式管理項目，快速切換項目、標籤等功能。 marketplace.visualstudio.com/items?itemN… 你想要將自己的程式碼分享給別人即時地協作編輯和調試？這個外掛程式可以將任何程式語言開發的專案或任何類型的專案與其他人共用。對方可以直接在你的環境下寫程式碼，不需要額外安裝任何環境或 SDK。 甚至可以直接在 Web 中協作編輯！ 雖然名字叫做markdown PDF，但其實可以將markdown 匯出為各種格式的檔案。 支援這麼多件匯出格式。 下載網址： 下載位址： ##總結 更多關於VSCode的相關知識，請造訪：vscode教學！ 
這個外掛可以幫助我們修改變數名稱。
如果只是修改一個變數名稱似乎挺雞肋。但它的優點是可以同時修改很多變數名。 
下載位址：
marketplace.visualstudio.com/items?itemN…
#Dracula Official
支援這麼多種檔案：#工具類別
當我們想要快速驗證某段JS 或TS 程式碼時，可以使用這個外掛程式。
REST Client 就是一個很好的插件，可以幫助我們在 VSCode 中輕鬆測試 API。 
下載網址：
marketplace.visualstudio.com/items?itemN…
