你需要的 VSCode 扩展 [Webdevs]🚀🔧

VSCode 爱好者？我知道扩展程序是我们编程的命脉。如果你是 Web 开发者，那你就太幸运了。以下是一些实用的扩展程序/配置，了解它们的用例和优势后，你一定会大吃一惊。

这只是对这些扩展的简要描述，所以不要指望这里有完整的细节。您可以从各自的文档/存储库中了解有关扩展的更多信息。

顺便说一句，下面嵌入的所有图像和 GIF 的功劳都归于各自的扩展作者

1. Visual Studio IntelliCode

您了解 Tabnine，但您知道微软已经提供了一款 AI 驱动的自动完成工具吗？Visual Studio Itellicode 是一款 AI 驱动的自动完成工具，用于 AI 增强型开发工作流程。它非常轻量，并且不像其他自动完成工具那样需要任何额外的运行时。它使用 Microsoft Azure 云服务来处理信息，而不是本地计算机。

2. HTML 标签换行缩写（Emmet）

你可以用花括号/方括号/引号简单地包裹一段代码。但这不适用于 HTML 标签。你必须手动编写开始/结束标签。

但是 VSCode 有一个内置的 emmet 扩展。用它你可以做很多事情，甚至可以用 HTML 标签包裹它。

以下是操作方法

选择要包装的内容
输入CTRL+SHIFT+p然后搜索“Emmet: Wrap with Abbreviation”
选择第一个并输入 HTML 标签名称，例如div

更准确地说，您可以使用快捷键为配置键盘映射的命令设置自定义快捷键CTRL+k+s。只需设置您想要的快捷键，例如CTRL+k+SHIFT+w为命令“Emmet: Wrap with Abbreviation”设置快捷键即可。请确保您想要的快捷键未用于其他命令，否则可能会删除该命令的功能。

3. 包装控制台

厌倦了手动编写console.log()并添加标签前缀来识别控制台日志来自哪个文件吗？好吧，这个扩展赋予你超能力，只需一个快捷方式即可编写完整的 console.log

它支持字符串前缀、动态（必须输入）前缀或根本没有前缀

4.记录此

它是一个 JavaScript/Typescript JSDoc 生成器。您无需手动编写 JavaScript 文档注释/结构，只需使用简单的命令/快捷方式即可注入预构建的可配置 JSDoc 结构。

5.模板字符串转换器

当你需要将其他字符串连接到一个字符串中时，将普通字符串转换为模板字符串真的很烦人。这时，template-string-converter 就能让一切变得轻松了。

6. ES7 React/Redux/React-Native/JS 代码片段

ES7+ 中的 JavaScript 和 React/Redux 代码片段，带有 VS Code 的 Babel 插件功能

得益于这款出色的代码片段扩展，您的 React/React-Native 组件只需一段代码即可创建。它提供了所有用于生成 Redux 和 React 组件样板代码的优秀代码片段。此外，还提供了与 ES7 语法相关的新代码片段。在创建 React 组件时，可节省大量时间。它也支持 TypeScript。

7. Draw.io 集成

喜欢流行的图表应用程序diagrams.net（以前称为draw.io）吗？嗯，您无需安装任何应用程序或访问网站即可创建/编辑/打开图表。您可以在 VSCode 中完成所有操作。由于 draw.io 是基于 Web 的，而 VSCode 运行在 Electron 之上，因此它可以轻松地在 VSCode 中运行。它也支持协作编辑。