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

翻译 | 杨小爱

今天的内容，我将跟大家分享10个比较实用的ASCode的插件工具。

如果您不知道如何安装 VSCode 插件的话，可以查看官方文档：https://code.visualstudio.com/docs/editor/extension-marketplace。

我们现在开始吧。

01、Quokka.js

Quokka 是我安装过的最棒的 VSCode 插件工具。可以访问项目文件、内联报告、代码覆盖率和丰富的输出格式。当您键入时，运行时值会更新并显示在您的代码旁边的 IDE 中。

一旦您编写任何代码，它将立即显示结果：

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

官方文档：https://quokkajs.com/docs/

安装扩展后，按 Ctrl/Cmd + Shift + P 显示编辑器的命令面板，然后键入 Quokka 以查看可用命令的列表。选择并运行新建 JavaScript 文件或从当前文件开始命令。

现在你安装好了，开始在你的编辑器中输入一些代码，看看接下来会发生什么。

02、Code Runner

Code Runner 运行多种语言的代码片段或代码文件，包括 JavaScript。

它有点类似于 Quokka，但它支持多种编程语言并且只能运行一个代码片段。

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

03、Import Cost

此扩展将在编辑器中内联显示导入包的大小。作为一个有抱负的前端开发者，我们应该对导入包的文件大小敏感，从而优化性能。

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

04、REST Client

作为 Web 开发人员，我们经常需要使用 REST API 发出 HTTP 请求。为了检查 API 和检查响应，使用了 Postman 等工具。

但是，当您的编辑器可以轻松完成相同的任务时，为什么还要使用不同的应用程序呢？ REST Client 允许我们发送 HTTP 请求并直接在 Visual Studio Code 中查看响应。

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

05、Live Server

当我们需要预览 HTML 页面时，我们可能会直接在浏览器中打开 HTML 文件。

但是这种方式有两个缺点：

直接打开HTML文件就是通过File协议打开的，那么JS运行环境就会和通过HTTP协议加载的文件不同
修改 HTML 文件后，页面不会自动刷新。

在这种情况下，Live Server 可以帮助我们。它可以为静态和动态页面启动具有实时重新加载功能的本地开发服务器，这是我每天使用最多的工具。

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

06、Image preview

当我们在 HTML 或 CSS 中导入图像时，它会在侧边栏中显示图像。通过这个特性，我们可以快速观察代码是否写得正确。

安装地址：https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

07、JSON转TS

项目中的 TypeScript 类型定义通常需要与 JSON 数据的格式保持一致。它可以帮助我们将 JSON 对象转换为 typescript 接口。

从选择转换（Shift + Ctrl + Alt + S）：

安装地址：https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts

08、Tabnine

Tabnine 是 AI 代码完成助手，可提高编码准确性并提高生产力。

安装后发现它比我想象的要强大！

安装地址：https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

09、十六进制转储

这个工具可以用十六进制显示指定的文件。

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

写在最后

以上就是我今天跟你分享的VSCode的插件工具，希望对你提升工作效率有帮助。

如果你觉得我今天的内容有用，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

最后感谢你的阅读，祝编程愉快！

9个面向前端开发者的有用VSCode 插件工具

学习更多技能
请点击下方公众号

9个面向前端开发者的有用VSCode 插件工具

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号