Visual Studio Code （ VS Code ）是一個(gè)知名且評(píng)價(jià)很高的代碼編輯器，具有大量功能和擴(kuò)展以增強(qiáng)開發(fā)體驗(yàn)。使用 VS Code 的主要好處之一是它的靈活性，允許開發(fā)人員根據(jù)他們的特定需求對(duì)其進(jìn)行自定義。

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

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

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

01.GraphQL

GraphQL Visual Studio Code 擴(kuò)展，為您提供一組工具來幫助您編寫、驗(yàn)證和測(cè)試 GraphQL 代碼。

GraphQL 擴(kuò)展包括自動(dòng)完成功能——它會(huì)在您鍵入時(shí)建議在查詢中使用的字段和參數(shù)，從而更容易編寫有效的 GraphQL 代碼。此功能可為您節(jié)省時(shí)間并降低出現(xiàn)語法錯(cuò)誤的可能性。

它安裝了一個(gè)內(nèi)置的 linter，可以檢查您的代碼是否有錯(cuò)誤并提出修復(fù)建議。使用此擴(kuò)展可防止 GraphQL 錯(cuò)誤并提高效率。

02、Remote-SSH

您可以使用 VS Code 擴(kuò)展從內(nèi)部安全地連接到遠(yuǎn)程服務(wù)器，無需額外的軟件或終端窗口。

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

您可以在遠(yuǎn)程計(jì)算機(jī)上運(yùn)行命令、調(diào)試代碼，甚至使用擴(kuò)展，從而不受本地設(shè)置的限制，充分利用 Visual Studio Code 的功能。

Remote-SSH 是一個(gè)重要的 VS 代碼擴(kuò)展。嘗試使用 VS Code 擴(kuò)展來發(fā)現(xiàn)遠(yuǎn)程工作的強(qiáng)大功能和便利性。

03、Settings Sync

開發(fā)人員定期使用文本編輯器來創(chuàng)建 Web 應(yīng)用程序。跨多個(gè)設(shè)備手動(dòng)維護(hù)相同的設(shè)置是不方便的。手動(dòng)同步設(shè)置也可能很耗時(shí)，并且會(huì)在設(shè)備之間提供不一致的體驗(yàn)。

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

04、Auto Rename Tag

每當(dāng)您使用開始標(biāo)簽時(shí)，VS Code 會(huì)自動(dòng)突出顯示匹配標(biāo)簽并添加結(jié)束標(biāo)簽。自動(dòng)重命名標(biāo)簽擴(kuò)展重命名您在編碼時(shí)更改的標(biāo)簽。例如：

當(dāng)您重命名一個(gè) HTML/XML 標(biāo)簽時(shí)，該標(biāo)簽將自動(dòng)重命名所有成對(duì)的 HTML/XML 標(biāo)簽

您還可以在 Javascript 中使用自動(dòng)重命名標(biāo)簽擴(kuò)展功能——只需將文件類型保存為 .js。它會(huì)自動(dòng)與 javascript 標(biāo)簽配對(duì)并重命名。

此擴(kuò)展僅支持 HTML、XML、PHP 和 JavaScript。

05、Tabnine AI

Tabnine VS Code 擴(kuò)展是關(guān)于生產(chǎn)力的。它是一個(gè)人工智能代碼助手，可以加速您的開發(fā)過程，實(shí)時(shí)自動(dòng)完成您的代碼。它支持所有流行的編碼語言和 IDE。

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

06、CSS Peek

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

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

VS Code 擴(kuò)展為您的代碼片段著色

07、Bracket Pair Color DLW

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

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

08、VS Code Icons

盡管 Visual Studio Code 是一個(gè)功能強(qiáng)大的代碼編輯器，但它的默認(rèn)圖標(biāo)可能很無聊且沒有吸引力。這就是圖標(biāo)主題發(fā)揮作用的地方。

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

圖標(biāo)主題是更改 VS 代碼編輯器界面外觀和感覺的一種快速簡(jiǎn)便的方法，它們可以對(duì)你的整體體驗(yàn)產(chǎn)生重大影響。

09、Material Icon Theme

Material Icon Theme 是一種流行且廣泛使用的 VS Code 擴(kuò)展，可為您的代碼編輯器提供時(shí)尚現(xiàn)代的外觀。此擴(kuò)展替換了 VS Code 默認(rèn)材料設(shè)計(jì)圖標(biāo)，為您的界面提供干凈和專業(yè)的外觀。

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

10、Peacock

Peacock 是一個(gè) VS Code 擴(kuò)展，它為你的編碼體驗(yàn)增添了一抹色彩。此擴(kuò)展允許您根據(jù)文件類型、文件夾或工作區(qū)等條件對(duì)編輯器選項(xiàng)卡進(jìn)行顏色編碼。

孔雀的顯著特征之一是它的適應(yīng)性。您可以更改用于每個(gè)標(biāo)準(zhǔn)的顏色，甚至可以設(shè)計(jì)您自己的配色方案。這使您可以根據(jù)自己的喜好定制界面，并區(qū)分不同類型的文件和項(xiàng)目。

用于版本控制的 VS 代碼擴(kuò)展

11、Live Server

Live Server VS Code 擴(kuò)展可自動(dòng)重新加載您的網(wǎng)頁。它消除了手動(dòng)刷新頁面的需要。

您還可以指定自定義端口或主機(jī)名，這在處理多個(gè)項(xiàng)目或在團(tuán)隊(duì)環(huán)境中時(shí)很有用。Live Server 的另一個(gè)有用特性是它能夠在工作環(huán)境中的任何 HTML 文件或項(xiàng)目上運(yùn)行服務(wù)器。

12、Git History

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

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

13、Git Lens

Git Lens 擴(kuò)展幫助開發(fā)人員可視化、導(dǎo)航和理解他們項(xiàng)目的 Git 歷史。Git Lens，除其他外，添加了一個(gè)強(qiáng)大的拆分不同視圖，允許開發(fā)人員輕松可視化提交和分支之間的差異。

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

14、Docker Explorer

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

它可以從鏡像生成新容器，也可以從注冊(cè)表中推送和拉取鏡像?？偠灾?jiǎn)化了容器的創(chuàng)建和管理，使在實(shí)時(shí)環(huán)境中測(cè)試和部署代碼變得簡(jiǎn)單。

用于代碼格式化和 linting 的 VS 代碼擴(kuò)展

15、Prettier

Prettier 是最流行的格式化和 linting 工具，用于根據(jù)行業(yè)最佳實(shí)踐對(duì)代碼進(jìn)行標(biāo)準(zhǔn)化。它還可以確保您的團(tuán)隊(duì)生成視覺上無縫的代碼，因此無需再爭(zhēng)論要使用多少個(gè)制表符或空格，或者括號(hào)應(yīng)該放在哪里。

使用 Prettier visual studio 代碼擴(kuò)展使您的代碼看起來不錯(cuò)。

16、Beautify

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

17、Better Comments

Better Comments VS Code 擴(kuò)展可以根據(jù)評(píng)論的類型格式化評(píng)論。您可以使用不同風(fēng)格的評(píng)論，包括待辦事項(xiàng)、問題、提醒等。

此擴(kuò)展還允許您按重要性對(duì)評(píng)論進(jìn)行優(yōu)先排序，并具有強(qiáng)大的搜索功能，可讓您按關(guān)鍵字或類型快速找到特定評(píng)論。

18、ESLint

ESlint VS Code 擴(kuò)展會(huì)在錯(cuò)誤和潛在問題成為問題之前檢測(cè)到它們。它提供了一套強(qiáng)大的規(guī)則，可以根據(jù)您的特定要求進(jìn)行定制，允許您執(zhí)行自己的編碼約定。

它可以與其他流行的擴(kuò)展程序集成，例如 Prettier，它允許您根據(jù) linting 規(guī)則自動(dòng)格式化代碼。

19、MarkdownLint

MarkdownLint 擴(kuò)展是一個(gè)用戶友好的錯(cuò)誤警告和糾正工具?？梢酝ㄟ^單擊代碼編輯器中突出顯示的問題來訪問錯(cuò)誤詳細(xì)信息。

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

用于調(diào)試和故障排除的 VS 代碼擴(kuò)展

20、Javascript Debugger

Javascript 調(diào)試器擴(kuò)展在您的代碼中創(chuàng)建斷點(diǎn)和步驟。這允許編碼人員暫停代碼執(zhí)行并檢查變量和調(diào)用堆棧，從而使識(shí)別和修復(fù)錯(cuò)誤變得簡(jiǎn)單。

此 VS 代碼擴(kuò)展附帶一個(gè)交互式控制臺(tái)，使開發(fā)人員能夠?qū)崟r(shí)評(píng)估表達(dá)式、執(zhí)行代碼以及測(cè)試和調(diào)試代碼。它為所有類型的 JavaScript 項(xiàng)目提供全面的調(diào)試體驗(yàn)。

21、Code Spell Checker

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

22、Turbo Console Log

無需手動(dòng)添加日志語句即可調(diào)試您的代碼。Turbo Console Log 擴(kuò)展讓您只需單擊一下即可將控制臺(tái)日志語句添加到您的代碼中。

它有一個(gè)用于評(píng)估表達(dá)式和運(yùn)行代碼的交互式控制臺(tái)。它可以幫助開發(fā)人員實(shí)時(shí)測(cè)試和調(diào)試代碼。您還可以自定義日志語句的輸出，并通過突出顯示對(duì)象和變量來實(shí)現(xiàn)更具可讀性的格式。

23、Regex Previewer

Regex Previewer 為您的代碼提供正則表達(dá)式模式。這些模式是針對(duì)示例文本進(jìn)行測(cè)試的，該示例文本應(yīng)實(shí)時(shí)匹配您突出顯示的文本。有了它，您可以快速識(shí)別并更正正則表達(dá)式模式中的錯(cuò)誤。

此外，此擴(kuò)展包括有關(guān)正則表達(dá)式語法的大量文檔以及可以輕松復(fù)制并粘貼到您的代碼中的常見正則表達(dá)式模式庫。

用于 javascript、react、java、html 和 css 的 VS 代碼擴(kuò)展

24、JavaScript Code Snippets

你會(huì)經(jīng)常發(fā)現(xiàn)自己只是通過復(fù)制和粘貼來重用 Javascript 項(xiàng)目中的各種代碼塊。此任務(wù)可能會(huì)花費(fèi)很多時(shí)間，因此通過簡(jiǎn)單的鍵盤快捷鍵獲得大量不同的 JavaScript 代碼片段可以幫助您提高工作效率。

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

25、Reactjs Code Snippets

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

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

26、Java Language Support

Java Extension Pack 包括多個(gè)用于編碼輔助、調(diào)試、linting、格式化和測(cè)試的擴(kuò)展。

一些最受歡迎的擴(kuò)展是：

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

總體而言，Java 語言支持包使您的 Java 環(huán)境更加高效并簡(jiǎn)化了您的 Java 開發(fā)體驗(yàn)。

27、HTML CSS Support

HTML CSS 支持?jǐn)U展用于文本編輯器和集成開發(fā)環(huán)境 (IDE)，以增強(qiáng)對(duì) HTML 和 CSS 開發(fā)的支持。 

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

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

結(jié)論

Visual Studio Marketplace 中提供了大量擴(kuò)展，可幫助開發(fā)人員提高效率并提高工作效率。我們列出了可以對(duì)您的開發(fā)人員生活產(chǎn)生最大影響的頂級(jí) Visual Studio 代碼擴(kuò)展。試用它們并使用這些擴(kuò)展程序簡(jiǎn)化您的工作流程。