如果你不知道如何安裝 VSCode 插件，可以查看官方文檔：https://code.visualstudio.com/docs/editor/extension-marketplace

　　現(xiàn)在，我們開(kāi)始今天的內(nèi)容。

　　01、Quokka.js

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

　　Quokka 是我安裝過(guò)的最棒的 VSCode 插件工具，它可以用于快速構(gòu)建 JavaScript / TypeScript 原型設(shè)計(jì)的開(kāi)發(fā)人員生產(chǎn)力工具。當(dāng)您輸入時(shí)，運(yùn)行時(shí)，值會(huì)更新并顯示在您的代碼旁邊的 IDE 中。

　　一旦你編寫(xiě)任何代碼，它將立即顯示結(jié)果：

　　官方文檔地址：https://quokkajs.com/docs/

　　安裝后，按 Ctrl/Cmd + Shift + P 顯示編輯器的命令面板，然后輸入 Quokka 以查看可用命令的列表， 選擇并運(yùn)行新建 JavaScript 文件或從當(dāng)前文件開(kāi)始命令。

　　現(xiàn)在，你準(zhǔn)備好了，開(kāi)始在你的編輯器中輸入一些代碼，看看接下來(lái)會(huì)發(fā)生什么。

　　02、Code Runner

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

　　Code Runner 可以運(yùn)行多種語(yǔ)言的代碼片段或代碼文件，包括 JavaScript。

　　它有點(diǎn)類(lèi)似于 Quokka，但它支持多種編程語(yǔ)言，并且只能運(yùn)行一個(gè)代碼片段。

　　03、GitHub Copilot

　　安裝地址：https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

　　GitHub Copilot 使用 OpenAI Codex 從您的編輯器中實(shí)時(shí)建議代碼和整個(gè)功能。經(jīng)過(guò)數(shù)十億行公共代碼的訓(xùn)練，GitHub Copilot 將包括注釋和方法名稱(chēng)在內(nèi)的自然語(yǔ)言提示轉(zhuǎn)化為數(shù)十種語(yǔ)言的編碼建議。

　　有了這個(gè)智能補(bǔ)全工具，你就不需要記住各種繁瑣的 API。

　　04、Import Cost

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

　　此工具將在編輯器中內(nèi)聯(lián)顯示導(dǎo)入包的大小。作為一個(gè)有抱負(fù)的前端開(kāi)發(fā)者，我們應(yīng)該對(duì)導(dǎo)入包的體積敏感，從而優(yōu)化性能。

　　GitHub地址：https://github.com/wix/import-c

　　05、REST Client

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=humao.rest-client

　　作為 Web 開(kāi)發(fā)人員，我們經(jīng)常需要使用 REST API 發(fā)出 HTTP 請(qǐng)求。為了檢查 API 和檢查響應(yīng)，使用了 Postman 等工具。但是，當(dāng)您的編輯器可以輕松完成相同的任務(wù)時(shí)，為什么還要使用不同的應(yīng)用程序呢?REST Client 允許我們發(fā)送 HTTP 請(qǐng)求并直接在 Visual Studio Code 中查看響應(yīng)。

　　06、Live Server

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

　　當(dāng)您之前需要預(yù)覽 HTML 頁(yè)面時(shí)，您可能會(huì)直接在瀏覽器中打開(kāi) HTML 文件。

　　但是這種方式有兩個(gè)缺點(diǎn)：

　　直接打開(kāi)HTML文件就是通過(guò)File協(xié)議打開(kāi)的，那么JS運(yùn)行環(huán)境就會(huì)和通過(guò)HTTP協(xié)議加載的文件不同。

　　修改 HTML 文件后，頁(yè)面不會(huì)自動(dòng)刷新。

　　在這種情況下，Live Server 可以幫助我們。它可以為靜態(tài)和動(dòng)態(tài)頁(yè)面啟動(dòng)具有實(shí)時(shí)重新加載功能的本地開(kāi)發(fā)服務(wù)器，這是我每天使用最多的工具。

　　07、Image preview

　　安裝鏈接：https://marketplace.visualstudio.com

　　當(dāng)我們?cè)?HTML 或 CSS 中導(dǎo)入圖像時(shí)，它會(huì)在側(cè)邊欄中顯示圖像。通過(guò)這個(gè)特性，我們可以快速觀察代碼是否寫(xiě)得正確。

　　08、GitLens

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

　　GitLens 只是幫助您更好地理解代碼，快速了解更改行或代碼塊的人員、原因和時(shí)間。回顧歷史，以進(jìn)一步了解代碼如何以及為何演變，輕松探索代碼庫(kù)的歷史和演變。

　　09、Git Graph

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph#:~:text=Git%20Graph%20extension%20for%20Visual,look%20the%20way%20you%20want!

　　查看存儲(chǔ)庫(kù)的 Git 圖表，并從圖表輕松執(zhí)行 Git 操作，可配置為您想要的方式!

　　10、JSON轉(zhuǎn)TS

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts

　　項(xiàng)目中的 TypeScript 類(lèi)型定義通常需要與 JSON 數(shù)據(jù)的格式保持一致。它可以幫助我們將 JSON 對(duì)象轉(zhuǎn)換為 typescript 接口。

　　從選擇轉(zhuǎn)換(Shift + Ctrl + Alt + S)：

　　11、Tabnine

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

　　Tabnine 是 AI 代碼完成助手，可提高編碼準(zhǔn)確性并提高生產(chǎn)力。

　　安裝后發(fā)現(xiàn)它比我想象的要強(qiáng)大!

　　12、hexdump

　　安裝鏈接：https://marketplace.visualstudio.com/items?itemName=slevesque.vscode-hexdump

　　這個(gè)擴(kuò)展可以用十六進(jìn)制顯示指定的文件。

　　這個(gè)是不是很神奇，如果你想要這樣的效果，你就可以安裝此插件。

上一篇

深入理解數(shù)組的slice方法

下一篇

14個(gè)你必須知道的JavaScript函數(shù)