Visual Studio Code 的外掛對於在提升程式設計效率和加快工作速度非常重要。這裡有 30 個最受歡迎的 VSCode 外掛，它們將使你成為更高效的搬磚摸魚大師。這些外掛主要適用於前端開發人員，但也有一些通用外掛也可以適用於任何開發環境。以下是我將介紹的 VSCode 外掛：

Settings Sync

Settings Sync 可為你節省大量跨裝置安裝外掛的時間

在開始左右安裝外掛之前，最好知道Settings Sync的存在。它允許你將在 VSCode 上自定義的幾乎所有內容同步到 Github，從設定到鍵盤快捷鍵到其他 VSCode 外掛。

這樣，你就可以從任何你想要的裝置訪問你喜歡的 IDE，而不必在新裝置上從普通
VSCode 環境中進行程式設計，也不必再次手動設定所有內容。

Live Server

立即檢視瀏覽器中反映的程式碼更改

這是我最喜歡的外掛之一。Live Server啟動本地開發伺服器，併為靜態和動態頁面提供實時重新載入功能。

每次儲存程式碼時，你都會立即看到瀏覽器中反映的更改。你會更快地發現錯誤，並且可以更輕鬆地對你的程式碼進行一些快速實驗。

Tabnine

Tabnine 是一款廣受歡迎的 VSCode 人工智慧助手，適用於所有主要程式語言，因此毫無疑問，無論你的技能如何，你都會發現它很有用。

通過研究公開共享的程式碼庫，Tabnine 使用深度學習演算法來預測你的需求，並提供一鍵程式碼完成功能，讓你可以快速高效地完成專案。對於新手編碼員來說，這讓學習變得輕而易舉，因為它為你提供了發揮想法的空間，而無需記住編碼語法或搜尋 StackOverflow。

而且，如果你是一位經驗豐富的開發人員，那麼你會發現 Tabnine 為你提供了執行所需的構建塊，從而為你的工作節省了大量時間。

Remote SSH

使用任何帶有 SSH 伺服器的遠端機器，該SSH外掛可以讓你使用任何遠端計算機與 SSH 伺服器作為開發環境。這使得在各種場景中開發和或故障排除變得更加容易。

你也不需要本地機器上的任何原始碼，因為外掛直接在遠端機器上執行命令和其他外掛。

Prettier

花更少的時間格式化程式碼

Prettier是一個自以為是的程式碼格式化程式，如果你有多人在一個專案上工作，它會特別有效，因為該外掛強制執行一致的樣式。

你可以對其進行設定，以便在每次儲存程式碼時格式化你的程式碼，從而顯著減少你花在格式化程式碼上的時間。

Bracket Pair Colorizer

每個人都喜歡對程式碼著色，Bracket Pair Colorizer提供了匹配顏色的左括號和右括號，從而更容易知道哪些括號屬於誰。

還可以配置自定義括號字元，你也可以為活動範圍新增背景顏色。

Auto Rename Tag

自動重新命名標籤，雖然 VSCode 固有地突出顯示匹配的標籤並在你鍵入開始標籤時立即新增結束標籤，但自動重新命名標籤外掛會自動重新命名你更改的標籤。

該外掛適用於 HTML、XML、PHP 和 JavaScript，無需更改標籤名稱兩次。

GitLens

增強你的 Git 能力GitLens 增強了Visual Studio Code 的 Git 功能。這是一個強大的外掛，可讓你檢視程式碼行隨時間變化的人、原因和方式以及許多其他功能。

GitLens 是一個高度可定製的外掛。如果你不喜歡某個特定設定，你可以在設定中輕鬆將其關閉。

Git History

獲得 git 日誌，並顯示漂亮的視覺效果

與 GitLens 類似，Git History是一個 VSCode 外掛，它提供了 git 日誌的視覺化。你不需要再終端中檢視 git log。

外掛也非常全面。它允許你跨提交比較分支、提交和檔案。也可以查 Github 頭像，挺整潔的。

Vue 3 Support - All In One

這是一款在 Vue 2 或者 Vue 3 開發中提供程式碼片段，語法高亮和格式化的 VSCode 外掛，能極大提高你的開發效率。你可以在 VSCode 編輯器底部欄右下角開啟 Auto Format Vue 開關，它可能幫你在程式碼儲存的時候自動格式化 vue 檔案的格式，預設是關閉狀態。

如果你不想自動格式化 vue 檔案，你也可以在 vue 檔案中點選滑鼠右鍵，在出現的選單欄中選擇 Format Document 選單項，則檔案會執行一次格式化。

CSS Peek

外掛你的 HTML 檔案以檢視你的 CSS 程式碼

這個外掛對於前端開發人員來說是無價的。受 IDE Brackets 中類似功能的啟發，CSS Peek允許你外掛 HTML 和 ejs 檔案以在原始碼中顯示 CSS/SCSS/LESS 程式碼。

如果你知道類或 ID 名稱，它還允許你快速跳轉到對應 CSS 程式碼的位置。

Javascript Code Snippets

提供很多 JS 程式碼塊提示，雖然 VSCode 包括內建的 JS IntelliSense，但JS 程式碼片段外掛通過新增大量匯入、匯出觸發器、類助手和方法觸發器來增強這種體驗。

該外掛支援 JS、TypeScript、JS React、TS React、HTML 和 Vue。在 VSCode Marketplace 中，也可以輕鬆獲得其他風格（例如 Angular）的程式碼片段。

HTML/CSS/JavaScript Snippets

只需輸入字首名稱，就會自動完成完整的程式碼片段。

Search/Translate Hero - Google/Translate/Bing/Baidu/Wiki/Yahoo/Github/Npm Engine

一款讓您在程式碼中進行搜尋或者翻譯的 VSCode 外掛。你可以在編輯器中，選中程式碼中對應的關鍵詞，然後點選滑鼠右鍵，在出現的選單皮膚中選擇 Search Online 選單項，外掛會自動幫你開啟預設瀏覽器，並搜尋對應的關鍵詞和顯示搜尋結果。

你還可以選中對應的關鍵詞後，使用快捷鍵去開啟瀏覽器進行搜尋。

Peacock

更改 VSCode 例項的顏色，非常實用。Peacock允許你更改 Visual Studio Code 環境的顏色，因此你可以快速識別剛剛切換到的例項。

Colorize

檢視你在風格指南中使用的顏色，使用Colorize立即將 CSS/SASS/Less/... 檔案中的 CSS 顏色視覺化。這使得一目瞭然地看到你在何處使用了哪些顏色變得非常容易。

Code Spell Checker

讓你程式碼不再有拼寫錯誤，雖然拼寫錯誤不是致命問題，但我更喜歡我的程式碼沒有拼寫錯誤。程式碼拼寫檢查器外掛在其字典檔案中無法識別的單詞下劃線。

該外掛有許多不同的語言版本，並支援醫學術語等行話。

Debugger For Chrome

在 VSCode 中除錯你的 JS 程式碼，由 Microsoft 開發的Debugger for Chrome允許你在 VSCode 中除錯你的 JS 程式碼。與其他 IDE 中的偵錯程式相反，它非常流暢。

你可以設定斷點、逐步執行程式碼、除錯動態新增的指令碼等等。

Icon Fonts

提供各種圖示供你使用！Icon Fonts提供了各種圖示字型的片段，包括流行的 Font Awesome v5 圖示包。

對於那些不使用 VSCode 的人，這個包也可用於 Atom 和 Sublime Text。

Turbo Console Log

自動建立有意義的日誌訊息，該控制檯顯示日誌\外掛自動建立一個有意義的日誌資訊的過程。它使除錯更容易，因為你將有一些有用的控制檯輸出來找出問題所在。

Todo Highlight

立即發現程式碼中的 TODO，很多程式設計師習慣在程式碼中寫 TODO，然後完全忘記它們。Todo Highlight使它們更加突出。

你可以切換突出顯示，也可以列出所有突出顯示的註釋並從相應的檔案中顯示它們。

VSCode Icons

等等，不是每個人都喜歡圖示嗎？你不會認為圖示有很大的不同，但它們確實有至少對我來說。VSCode Icons為你的 IDE 增添了一抹色彩和可愛的小圖示，我已經愛上了它。

Regex Previewer

建立正規表示式的預覽，正規表示式可能是一個很困難的難題。Regex Previewer為你提供與你的正規表示式匹配的輔助文件。

該外掛提供了多個示例進行匹配，因此為各種用例快速準確地編寫正規表示式變得更加容易。

Bookmarks

為你的程式碼新增書籤，儘管 VSCode 有行號，但Bookmarks允許你在程式碼中新增書籤，幫助你快速導航並輕鬆來回跳轉。

Import Cost

當你開發 Web 應用程式或網站時，很容易製作一些臃腫的東西——尤其是作為一個新手開發者。這其中的一個重要因素是，許多開發人員在通過程式碼匯入時並不總是知道包有多大。

Import Cost 是一個 VSCode 擴充套件，可以內聯顯示匯入包的大小，因此你可以確切地知道在開發過程中匯入該包的成本是多少。因此，它將幫助你更好地優化你的應用程式和網站，特別是對於通常因膨脹而遭受更多痛苦的移動使用者。

Quokka

如果你選擇的語言是 JavaScript 或 TypeScript，那麼你一定會喜歡 Quokka.js。此擴充套件旨在通過在編寫程式碼時在 IDE 中顯示執行時值來加快開發速度，因此你可以專注於編寫程式碼，而不是僅僅為了嘗試新事物而構建自定義配置。

這是一個簡單、輕量級的擴充套件，非常適合經驗豐富的開發人員和新手。它也可以免費供社群使用，但如果你是 JavaScript/TypeScript 專家，你還可以購買 Pro 許可證，讓你無需更改程式碼即可修改執行時值。

ESLint

如果你需要格式化程式和規範程式碼，那麼這個外掛適合你。
它可以自動格式化你的程式碼並查詢程式碼中的錯誤。

此外，它允許你在書籤程式碼之間選擇程式碼區域，這對於日誌檔案分析等非常有用。

Visual Studio IntelliCode

它旨在幫助開發人員和程式設計師提供智慧程式碼完成建議。
它預設支援 Python、TypeScript/JavaScript、React 和 Java。

SQLTools — Database tools

通過 VSCode 管理資料庫的工具。
它支援許多驅動程式，你可以使用它來做很多事情，例如連線資源管理器、查詢執行程式、智慧感知、書籤、查詢歷史記錄。

Better Comments

Better Comments 擴充套件將幫助你在程式碼中建立更人性化的註釋。
每種顏色都可以作為表示評論型別（注意、待辦事項等）的一種方式。

最後

這是我個人介紹的 30 個 VSCode 外掛，可在不影響質量的情況下提高你的程式設計效率。，如果文章和筆記能帶您一絲幫助或者啟發，請不要吝嗇你的贊和收藏，文章同步持續更新，往期文章也收錄在 https://github.com/Wscats/CV
歡迎您的關注和交流，你的肯定是我前進的最大動力 ?

30 個極大提高開發效率超級實用的 VSCode 外掛