7 個(gè)不(bù)容錯過的(de) VS Code 擴展

2022-02-10

作者 Anupam Chugh 譯者彎月

出(chū)品 CSDN（ID：CSDNnews）

Visual Studio Code 是(shì)當前最受歡迎的(de)源代碼編輯器之(zhī)一(yī / yì ／yí)。VSCode 的(de)流行得益于(yú)豐富的(de)擴展庫，使得第三方 API 的(de)插入和(hé / huò)使用變得更加容易。你甚至可以(yǐ)創建自己的(de) API 擴展，并發布到(dào) Visual Studio 市場。

2021 年，許多新出(chū)的(de) VS Code 擴展廣受開發人(rén)員的(de)好評。在(zài)本文中，我們就(jiù)來(lái)介紹一(yī / yì ／yí)些我喜歡的(de)擴展。希望這(zhè)些擴展能夠幫助你提高生産力，并擴展開發人(rén)員的(de)工作流程。

GitHub Copilot

首先來(lái)介紹一(yī / yì ／yí)下 GitHub Copilot，這(zhè)是(shì)一(yī / yì ／yí)款由 GitHub 和(hé / huò) OpenAI 的(de) Codex 創建的(de) AI 程序員工具，可以(yǐ)根據你提供的(de)上(shàng)下文自動生成代碼。

使用 VS Code 或 Jetbrains 的(de)開發人(rén)員非常喜歡這(zhè)款工具，因爲(wéi / wèi)它可以(yǐ)使用大(dà)多數編程語言生成整塊的(de)代碼。想了(le／liǎo)解更多信息？你可以(yǐ)在(zài) IDE 中與 Copilot 直接對話。

首先，你需要(yào / yāo)下載 GitHub Copilot VS Code 擴展（https://marketplace.visualstudio.com/items?itemName=GitHub.copilot），鏈接到(dào) GitHub 賬号，并爲(wéi / wèi)該擴展授權（如果尚未注冊 Copilot，則需要(yào / yāo)加入候補名單）。

我使用 GitHub Copilot 測試了(le／liǎo)一(yī / yì ／yí)些流行的(de) JavaScript 和(hé / huò) Swift 代碼片段，效果很好。你可以(yǐ)嘗試編寫一(yī / yì ／yí)個(gè)函數，或隻需寫一(yī / yì ／yí)條注釋，Copilot 就(jiù)會提供相應的(de)代碼。

你可以(yǐ)使用 Option + ] 和(hé / huò) Option + [ 切換建議的(de)代碼，或者使用 Tab 接受完整的(de)代碼。

Copilot 帶來(lái)了(le／liǎo)無限的(de)可能性。我嘗試了(le／liǎo)使用 Copilot 快速創建了(le／liǎo)一(yī / yì ／yí)系列的(de)函數：檢查回文字符串、驗證電子(zǐ)郵件、密碼以(yǐ)及利用 URL 獲取 JSON 。

你還可以(yǐ)詢問“current price of Bitcoin and Ethereum”（比特币和(hé / huò)以(yǐ)太坊的(de)當前價格），Copilot 就(jiù)可以(yǐ)立即生成所需的(de)函數。Copilot 最棒的(de)地(dì / de)方在(zài)于(yú)，它幾乎超越了(le／liǎo)所有其他(tā)代碼片段的(de) VS 代碼擴展。

Thunder Client

API 測試是(shì)開發人(rén)員日常工作的(de)關鍵組成部分。如果想在(zài)将 API 端點集成到(dào)應用程序之(zhī)前，測試和(hé / huò)驗證 API 端點，則 Postman 是(shì)一(yī / yì ／yí)款很趁手的(de)工具。

但是(shì)，在(zài) VS Code 中測試 API 需要(yào / yāo)頻繁切換思路（因爲(wéi / wèi)你要(yào / yāo)切換到(dào)别的(de)應用）。Thunder Client 爲(wéi / wèi)我們提供了(le／liǎo)一(yī / yì ／yí)款輕量級、易用、整潔、簡單的(de) Rest API 客戶端擴展。

我們可以(yǐ)利用 Thunder Client 在(zài)編輯器内快速測試代碼庫的(de) API 端點，從而(ér)最大(dà)限度地(dì / de)減少頁面的(de)切換。它可以(yǐ)替代 Postman，作爲(wéi / wèi)常用的(de)無腳本測試工具。

Snipped

我們都喜歡在(zài)社交媒體上(shàng)分享日常工作中的(de)代碼片段。通常，我們需要(yào / yāo)将代碼片段複制粘貼到(dào) carbon.now.sh 中，然後導出(chū)屏幕截圖。

Snipped 可以(yǐ)直接在(zài)從 VS Code 編輯器自動爲(wéi / wèi)我們完成這(zhè)項任務。讓我們告别在(zài)推特中複制粘貼代碼，将代碼截圖直接保存到(dào)剪貼闆中。

Lorem.space

如果你想快速創建一(yī / yì ／yí)個(gè)包含虛拟内容的(de) Web 應用程序原型，則 Lorem.space 是(shì)理想的(de) VS Code 擴展。

Lorem.space 是(shì)一(yī / yì ／yí)個(gè)随機圖像占位符生成器 API，提供不(bù)同的(de)類别可供選擇。

你隻需按下 CMD + Shift + P ，從下拉菜單中選擇 Lorem.space，選擇合适的(de)類别（披薩、漢堡、人(rén)像或家具等），輸入所需的(de)寬度和(hé / huò)高度，lorem.space 就(jiù)會自動生成圖像占位符的(de) URL。

面向 JavaScript 和(hé / huò) TypeScript 的(de) AI Doc Writer

軟件開發人(rén)員對編寫文檔往往有不(bù)同的(de)看法。有些人(rén)很喜歡文檔，而(ér)有些人(rén)則認爲(wéi / wèi)編寫文檔是(shì)浪費時(shí)間。

Mintlify 即将推出(chū)一(yī / yì ／yí)款 VS Code 擴展 AI Doc Writer，這(zhè)款工具的(de)目标是(shì)利用工具編寫文檔。

隻需選中代碼的(de)某個(gè)函數并按 Command +，AI Doc Writer 就(jiù)可以(yǐ)生成該函數的(de)文檔。我測試了(le／liǎo)一(yī / yì ／yí)個(gè)函數，效果還不(bù)錯。

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

需要(yào / yāo)源代碼的(de)搜索引擎嗎？Mintlify Search Engine 是(shì)同一(yī / yì ／yí)團隊開發的(de)另一(yī / yì ／yí)款 VS Code 擴展。你可以(yǐ)用自然語言編寫搜索查詢來(lái)查找代碼片段。此外，你還可以(yǐ)詢問特定代碼的(de)功能。現階段，該擴展還處于(yú)小範圍測試階段。

Blockman

你想高亮顯示代碼的(de)作用域嗎？這(zhè)樣就(jiù)可以(yǐ)更輕松地(dì / de)閱讀當前代碼塊。有時(shí)在(zài)向同事解釋不(bù)同的(de)控制流時(shí)，高亮顯示尤其有幫助。

不(bù)用擔心，VS Code 擴展 Blockman 正如其名所示：将代碼顯示成方塊。

Blockman 允許你修改代碼塊的(de)顯示顔色和(hé / huò)深度、切換焦點，還有其他(tā)自定義。

在(zài)選中的(de)框内高亮顯示嵌套的(de)代碼塊非常容易。如下展示了(le／liǎo)利用這(zhè)款工具顯示一(yī / yì ／yí)層層的(de)縮進：

Live Frame

LiveFrame 也(yě)是(shì)一(yī / yì ／yí)款可以(yǐ)在(zài)編輯器内運行和(hé / huò)預覽 Web 應用程序的(de) VS Code 擴展。可以(yǐ)幫助我們減少在(zài) VS Code 和(hé / huò)浏覽器之(zhī)間頻繁地(dì / de)切換。

除了(le／liǎo)提高生産力之(zhī)外，Live Frame 擴展還可用于(yú)錄制或展示交互式演示教程。

參考鏈接：

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

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

來(lái)源：CSDN