【整理分享】50+ 個實用VSCode插件，快來收藏使用！

雖然前端 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 中打遊戲？它可以做到！

不過我不玩遊戲，也不建議在工作時間打遊戲。刷刷掘金或力扣還好。

下載位址：

marketplace.visualstudio.com/items?itemN…

##程式碼體驗類別

---

copilot

#copilot

程式碼提示神器，自從用了它，寫程式基本上不怎麼用手了。

看，我輸入一個 f，它把我想做的事全都想好了， 連函數名稱、參數、參數型別都想好了。

缺點是有時候比較笨，而且要收費。

下載網址：marketplace.visualstudio.com/items?itemN…

##Tabnine

tabnine 和copilot 的作用很類似，同樣是基於AI 來幫助我們自動完成程式碼。

不過 tabnine 要比 copilot 貴一點，但功能也相對多。

和 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 種漸層色。

下載網址：

marketplace.visualstudio.com/items?itemN…

##highlight-matching- tag

標籤高亮。當我們有一個複雜的 DOM 結構時，我們可以使用這個插件來讓結束標籤高亮，這樣防止我們犯一些低階的錯誤。

下載位址：marketplace.visualstudio.com/items?itemN…

##vscode-colorize

顏色高亮。 透過填滿背景色來突顯顏色變數。

支援CSS：

也支援JavaScript：

它也支援所有的檔案類型，你只需要配置它就可以了。

下載地址：

marketplace.visualstudio.com/items?itemN…

##vscode-todo-highlight

#待辦事項高亮。 我們在寫程式的過程中，有很多時候發現了一些需要做的事情和需要修復的 Bug，但現在沒時間完成，所以會寫註解。為了讓這些註解難以忽略，我們可以使用這個外掛。

它預設會高亮 TODO 和 FIXME 關鍵字。

我們也可以配置其他關鍵字和設定高亮色。

下載網址：

marketplace.visualstudio.com/items?itemN…

##better-comments

註解高亮。 這個外掛幫助我們在程式碼中插入更人性化的註解。 除了 TODO 和 FIXME 之外，它還可以為註解定義一些類型。

我們也可以自訂其他類型的註解。

下載位址：

marketplace.visualstudio.com/items?itemN…

##vscode-import-cost

#顯示導入包的體積。

我們在寫 JavaScript 專案時，會導入很多函式庫。

這個外掛可以幫助我們查看導入包的體積。

下載網址：marketplace.visualstudio.com/items?itemN…

##auto-close- tag

自動關閉標籤。

當我們輸入

時，它會自動把後面的括號補充好。 雖然很簡單的功能，但卻是剛需！

下載網址：

marketplace.visualstudio.com/items?itemN…

##code-spell- checker拼字錯誤檢查。

當我們編寫程式碼時，偶爾會出現單字拼錯的情況，這個外掛可以檢查到可能拼錯的單字，並有波浪線提醒。

它支援駝峰命名法。

下載網址：

marketplace.visualstudio.com/items?itemN…

##path-intellisense

智慧路徑感知，可以幫我們自動補充檔案名稱。

下載網址：marketplace.visualstudio.com/items?itemN…

##Toggle Quotes

JavaScript 的字串可以支援三種形式，單引號、雙引號、尖角號，有時我們想要拼接字串時，需要將原來的單引號或雙引號改為尖角號。使用這個插件，只需要按下快速鍵 cmd '就可以做到。

下載位址：

marketplace.visualstudio.com/items?itemN…

##Template String Converter

它可以自動轉換JavaScript 的範本字串。 和 ToggleQuotes 不同的是，它是自動完成的。

下載位址：

marketplace.visualstudio.com/items?itemN…

##IntelliSense for CSS class names in HTML

class 的自動補全智慧提示。 下載位址：marketplace.visualstudio.com/items?itemN…

Tailwind CSS IntelliSense

tailwind CSS 的自動補全智能提示。 如果你使用 tailwind CSS 的話，可以停用 IntelliSense for CSS class names in HTML。 下載網址：marketplace.visualstudio.com/items?itemN…

npm Intellisense

這個插件可以幫助我們智慧感知要導入的模組。 當我們輸入 import 時它會自動完成。 下載網址：marketplace.visualstudio.com/items?itemN…

change-case

#####################################

有時候我們想要修改變數的命名規則，像是中橫線、底線、全大寫等。
這個外掛可以幫助我們修改變數名稱。
如果只是修改一個變數名稱似乎挺雞肋。但它的優點是可以同時修改很多變數名。

下載網址：marketplace.visualstudio.com/items?itemN…

##Nested Comments

巢狀註解一直是個問題。

因為被嵌套的註釋會和第一個註釋開頭組合成有效的註釋，而後面的部分將會被忽略。

這個外掛可以幫助我們將被嵌套的註解進行字元轉換，在我們解除外層註解時，再還原被嵌套的註解。

下載位址：

marketplace.visualstudio.com/items?itemN…

##Auto Rename Tag#自動重新命名標籤，你可以在前面修改，也可以在後面修改，它都會同步修改。

下載位址：

marketplace.visualstudio.com/items?itemN…

##ES7 React/Redux /React-Native snippets

這個外掛提供了ES7/React/Redux/React-Native 等程式碼片段。 可以快速建立模板程式碼，提高我們的開發效率。

例如使用 React 的 useState Hook，它可以自動轉換 setXXX 的駝峰命名法，以及自動跳躍遊標位置。

下載位址：marketplace.visualstudio.com/items?itemN…

##ESLint

這個外掛程式將ESLint 整合到VSCode 中，我們可以透過這個外掛程式來檢查工作區的程式碼。 下載網址：marketplace.visualstudio.com/items?itemN…

Prettier

非常經典的插件，這個插件可以格式化各種各樣的文件內容。

下載網址：

marketplace.visualstudio.com/items?itemN…

##Glean

它可以將複雜的JSX 提取到單獨的元件或檔案中，這在重構的時候非常有用。

下載位址：

marketplace.visualstudio.com/items?itemN…

##htmltagwrap

#當我們需要將某一段DOM 標籤包起來時，這個外掛很管用。 我們可以選擇一段 DOM 標籤，然後按住 Options w，就可以在外層建立一個標籤了。

下載位址：
marketplace.visualstudio.com/items?itemN…

##Version Lens

可以查看專案中依賴的npm 套件的最新版本，以及升級最新版本。

下載網址：marketplace.visualstudio.com/items?itemN…

##Hungry Delete

這個外掛幫助我們一鍵刪除多個空白行。

按住 Option Delete 就可以刪除多個空白行。

下載網址：

marketplace.visualstudio.com/items?itemN…

##Paste JSON as Code 當我們複製了一段JSON，想根據這段JSON 產生對應的JSON 結構，那麼可以使用這款外掛程式。

它支援非常多的程式語言，像是 TypeScript、Python、Go、Java 等。

下載網址：

marketplace.visualstudio.com/items?itemN…

##Dot Env

不管是前端項目還是後端項目，大多都會使用.env 檔案來保存環境變數。 這款外掛程式可以對 .env 檔案進行高亮。

下載位址：marketplace.visualstudio.com/items?itemN…

##主題類別

#Dracula Official

---

德古拉的官方主題，最經典的主題之一，也是我的最愛。

下載網址：

marketplace.visualstudio.com/items?itemN…

##Material Theme

Material Theme 提供了Material 風格的主題，讓程式碼看起來更酷。

下載網址：

marketplace.visualstudio.com/items?itemN…

##One Dark Pro

如果你是Atom 的用戶，或是喜歡Atom 主題的開發者，可以嘗試這個主題外掛。

下載網址：

marketplace.visualstudio.com/items?itemN…

##vscode-icons

我們在瀏覽資料夾時，如果在文件前面有一個圖標，那麼會非常方便的區分它們。

VSCode Icons 這個外掛就是來做這件事兒的！ VSCode 預設的目錄結構長這樣：

使用VSCode Icons 後圖示變成這樣了：

#下載網址：

marketplace.visualstudio.com/items?itemN…

file-icons

另一款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

當我們同時執行多個VSCode 視窗時，我們可以為每個視窗設定不同的顏色，以此來區分不同的項目。

它預設支援的顏色有 Angular 紅、微軟藍、JS 黃、mandalorian 藍、Node 綠、React 藍等等。

#下載網址：

marketplace.visualstudio.com/items?itemN…

##Quokka.js

當我們想要快速驗證某段JS 或TS 程式碼時，可以使用這個外掛程式。

它提供了一個 playground，可以更好的驗證程式碼的邏輯。

下載連結：marketplace.visualstudio.com/items?itemN…

##rest-client

測試API 的方式很多，像是重量級的PostMan，輕量級的curl。但是它們在 VSCode 中使用起來都不是那麼方便。
REST Client 就是一個很好的插件，可以幫助我們在 VSCode 中輕鬆測試 API。

下載網址：marketplace.visualstudio.com/items?itemN…

##EditorConfig for VS Code

當我們的專案使用多個編輯器工具開發時，想要統一程式碼風格，就需要配置不同工具的設定檔。 這個工具可以讓我們只需要寫一個.editorconfig 就可以在所有編輯器中通用這些規則。

下載位址：

marketplace.visualstudio.com/items?itemN…

Git Lens

#雖然VSCode有內建的Git 功能，但還不夠強大。 ###Git Lens 增加了 Git 的功能，我們可以在每一行程式碼中查看提交訊息，它還可以比較不同的 commit 差異，以及一些其他有用的 Git 功能。 ###############下載網址：###marketplace.visualstudio.com/items?itemN…##############Open in GitHub# ########

可以快速在 Github 中開啟專案、檔案、Action、PR 等。

下載網址：marketplace.visualstudio.com/items?itemN…

##open in browser

支援快速在瀏覽器中開啟HTML 檔案。

在 HTML 檔案中右鍵，選單中會有兩個選項，或使用對應的快捷鍵。

下載位址：

marketplace.visualstudio.com/items?itemN…

##Live Server當我們修改html 的內容，想讓瀏覽器和程式碼保持一致時，就需要這個外掛。

它會在本地啟動一個伺服器，監聽檔案的改動，並刷新瀏覽器。

在 HTML 檔案中右鍵，選單中會有兩個選項，或使用對應的快捷鍵。

下載網址：

marketplace.visualstudio.com/items?itemN…

##Live Preview

它可以在VSCode 中即時預​​覽HTML。 但是它不支援 React、Angular 這類框架開發的應用。

下載位址：marketplace.visualstudio.com/items?itemN…

##Project Manager

當我們有多個項目時，可以透過這個外掛程式管理項目，快速切換項目、標籤等功能。

下載網址：

marketplace.visualstudio.com/items?itemN…

##Live Share

你想要將自己的程式碼分享給別人即時地協作編輯和調試？這個外掛程式可以將任何程式語言開發的專案或任何類型的專案與其他人共用。對方可以直接在你的環境下寫程式碼，不需要額外安裝任何環境或 SDK。 甚至可以直接在 Web 中協作編輯！

下載網址：

marketplace.visualstudio.com/items?itemN…

##Markdown PDF

雖然名字叫做markdown PDF，但其實可以將markdown 匯出為各種格式的檔案。 支援這麼多件匯出格式。

下載網址：
marketplace.visualstudio.com/items?itemN…

##Markdown Preview Github Styling

以Github 的樣式來預覽Markdown 檔案。

下載位址：

marketplace.visualstudio.com/items?itemN…

##總結

---

################### ######介紹了這麼多，快去打造最快速、最穩定、最適合你的IDE 吧！ ###如果這篇文章對你有幫助，歡迎按讚。 ###如果你有更多實用的，有價值的 VSCode 插件，也歡迎在評論區留言。 ######

更多關於VSCode的相關知識，請造訪：vscode教學！