适用于 Web 开发人员的顶级 VS Code 扩展

大家好！💙

在本文中，我将讨论一些我认为对 Web 开发人员很有帮助的 Visual Studio Code 扩展。这些 VS Code 扩展将帮助您提高工作效率。

让我们开始吧💃

什么是VS Code扩展？

VS Code 扩展程序允许您向 VS Code 安装中添加语言、调试器和工具，以支持您的开发工作流程。VS Code 丰富的可扩展性模型允许扩展程序作者直接接入 VS Code 用户界面，并通过 VS Code 使用的相同 API 贡献功能。

如何下载 VS Code 扩展程序

• 您可以在 VS Code 中浏览和安装扩展。单击 VS Code 侧边活动栏中的扩展图标或使用“视图：扩展”命令（Ctrl+Shift+X）即可打开扩展视图。

• 点击 VS Code 中的扩展程序图标：
  

• 这将显示最受欢迎的 VS Code 扩展程序列表。点击安装按钮即可下载您选择的任何 VS Code 扩展程序。

请查看这篇文章，了解更多关于下载和安装VS Code 扩展的信息。

适用于 Web 开发人员的顶级 Vs. Code 扩展

以下是一些 VS Code 扩展，它们将大大简化您的 Web 开发工作：

1.
在线服务器

实时服务器扩展程序提供 Web 应用程序的实时预览。它直接在编辑器中提供实时预览。

这款扩展程序能强制自动重新加载页面，让您的工作更轻松。它会在浏览器中直接显示代码运行结果，无需刷新页面。您无需每隔一分钟就保存并刷新浏览器来查看结果。

2.
JavaScript (ES6) 代码片段

此扩展程序包含 ES6 语法的 JavaScript 代码片段。使用 ES6 JavaScript 代码片段可以加快您的 JavaScript 编码速度。

3.
更漂亮

此扩展程序可对 JavaScript、CSS 和 HTML 进行格式化。每次保存更改时，它都会整理代码并使其更易于阅读。

使用 Prettier 的方法：

• 点击 VS Code 上的扩展图标。
• 搜索并下载更漂亮的
• 下载 Prettier 后，前往设置或按Ctrl+ 键,打开设置选项卡。
• 使用设置搜索栏查找format
• 要将 Prettier 设置为默认格式化程序，请向下滚动Editor: Default formatter。prettier - code formatter从下拉框菜单中的备选方案列表中进行选择。
• 滚动Enable Editor: format on save并切换复选框以启用它。启用后，当您在代码编辑器中按Ctrl“+”号时，Prettier 将自动格式化您的代码。S
• 滚动Enable Editor: format on paste并勾选复选框即可启用。复制粘贴代码时，您无需自行整理代码。只需按下Ctrl“+”号S，Prettier 就会自动处理。

自定义 Prettier：

• 点击设置
• 寻找更漂亮的
• 如果您只想使用单引号而不需要双引号，请点击此选项prettier: single quote。此选项在团队协作时非常方便，因为它允许每个人使用相同数量的引号。

您可以通过多种方式自定义 Prettier。更多信息，请前往 Prettier 设置选项卡。

4.
路径智能感知

此扩展程序通过自动补全文件名来加快开发速度。您只需在语句中输入文件名，它就会自动搜索并提供建议。

5.
代码时间

Code Time 是一款开源插件，用于自动跟踪编程指标和时间。
它可以跟踪您的开发进度，并提供有价值的统计数据，例如您花费了多少时间编写代码。它是一款实用的扩展程序，可以帮助您跟踪和查看自己的开发进度。

6.
Polacode

此扩展程序可帮助您截取漂亮的代码屏幕截图。

要截取代码屏幕截图：

• 打开命令面板（Windows 系统为 ctrl + shift + p，Mac 系统为 cmd + shift + p）。

• 搜索 polacode 并选择 polacode。

• 选中要截图的部分，复制并粘贴屏幕上显示的代码，然后按 polacode 图标将其保存到您的设备上。

7.
自动重命名标签

此扩展程序允许您一次性重命名开始标签和结束标签。当您更改开始标签时，结束标签也会随之更改，从而简化了标签重命名过程。

8.
Px 到 rem

此扩展程序可帮助您在像素 (px) 和雷姆 (rem) 之间进行转换。您无需自行进行数学转换。

你只需要这样做：

• 突出显示 20pxFont-size: 20px

• 按键alt + Z将像素 (Px) 转换为雷姆 (rem)。

• 按住这些alt + Z键可将 rem 转换为 Px。

这个扩展程序的问题在于它只使用标准尺寸：16像素。使用此扩展程序进行的所有转换都会除以16像素。

9.
VS Code 图标

此扩展程序会在资源管理器视图中的每个文件和文件夹上添加一组图标，使编辑器看起来更加丰富多彩。

10.
图片预览

图片预览功能会在页面侧边栏和鼠标悬停时显示图片预览。当您将鼠标悬停在标签上时，即可看到图片预览<img>。

11.
着色

Colorize 功能会为 CSS 中的每种颜色创建一个彩色背景，以帮助您更好地可视化它们。无论您是在边框、CSS 变量、文本阴影等位置输入颜色，它都能正常工作。

color: red例如，当你在 CSS 代码表中输入“red”时，它会在你输入“red”的地方创建一个红色背景。

结论

这些 VS Code 扩展程序将使您的 Web 开发工作更加轻松。如果您有任何疑问或有用的扩展程序建议，请在评论区留言。我会尽快回复。

如果您觉得这篇文章有用，请点赞并分享❤️。

今天就到这里啦！😁 你已经读完这篇文章啦😍。