英文 | https://medium.com/frontend-canteen/most-useful-vscode-extensions-for-frontend-developer-7c0f7ce5ebc4

翻譯 | 楊小愛

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

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

01、Quokka.js

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

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

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

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

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

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

02、Code Runner

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

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

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

03、GitHub Copilot

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

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

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

04、Import Cost

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

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

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

05、REST Client

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

作為 Web 開發(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 頁面時(shí)，您可能會(huì)直接在瀏覽器中打開 HTML 文件。

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

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

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

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

07、Image preview

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

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

08、GitLens

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

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

09、Git Graph

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

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