Visual Studio Code （ VS Code ）是一個知名且評價很高的代碼編輯器，具有大量功能和擴展以增強開發體驗。使用 VS Code 的主要好處之一是它的靈活性，允許開發人員根據他們的特定需求對其進行自定義。

此外，VS Code 輕巧且快速，使其成為從事大型項目或資源有限的開發人員的絕佳選擇。它帶有調試工具、終端和 Git 集成，使其成為開發人員的一體化解決方案。

不僅如此，Visual Studio Marketplace 中還提供了許多 VS Code 擴展，這使其成為開發人員社區中領先的 IDE。這些擴展可以幫助開發人員交付整潔且無錯誤的代碼，從而輕松地讓他們過上幸福的生活。

在今天的文章中，我將與你分享一些我認為很實用的頂級 Visual Studio 代碼擴展工具，希望能夠幫助到您。

01.GraphQL

GraphQL Visual Studio Code 擴展，為您提供一組工具來幫助您編寫、驗證和測試 GraphQL 代碼。

GraphQL 擴展包括自動完成功能——它會在您鍵入時建議在查詢中使用的字段和參數，從而更容易編寫有效的 GraphQL 代碼。此功能可為您節省時間并降低出現語法錯誤的可能性。

它安裝了一個內置的 linter，可以檢查您的代碼是否有錯誤并提出修復建議。使用此擴展可防止 GraphQL 錯誤并提高效率。

02、Remote-SSH

您可以使用 VS Code 擴展從內部安全地連接到遠程服務器，無需額外的軟件或終端窗口。

Remote-SSH 允許您在熟悉的 Visual Studio Code 界面中輕松訪問、編輯和傳輸文件到遠程服務器或從遠程服務器傳輸文件。您可以使用它來提高您的整體生產力，而不是簡化您的工作流程。

您可以在遠程計算機上運行命令、調試代碼，甚至使用擴展，從而不受本地設置的限制，充分利用 Visual Studio Code 的功能。

Remote-SSH 是一個重要的 VS 代碼擴展。嘗試使用 VS Code 擴展來發現遠程工作的強大功能和便利性。

03、Settings Sync

開發人員定期使用文本編輯器來創建 Web 應用程序。跨多個設備手動維護相同的設置是不方便的。手動同步設置也可能很耗時，并且會在設備之間提供不一致的體驗。

使用 Settings Sync VS Code 擴展，您可以輕松地跨多個設備同步設置，減少配置時間，甚至與他人共享設置。

04、Auto Rename Tag

每當您使用開始標簽時，VS Code 會自動突出顯示匹配標簽并添加結束標簽。自動重命名標簽擴展重命名您在編碼時更改的標簽。例如：

當您重命名一個 HTML/XML 標簽時，該標簽將自動重命名所有成對的 HTML/XML 標簽

您還可以在 Javascript 中使用自動重命名標簽擴展功能——只需將文件類型保存為 .js。它會自動與 javascript 標簽配對并重命名。

此擴展僅支持 HTML、XML、PHP 和 JavaScript。

05、Tabnine AI

Tabnine VS Code 擴展是關于生產力的。它是一個人工智能代碼助手，可以加速您的開發過程，實時自動完成您的代碼。它支持所有流行的編碼語言和 IDE。

Tabnine 具有類似于 IntelliSense 的 AI 輔助代碼完成功能。此擴展可以根據上下文和語法預測和建議您的下一行代碼，從而幫助您更快地編寫代碼。

06、CSS Peek

使用 CSS Peek VS Code 擴展，您只需將鼠標懸停在 HTML 元素上即可顯示一個顯示應用于該元素的 CSS 樣式的查看窗口。然后，您可以通過單擊查看窗口跳轉到 CSS 代碼，從而輕松編輯樣式。此功能使您免于每次都手動搜索 CSS 代碼的麻煩。

CSS Peek 還支持 SCSS、Less 和 Sass 等 CSS 預處理器，因此您可以將它用于所有項目，而無需考慮預處理器。

VS Code 擴展為您的代碼片段著色

07、Bracket Pair Color DLW

Bracket Pair Color DLW VS Code 擴展，自動為某些字符著色，以幫助開發人員確定一段代碼的嵌套深度。

它支持多種語言，并允許開發人員定義他們計劃在代碼中使用的不同括號的顏色。默認情況下，()、{} 和 [] 是匹配的，但可以使用他們喜歡的其他括號字符，甚至可以定義它們的顏色。有了這個擴展，可以輕松找到左括號和右括號，并更清楚地了解您的代碼結構。

08、VS Code Icons

盡管 Visual Studio Code 是一個功能強大的代碼編輯器，但它的默認圖標可能很無聊且沒有吸引力。這就是圖標主題發揮作用的地方。

VS Code Icons 擴展將通過將文件識別為 React、Javascript、HTML、CSS 等來幫助您查看文件類型。

圖標主題是更改 VS 代碼編輯器界面外觀和感覺的一種快速簡便的方法，它們可以對你的整體體驗產生重大影響。

09、Material Icon Theme

Material Icon Theme 是一種流行且廣泛使用的 VS Code 擴展，可為您的代碼編輯器提供時尚現代的外觀。此擴展替換了 VS Code 默認材料設計圖標，為您的界面提供干凈和專業的外觀。

它包括多種圖標樣式，包括彩色、單色和輪廓圖標。這意味著您可以選擇最能滿足您的需求和喜好的款式。您可以確信，您的所有編碼需求都通過一組廣泛的文件夾和文件圖標進行了直觀分類，使您可以輕松快速地訪問所需內容。

10、Peacock

Peacock 是一個 VS Code 擴展，它為你的編碼體驗增添了一抹色彩。此擴展允許您根據文件類型、文件夾或工作區等條件對編輯器選項卡進行顏色編碼。

孔雀的顯著特征之一是它的適應性。您可以更改用于每個標準的顏色，甚至可以設計您自己的配色方案。這使您可以根據自己的喜好定制界面，并區分不同類型的文件和項目。

用于版本控制的 VS 代碼擴展

11、Live Server

Live Server VS Code 擴展可自動重新加載您的網頁。它消除了手動刷新頁面的需要。

您還可以指定自定義端口或主機名，這在處理多個項目或在團隊環境中時很有用。Live Server 的另一個有用特性是它能夠在工作環境中的任何 HTML 文件或項目上運行服務器。

12、Git History

Git History 擴展以樹狀視圖顯示提交歷史記錄，使編碼人員可以輕松了解代碼中所做更改的進度。此視圖使瀏覽不同的提交并找到您正在尋找的更改變得簡單。

這個 VS Code 擴展還包括一個強大的搜索功能，允許您通過消息、作者或哈希快速找到特定的提交。它還可以比較提交，從而輕松查看不同版本代碼之間的差異。

13、Git Lens

Git Lens 擴展幫助開發人員可視化、導航和理解他們項目的 Git 歷史。Git Lens，除其他外，添加了一個強大的拆分不同視圖，允許開發人員輕松可視化提交和分支之間的差異。

它允許開發人員按作者、文件、提交消息和其他條件搜索項目的提交歷史。

14、Docker Explorer

Docker Explorer VS Code Extension 可以識別和管理當前正在運行的容器和鏡像。它使開發人員可以輕松啟動、停止和重新啟動容器、檢查日志和屬性，甚至可以通過名稱或 ID 定位特定容器或映像。

它可以從鏡像生成新容器，也可以從注冊表中推送和拉取鏡像。總而言之，它簡化了容器的創建和管理，使在實時環境中測試和部署代碼變得簡單。

用于代碼格式化和 linting 的 VS 代碼擴展

15、Prettier

Prettier 是最流行的格式化和 linting 工具，用于根據行業最佳實踐對代碼進行標準化。它還可以確保您的團隊生成視覺上無縫的代碼，因此無需再爭論要使用多少個制表符或空格，或者括號應該放在哪里。

使用 Prettier visual studio 代碼擴展使您的代碼看起來不錯。

16、Beautify

Beautify 是擁有 700 萬次安裝量的 Prettier 擴展的替代品。Beautify 是另一個可靠的代碼“美化器”，它通過最小化代碼中的干預來檢查和格式化您的代碼。您可以使用它來格式化以任何語言輕松編寫的代碼。

17、Better Comments

Better Comments VS Code 擴展可以根據評論的類型格式化評論。您可以使用不同風格的評論，包括待辦事項、問題、提醒等。

此擴展還允許您按重要性對評論進行優先排序，并具有強大的搜索功能，可讓您按關鍵字或類型快速找到特定評論。

18、ESLint

ESlint VS Code 擴展會在錯誤和潛在問題成為問題之前檢測到它們。它提供了一套強大的規則，可以根據您的特定要求進行定制，允許您執行自己的編碼約定。

它可以與其他流行的擴展程序集成，例如 Prettier，它允許您根據 linting 規則自動格式化代碼。

19、MarkdownLint

MarkdownLint 擴展是一個用戶友好的錯誤警告和糾正工具。可以通過單擊代碼編輯器中突出顯示的問題來訪問錯誤詳細信息。

MarkdownLint 還集成了其他流行的擴展程序，例如拼寫檢查器，允許您自動檢查 markdown 文件中的拼寫錯誤。

用于調試和故障排除的 VS 代碼擴展

20、Javascript Debugger

Javascript 調試器擴展在您的代碼中創建斷點和步驟。這允許編碼人員暫停代碼執行并檢查變量和調用堆棧，從而使識別和修復錯誤變得簡單。

此 VS 代碼擴展附帶一個交互式控制臺，使開發人員能夠實時評估表達式、執行代碼以及測試和調試代碼。它為所有類型的 JavaScript 項目提供全面的調試體驗。

21、Code Spell Checker

使用代碼拼寫檢查器 VS 代碼擴展避免拼寫錯誤。它只是在您鍵入時突出顯示任何拼寫錯誤。它有一個易于使用的錯誤修復界面，可以通過右鍵單擊代碼編輯器中突出顯示的問題來訪問該界面。它檢查多種語言，使您能夠確保您的代碼在任何語言中都沒有錯誤。

22、Turbo Console Log

無需手動添加日志語句即可調試您的代碼。Turbo Console Log 擴展讓您只需單擊一下即可將控制臺日志語句添加到您的代碼中。

它有一個用于評估表達式和運行代碼的交互式控制臺。它可以幫助開發人員實時測試和調試代碼。您還可以自定義日志語句的輸出，并通過突出顯示對象和變量來實現更具可讀性的格式。

23、Regex Previewer

Regex Previewer 為您的代碼提供正則表達式模式。這些模式是針對示例文本進行測試的，該示例文本應實時匹配您突出顯示的文本。有了它，您可以快速識別并更正正則表達式模式中的錯誤。

此外，此擴展包括有關正則表達式語法的大量文檔以及可以輕松復制并粘貼到您的代碼中的常見正則表達式模式庫。

用于 javascript、react、java、html 和 css 的 VS 代碼擴展

24、JavaScript Code Snippets

你會經常發現自己只是通過復制和粘貼來重用 Javascript 項目中的各種代碼塊。此任務可能會花費很多時間，因此通過簡單的鍵盤快捷鍵獲得大量不同的 JavaScript 代碼片段可以幫助您提高工作效率。

JavaScript 代碼片段是預構建的代碼片段，您可以輕松地將其包含在代碼中。它還支持特定的 JavaScript 庫和框架，例如 Angular、Vue.js 和 Node.js。

25、Reactjs Code Snippets

通過提供整齊打包和預先編寫的模板，Reactjs Code Snippets VS 代碼擴展幫助開發人員改進他們的工作流程和代碼速度。您只需鍵入觸發命令即可獲取所需的代碼段。

您可以使用此工具來最大程度地減少編碼時間并專注于您最擅長的事情——解決現實世界中的問題。

26、Java Language Support

Java Extension Pack 包括多個用于編碼輔助、調試、linting、格式化和測試的擴展。

一些最受歡迎的擴展是：

• Java 開發工具包 (JDK) 11 或更高版本：您需要 JDK 來構建和運行 Java 應用程序。它提供完整的語言支持，包括語法突出顯示、代碼完成和調試等功能。
• IntelliCode Java Test Runner：這個擴展使得在項目中運行和調試單元測試變得容易。它與流行的測試框架（如 JUnit、TestNG 等）集成，以提供無縫的測試體驗。
• Java 調試器：此擴展具有豐富的功能，使您能夠設置斷點、檢查變量、逐步執行代碼以及更多選項，以便于調試。
• Red Hat 對 Java 的語言支持：它有助于維護穩定和安全的 Java 開發平臺，以及有助于構建、部署和管理 Java 應用程序的工具。

總體而言，Java 語言支持包使您的 Java 環境更加高效并簡化了您的 Java 開發體驗。

27、HTML CSS Support

HTML CSS 支持擴展用于文本編輯器和集成開發環境 (IDE)，以增強對 HTML 和 CSS 開發的支持。 

它還提供了額外的功能，包括：

• 用于 HTML 和 CSS 的 IntelliSense：這是一種代碼完成功能，可在編寫代碼時建議 HTML 標記、屬性、CSS 屬性、值和單位。
• Emmet 支持：它為 HTML 和 CSS 生成速記符號，以幫助您編寫簡潔的語法并將其擴展為完整的 HTML 或 CSS 代碼，只需敲擊幾下。
• CSS 類名補全功能：自動補全 HTML 文檔中的 CSS 類名。
• HTML 和 CSS 格式化和 linting 選項：一個必須的工具來格式化和構建 HTML 和 CSS 代碼以提高可讀性。
• 內置 CSS 顏色預覽器：如果您在復雜的配色方案中苦苦掙扎，或者在微調網站顏色時感到迷茫，這個功能可以幫上忙。它在您的 CSS 顏色代碼中顯示顏色預覽。

結論

Visual Studio Marketplace 中提供了大量擴展，可幫助開發人員提高效率并提高工作效率。我們列出了可以對您的開發人員生活產生最大影響的頂級 Visual Studio 代碼擴展。試用它們并使用這些擴展程序簡化您的工作流程。