每个 Web 开发人员都应该知道的 VSCode 扩展

Visual Studio Code之所以成为最受欢迎的代码编辑器，社区是其重要原因之一。任何产品，只要拥有强大的社区支持，都能获得成功。VSCode社区创建了大量扩展程序，旨在简化开发流程并提升开发者的效率。在本文中，我将分享一些我认为对Web开发者非常有帮助的扩展程序。

让我们开始吧

1. PWA工作室

如果你正在构建一个渐进式 Web 应用 (PWA)，PWA studio 将非常有用。

• 使用他们的入门模板从零开始构建您的 PWA。
• 将现有应用转换为 PWA。
• 将您的 PWA 打包到不同的应用商店，例如 Microsoft Store、Apple App Store 等。
• 为不同的设备生成服务工作线程和图标，以便您的 Web 应用可以上架应用商店。

2.进口成本

性能是 Web 应用程序的重要方面。使用大型 npm 包会降低性能。导入成本扩展程序会将每个第三方导入的包大小显示在文件中，以便您更好地决定是否使用第三方包，并调整从第三方包导入的方式。

3. Mintlify 文档编写器

你讨厌写代码文档吗？没问题！Mintlify Doc Writer 可以帮你一键生成美观的代码文档。

• 只需选中代码并按CTRL+ .。

4. npm 智能感知

npm 智能感知功能可以自动补全导入语句中的 npm 模块。

GIF

5. REST客户端

我们需要使用 Postman 等外部工具来构建或测试 REST API，这对于小型 REST API 或只想快速测试某个端点的情况来说可能比较繁琐。作为一种解决方案，您可以使用 REST 客户端 VS Code 插件直接在代码编辑器中测试 API。非常方便！

6. Turbo 控制台日志

对于开发者来说，编写控制台日志信息是最令人头疼的操作之一。我们经常在日志语句中写一些毫无意义的内容。但是，这款扩展程序允许你通过一个简单的快捷键创建有意义的日志信息。

• 安装扩展程序。
• 选择一个变量。
• 按CTRL+ ALT+L或CTRL+ OPTION+L

搞定！将在所选变量的下一行添加一条日志记录语句。

7.更好的评论

是什么让你成为一名优秀的开发者？——撰写评论。这款插件旨在让你的评论更易于阅读。你的评论可以分为待办事项、提醒、重点提示和查询。

8. ES7 React/Redux/GraphQL/React-Native 代码片段

在我们的 React 应用中，我们经常需要编写样板代码。我们也讨厌编写这些样板代码。这个扩展程序包含各种 React/Redux/React Native/GraphQL 代码片段，只需添加简单的前缀即可插入。

9. CSS预览

随着代码库的扩展，CSS 代码会变得越来越混乱。最终，调试 CSS 代码以及查看特定类或 ID 的 CSS 代码会变得非常困难。CSS Peep 可以帮您解决这个问题。只需将鼠标悬停CTRL在任何类或 ID 上，该扩展程序就会显示该类或 ID 的 CSS 代码。

GIF

你最喜欢的VSCode扩展是什么？请在评论区分享👇。

希望这些扩展程序对您有所帮助。关注我获取更多精彩内容💯🚀。