20個(gè)超實(shí)用的VS Code擴(kuò)展（2024年版）

作者：學(xué)研君 2024-06-14 16:00:07

ChatGPT 這個(gè)擴(kuò)展可以讓你直接在 VS Code 中向 GPT 提問(wèn)、生成代碼、解釋代碼、翻譯英文等等。如果再結(jié)合前面提到的 Copilot，可以大大提高你編寫(xiě)代碼的效率和質(zhì)量。

大家好，今天學(xué)研君給大家?guī)?lái)一篇關(guān)于 VS Code 擴(kuò)展的文章。VS Code 這幾年做得是風(fēng)生水起，可以算得上是微軟的良心產(chǎn)品，其最大的優(yōu)勢(shì)就是擁有眾多高質(zhì)量的擴(kuò)展。在本文中，學(xué)研君將向大家推薦一些我認(rèn)為在 2024 年對(duì)開(kāi)發(fā)者來(lái)說(shuō)又實(shí)用又好用的擴(kuò)展。

估計(jì)不少讀者已經(jīng)用過(guò)了其中一些擴(kuò)展，但哪怕你們只從本文中找到一兩個(gè)之前沒(méi)聽(tīng)說(shuō)過(guò)的擴(kuò)展，并用它們提高你的工作效率。學(xué)研君就滿足了，接下來(lái)，我們一起看一下，都有哪些擴(kuò)展。

Prettier

Prettier 是支持 Python、Java、JavaScript 等多種語(yǔ)言的代碼格式化工具。特別適合用來(lái)保持代碼的一致和整潔。

Prettier 支持高度配置，可以按你喜歡的方式格式化代碼。例如，添加或刪除行末分號(hào)，將單引號(hào)轉(zhuǎn)換為雙引號(hào)等操作都可以通過(guò)設(shè)置實(shí)現(xiàn)。

在 VS Code 的設(shè)置頁(yè)面中，還可以設(shè)置在保存時(shí)自動(dòng)格式化代碼，以及格式化代碼的快捷鍵。

并且，Prettier 還可以與 ESLint 集成。

GitHub Copilot

Copilot Copilot

對(duì)于 Copilot 這個(gè)擴(kuò)展，我相信大家都已經(jīng)耳熟能詳了。它是由 OpenAI 的 GPT-3 提供支持的 AI 編程助手，可以幫助你更快地編寫(xiě)代碼。雖然它是 GitHub 官方出品，可以說(shuō)是這一領(lǐng)域的王者，可它還遠(yuǎn)遠(yuǎn)談不上完美，但它已經(jīng)可以提供完整的函數(shù)，甚至是整個(gè)文件的建議。

你不僅可以用它來(lái)提高寫(xiě)代碼的效率，還可以用它生成示例數(shù)據(jù)、測(cè)試代碼，甚至編寫(xiě)代碼文檔。

不過(guò)，可千萬(wàn)別過(guò)度依賴它，還是要真正理解你正在編寫(xiě)的代碼，掌握扎實(shí)的編程基本功。

與之類(lèi)似的還有百度的 Comate 和阿里的通義靈碼，當(dāng)然，類(lèi)似的 AI 編程助手還有很多，在此，學(xué)研君就不一一介紹了。

Comate Comate

通義靈碼

Live Server

Live Server 是 Web 開(kāi)發(fā)必備的擴(kuò)展，尤其是在處理 HTML、CSS 和 JavaScript 時(shí)的必備神器。

Live Server 是一個(gè)本地的開(kāi)發(fā)服務(wù)器，當(dāng)代碼發(fā)生變化時(shí)會(huì)自動(dòng)刷新瀏覽器。你可以通過(guò)快捷鍵或右鍵單擊 HTML 文件選擇 "Open with Live Server"，或單擊 VS Code 窗口底部的 "Go Live" 按鈕啟動(dòng) Live Server。

Multiple cursor case preserve

這是一個(gè)很小眾但非常實(shí)用的擴(kuò)展。如果你經(jīng)常要更改多個(gè)同樣的文本，那你一定會(huì)喜歡這個(gè)擴(kuò)展。

在 VS Code 中，使用快捷鍵 Ctrl+D 或 Ctrl+Shift+L 可以選擇文件中相同的文本（注意，在選擇時(shí)可以不區(qū)分大小寫(xiě)）。

在更改這些文本時(shí)，VS Code 不識(shí)別原有文本的大小寫(xiě)，只按照新輸入的文本改寫(xiě)，但這個(gè)擴(kuò)展可以讓修改后的文本保留原有文本的大小寫(xiě)，非常實(shí)用。

Multiple cursor case preserve 示例

Git History

Git History 可以查看文件的歷史記錄，以及所有提交、提交者和每次提交的更改內(nèi)容。這對(duì)團(tuán)隊(duì)項(xiàng)目來(lái)說(shuō)非常有用，可以跟蹤文件的變化。

GitLens

GitLens GitLens

GitLens 提供更加詳細(xì)的文件歷史記錄，包括提交圖表，代碼的提交者及提交時(shí)間。它會(huì)直接在代碼中添加文本，在團(tuán)隊(duì)項(xiàng)目開(kāi)發(fā)中非常實(shí)用。

Code Runner

Code Runner 支持在終端窗口中運(yùn)行 Python、Java、C、C++、Go、R 等多種語(yǔ)言的代碼。它適合運(yùn)行小段代碼片段，無(wú)須設(shè)置整個(gè)項(xiàng)目。

Markdown Preview Enhanced

如果你經(jīng)常編寫(xiě) Markdown 文件，那一定要試一下 Markdown Preview Enhanced 這個(gè)擴(kuò)展。它提供了實(shí)時(shí)預(yù)覽、目錄生成、PDF 導(dǎo)出、語(yǔ)法高亮和預(yù)覽自定義等諸多功能?，F(xiàn)在，它是學(xué)研君用 VS Code 編寫(xiě) Markdown 文檔的首選擴(kuò)展。

Console Ninja

Console Ninja 可以直接在 VS Code 中顯示 console.log 的結(jié)果，在處理 JavaScript 或 TypeScript 的代碼時(shí)，再也不用打開(kāi)控制臺(tái)啦。

image.png

Regex Snippets

Regex Snippets 這個(gè)擴(kuò)展太可愛(ài)了，有了它，你再也不用去記那些如同天書(shū)的正則表達(dá)式了。

Regex Snippets 提供了常見(jiàn)郵箱驗(yàn)證、URL、密碼、日期格式等 60 多種代碼片段，足夠你用了。

Regex Snippets 示例

Polacode

Polacode 支持在 VS Code 中直接生成代碼截圖。

雖然需要將代碼復(fù)制粘貼到 Polacode 的窗口中，但用它截取的代碼圖片非常漂亮，還可以適用各種代碼主題，適合在公眾號(hào)文章或博客中分享代碼。（雖然我們還有各種公號(hào)排版工具，但這也是一種途徑嘛）

Polacode 示例

Code Spell Checker

如果像學(xué)研君一樣，母語(yǔ)不是英語(yǔ)，或者你雖然是英語(yǔ)母語(yǔ)國(guó)家的人，但拼寫(xiě)不好，那么 Code Spell Checker 可是能幫你好大的忙，尤其是在輸入變量名的時(shí)候。

它能夠高亮代碼中的拼寫(xiě)錯(cuò)誤，并且支持自定義詞典，可以忽略你認(rèn)為是對(duì)的單詞，還可以選擇不同的詞典。此外，它還可以針對(duì)工作區(qū)和用戶分別定義詞典。

總之，有了它，你就不用再擔(dān)心寫(xiě)錯(cuò)單詞，貽笑大方了。

Code Spell Checker 示例

Document This

Document This 會(huì)為 JavaScript 或 TypeScript 函數(shù)生成 JSDoc 注釋。你要做的只是調(diào)用一下快捷鍵，或在函數(shù)上方鍵入 /** 就可以自動(dòng)生成注釋，真是懶人神器。

這樣，你就可以保持良好的代碼注釋習(xí)慣，還能學(xué)習(xí)怎樣編寫(xiě)優(yōu)秀的 JSDoc 注釋。

ChatGPT

ChatGPT ChatGPT

話說(shuō)剛開(kāi)始看到這個(gè)擴(kuò)展聲稱的免這免那的廣告，學(xué)研君是不信的，天上的餡餅就這么砸我腦袋上了？但本著有棗沒(méi)棗打三桿子的準(zhǔn)則，學(xué)研君還是親自為大家測(cè)試了一下，還真能用！

貌似終于可以不用加班了（嗨嗨，夢(mèng)該醒了?。?/p>

ChatGPT 功能示例

Peacock

Peacock Peacock

如果你同時(shí)開(kāi)發(fā)多個(gè)項(xiàng)目，例如前后端分離的全棧項(xiàng)目，那就需要同時(shí)打開(kāi)多個(gè) VS Code 窗口。窗口多了，分不清楚這些多胞胎，怎么辦，頭疼也沒(méi)用。

這個(gè)時(shí)候，你就可以用 Peacock 為不同的項(xiàng)目更改窗口的主題顏色，還是蠻實(shí)用的。

看這五顏六色的，還真像只孔雀。

Peacock 示例

Postman

Postman Postman

Postman 推出了 VS Code 擴(kuò)展，不論你使用 Java（SpringBoot）、 Python（Django、FastAPI），還是 Node.js（express）開(kāi)發(fā) API，你都可以直接在 VS Code 中測(cè)試 API 了。注意，使用它需要你注冊(cè)一個(gè)免費(fèi)的 Postman 賬戶。

REST Client

REST Client 是 Postman 的替代品，它通過(guò)創(chuàng)建 HTTP 文件來(lái)編寫(xiě)和運(yùn)行請(qǐng)求，并在輸出窗口中查看響應(yīng)。用它測(cè)試 API 也是個(gè)不錯(cuò)的選擇。

此外，還有一個(gè)輕量級(jí)的 Thunder Client，也頗受大家的喜愛(ài)。

Thunder Client

Bookmarks

Bookmarks 可以用來(lái)管理大型項(xiàng)目的文件，你可以在文件中設(shè)置書(shū)簽并在書(shū)簽之間跳轉(zhuǎn)。還可以通過(guò)命令面板查看所有書(shū)簽，或者使用側(cè)邊欄的圖標(biāo)查看自己定義的書(shū)簽。

Codiumate

Codiumate 可以用來(lái)測(cè)試代碼，它還提供了代碼解釋、代碼摘要、示例用法、代碼分析等功能。

你需要先注冊(cè)一個(gè)免費(fèi)賬戶才能使用 Codiumate。學(xué)研君建議你嘗試一下，它可是一個(gè)能確保你的代碼質(zhì)量過(guò)硬的強(qiáng)大工具。

codium ai 官網(wǎng)

Quokka

Quokka Quokka

如果你只使用 Python，或根本不需要編寫(xiě) JavaScript 代碼，那你可以忽略這個(gè)擴(kuò)展了，因?yàn)?Quokka 是用來(lái)直接在 VS Code 中代碼編輯區(qū)顯示 JavaScript 和 TypeScript 代碼運(yùn)行結(jié)果的擴(kuò)展，不支持 Python 和其他語(yǔ)言。但如果你編寫(xiě) JS 或 TS 代碼，那你一定要安裝一下 Quokka，即便是免費(fèi)版的功能也很香哦。

Quokka 示例