作者 Anupam Chugh 譯者彎月

出品 CSDN（ID：CSDNnews）

Visual Studio Code 是當(dāng)前最受歡迎的源代碼編輯器之一。VSCode 的流行得益于豐富的擴(kuò)展庫(kù)，使得第三方 API 的插入和使用變得更加容易。你甚至可以創(chuàng)建自己的 API 擴(kuò)展，并發(fā)布到 Visual Studio 市場(chǎng)。

2021 年，許多新出的 VS Code 擴(kuò)展廣受開(kāi)發(fā)人員的好評(píng)。在本文中，我們就來(lái)介紹一些我喜歡的擴(kuò)展。希望這些擴(kuò)展能夠幫助你提高生產(chǎn)力，并擴(kuò)展開(kāi)發(fā)人員的工作流程。

GitHub Copilot

首先來(lái)介紹一下 GitHub Copilot，這是一款由 GitHub 和 OpenAI 的 Codex 創(chuàng)建的 AI 程序員工具，可以根據(jù)你提供的上下文自動(dòng)生成代碼。

使用 VS Code 或 Jetbrains 的開(kāi)發(fā)人員非常喜歡這款工具，因?yàn)樗梢允褂么蠖鄶?shù)編程語(yǔ)言生成整塊的代碼。想了解更多信息？你可以在 IDE 中與 Copilot 直接對(duì)話。

首先，你需要下載 GitHub Copilot VS Code 擴(kuò)展（https://marketplace.visualstudio.com/items?itemName=GitHub.copilot），鏈接到 GitHub 賬號(hào)，并為該擴(kuò)展授權(quán)（如果尚未注冊(cè) Copilot，則需要加入候補(bǔ)名單）。

我使用 GitHub Copilot 測(cè)試了一些流行的 JavaScript 和 Swift 代碼片段，效果很好。你可以嘗試編寫(xiě)一個(gè)函數(shù)，或只需寫(xiě)一條注釋，Copilot 就會(huì)提供相應(yīng)的代碼。

你可以使用 Option + ] 和 Option + [ 切換建議的代碼，或者使用 Tab 接受完整的代碼。

Copilot 帶來(lái)了無(wú)限的可能性。我嘗試了使用 Copilot 快速創(chuàng)建了一系列的函數(shù)：檢查回文字符串、驗(yàn)證電子郵件、密碼以及利用 URL 獲取 JSON 。

你還可以詢問(wèn)“current price of Bitcoin and Ethereum”（比特幣和以太坊的當(dāng)前價(jià)格），Copilot 就可以立即生成所需的函數(shù)。Copilot 最棒的地方在于，它幾乎超越了所有其他代碼片段的 VS 代碼擴(kuò)展。

Thunder Client

API 測(cè)試是開(kāi)發(fā)人員日常工作的關(guān)鍵組成部分。如果想在將 API 端點(diǎn)集成到應(yīng)用程序之前，測(cè)試和驗(yàn)證 API 端點(diǎn)，則 Postman 是一款很趁手的工具。

但是，在 VS Code 中測(cè)試 API 需要頻繁切換思路（因?yàn)槟阋袚Q到別的應(yīng)用）。Thunder Client 為我們提供了一款輕量級(jí)、易用、整潔、簡(jiǎn)單的 Rest API 客戶端擴(kuò)展。

我們可以利用 Thunder Client 在編輯器內(nèi)快速測(cè)試代碼庫(kù)的 API 端點(diǎn)，從而最大限度地減少頁(yè)面的切換。它可以替代 Postman，作為常用的無(wú)腳本測(cè)試工具。

Snipped

我們都喜歡在社交媒體上分享日常工作中的代碼片段。通常，我們需要將代碼片段復(fù)制粘貼到 carbon.now.sh 中，然后導(dǎo)出屏幕截圖。

Snipped 可以直接在從 VS Code 編輯器自動(dòng)為我們完成這項(xiàng)任務(wù)。讓我們告別在推特中復(fù)制粘貼代碼，將代碼截圖直接保存到剪貼板中。

Lorem.space

如果你想快速創(chuàng)建一個(gè)包含虛擬內(nèi)容的 Web 應(yīng)用程序原型，則 Lorem.space 是理想的 VS Code 擴(kuò)展。

Lorem.space 是一個(gè)隨機(jī)圖像占位符生成器 API，提供不同的類別可供選擇。

你只需按下 CMD + Shift + P ，從下拉菜單中選擇 Lorem.space，選擇合適的類別（披薩、漢堡、人像或家具等），輸入所需的寬度和高度，lorem.space 就會(huì)自動(dòng)生成圖像占位符的 URL。

面向 JavaScript 和 TypeScript 的 AI Doc Writer

軟件開(kāi)發(fā)人員對(duì)編寫(xiě)文檔往往有不同的看法。有些人很喜歡文檔，而有些人則認(rèn)為編寫(xiě)文檔是浪費(fèi)時(shí)間。

Mintlify 即將推出一款 VS Code 擴(kuò)展 AI Doc Writer，這款工具的目標(biāo)是利用工具編寫(xiě)文檔。

只需選中代碼的某個(gè)函數(shù)并按 Command +，AI Doc Writer 就可以生成該函數(shù)的文檔。我測(cè)試了一個(gè)函數(shù)，效果還不錯(cuò)。

如上所示，選不選函數(shù)中的空白，會(huì)生成截然不同的文檔。

需要源代碼的搜索引擎嗎？Mintlify Search Engine 是同一團(tuán)隊(duì)開(kāi)發(fā)的另一款 VS Code 擴(kuò)展。你可以用自然語(yǔ)言編寫(xiě)搜索查詢來(lái)查找代碼片段。此外，你還可以詢問(wèn)特定代碼的功能。現(xiàn)階段，該擴(kuò)展還處于小范圍測(cè)試階段。

Blockman

你想高亮顯示代碼的作用域嗎？這樣就可以更輕松地閱讀當(dāng)前代碼塊。有時(shí)在向同事解釋不同的控制流時(shí)，高亮顯示尤其有幫助。

不用擔(dān)心，VS Code 擴(kuò)展 Blockman 正如其名所示：將代碼顯示成方塊。

Blockman 允許你修改代碼塊的顯示顏色和深度、切換焦點(diǎn)，還有其他自定義。

在選中的框內(nèi)高亮顯示嵌套的代碼塊非常容易。如下展示了利用這款工具顯示一層層的縮進(jìn)：

Live Frame

LiveFrame 也是一款可以在編輯器內(nèi)運(yùn)行和預(yù)覽 Web 應(yīng)用程序的 VS Code 擴(kuò)展?？梢詭椭覀儨p少在 VS Code 和瀏覽器之間頻繁地切換。

除了提高生產(chǎn)力之外，Live Frame 擴(kuò)展還可用于錄制或展示交互式演示教程。

參考鏈接：

https://betterprogramming.pub/new-vs-code-extensions-released-2021-ee34a0b3a03f

版權(quán)聲明：本文為 CSDN 博主「CSDN 資訊」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/csdnnews/article/details/122846005