7 個不容錯過(guò)的 VS Code 擴展

2022-02-10

作者 Anupam Chugh 譯者彎月

出品 CSDN（ID：CSDNnews）

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

2021 年，許多新出的 VS Code 擴展廣受開(kāi)發(fā)人員的好(hǎo)評。在本文中，我們就(jiù)來介紹一些我喜歡的擴展。希望這(zhè)些擴展能(néng)夠幫助你提高生産力，并擴展開(kāi)發(fā)人員的工作流程。

GitHub Copilot

首先來介紹一下 GitHub Copilot，這(zhè)是一款由 GitHub 和 OpenAI 的 Codex 創建的 AI 程序員工具，可以根據你提供的上下文自動生成(chéng)代碼。

使用 VS Code 或 Jetbrains 的開(kāi)發(fā)人員非常喜歡這(zhè)款工具，因爲它可以使用大多數編程語言生成(chéng)整塊的代碼。想了解更多信息？你可以在 IDE 中與 Copilot 直接對(duì)話。

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

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

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

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

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

Thunder Client

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

但是，在 VS Code 中測試 API 需要頻繁切換思路（因爲你要切換到别的應用）。Thunder Client 爲我們提供了一款輕量級、易用、整潔、簡單的 Rest API 客戶端擴展。

我們可以利用 Thunder Client 在編輯器内快速測試代碼庫的 API 端點，從而最大限度地減少頁面(miàn)的切換。它可以替代 Postman，作爲常用的無腳本測試工具。

Snipped

我們都(dōu)喜歡在社交媒體上分享日常工作中的代碼片段。通常，我們需要將(jiāng)代碼片段複制粘貼到 carbon.now.sh 中，然後(hòu)導出屏幕截圖。

Snipped 可以直接在從 VS Code 編輯器自動爲我們完成(chéng)這(zhè)項任務。讓我們告别在推特中複制粘貼代碼，將(jiāng)代碼截圖直接保存到剪貼闆中。

Lorem.space

如果你想快速創建一個包含虛拟内容的 Web 應用程序原型，則 Lorem.space 是理想的 VS Code 擴展。

Lorem.space 是一個随機圖像占位符生成(chéng)器 API，提供不同的類别可供選擇。

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

面(miàn)向(xiàng) JavaScript 和 TypeScript 的 AI Doc Writer

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

Mintlify 即將(jiāng)推出一款 VS Code 擴展 AI Doc Writer，這(zhè)款工具的目标是利用工具編寫文檔。

隻需選中代碼的某個函數并按 Command +，AI Doc Writer 就(jiù)可以生成(chéng)該函數的文檔。我測試了一個函數，效果還(hái)不錯。

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

需要源代碼的搜索引擎嗎？Mintlify Search Engine 是同一團隊開(kāi)發(fā)的另一款 VS Code 擴展。你可以用自然語言編寫搜索查詢來查找代碼片段。此外，你還(hái)可以詢問特定代碼的功能(néng)。現階段，該擴展還(hái)處于小範圍測試階段。

Blockman

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

不用擔心，VS Code 擴展 Blockman 正如其名所示：將(jiāng)代碼顯示成(chéng)方塊。

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

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

Live Frame

LiveFrame 也是一款可以在編輯器内運行和預覽 Web 應用程序的 VS Code 擴展。可以幫助我們減少在 VS Code 和浏覽器之間頻繁地切換。

除了提高生産力之外，Live Frame 擴展還(hái)可用于錄制或展示交互式演示教程。

參考鏈接：

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

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

來源：CSDN