面向 Web 开发人员的十大 VsCode 扩展

环绕

扩展的优势

如今，Visual Studio Code 被广泛用于软件开发。它具有高度的可扩展性，并且有很多贡献者为其创建了实用的扩展，赋予了这款编辑器超强的功能。这可不是开玩笑，使用这些工具确实可以加快开发速度，并与团队成员共同提升贡献。
以下是我推荐的 10 款 VS Code 扩展：

视频

如果您更喜欢观看视频而不是阅读，您可以在我的 YouTube 频道上查看我制作的有关该主题的视频：

VsCode 扩展列表

10.吉特伦斯

GitLens 是一款开源扩展，融合了 Git 和 VsCode 的功能。这款扩展的一大亮点在于它能够通过 Git 追溯注释和代码透视功能可视化代码作者。您还可以在文件历史记录中来回切换，查看对该文件所做的更改。通过当前行追溯功能，您可以点击代码中的某一行，查看修改该行的最后一个提交，以及引入该更改的拉取请求的链接。总而言之，如果您使用 Git 作为版本控制系统，GitLens 是一款非常实用的工具。

9.实时服务器

哦，我真希望在我开始学习 Web 开发的时候就有这个扩展。它会启动一个轻量级的 Node.js 服务器，并运行你的 HTML 文件以及指定目录中的所有资源。最重要的是，你对网站所做的任何已保存的更改都会立即反映在浏览器中，这会带来非常快速且愉悦的开发体验。你可以在 Angular 和 React 等现代框架和库的工具中找到此功能，但有了这个扩展，你可以在任何 Web 开发项目中使用相同的功能。

8.进口成本

你知道那种感觉吗？当你在 npm 网站上看到一个很酷的包时，你会立即安装并导入到你的项目中。我也是，问题是我们常常没有考虑到它可能带来的开销。这就是为什么这个小扩展如此重要。它能让你跟踪导入的包和库的大小，从而控制导入的代码量。尤其是在 Web 开发中，你应该留意导入的每一个字节，因为它们会对网站的加载速度产生负面影响，甚至可能损害用户体验，甚至影响 SEO 排名。

7. Prettier

Prettier 是一款功能强大的代码格式化程序，您可以根据自己的喜好进行设置。它只是简单地格式化您的代码，而在整个代码中保持一致的格式和样式非常有益，因为它可以节省您大量的时间，尤其是在与其他开发人员协作时。您可以使用 Prettier 插件进一步增强此扩展程序的功能，还可以让它在您保存文件时自动格式化代码。

6.图标

这不是一个特定的扩展，而是一个扩展集合。如果你安装了图标扩展，VsCode 会在目录名和文件名前显示一些小图标。每个文件扩展名都有其自定义图标，这使得在代码中导航和查找所需文件或文件夹变得容易 10 倍。甚至目录也可以根据其名称和用途拥有特定的图标。我的首选是 Material Icon Theme，但还有其他一些非常酷的图标，例如vscode-icons、Simple Icons和Material Theme Icons。找出最适合你的那一款。

5. MarkDown 合一

无论你是否喜欢，编写文档都是开发人员工作的一部分。Markdown 是编写文档甚至博客文章最常用的标记语言。Markdown 一体化工具提供实用的快捷键、自动完成和实时预览功能，让编写过程更加轻松愉快。它能够显著加快文档编写速度，让你能够更快地投入到新功能的开发中。

4.更好的评论

更好的注释能帮助您编写更人性化、更易读的注释。注释能帮助您理解自己和他人的代码。此扩展程序可以帮助您直观地组织注释，使其更易于理解。您可以将注释分类为高亮文本、错误和警告、问题、删除线和 TODO。这些格式化的注释在视觉上清晰可见，让您不会错过任何必读的注释。

3. 片段

这并非单个扩展，而是一系列扩展的集合。使用代码片段是节省开发时间、提高生产力的绝佳方法。例如，如果您使用 React 并安装了ES7/React/redux/GraphQL/React-native 代码片段，只需输入“rfc”并按 Enter 键即可导入 React 并创建一个函数组件。您还可以找到适用于 Angular、Vue、Python、HTML 等语言的代码片段扩展。