面向 Web 开发人员的 16 个顶级 VS Code 扩展
已发表: 2020-02-12Microsoft Visual Studio Code (VS Code) 是软件开发人员的顶级代码编辑器之一。 自发布以来，它的受欢迎程度激增，不仅是因为它提供了稳定的平台，还因为微软内置的可扩展性。 扩展市场是一个丰富的附加组件和功能，允许开发人员将 VS Code 自定义到他们梦想的开发环境中。 我们想分解一些当今可用的顶级 VS Code 扩展，以便您不会错过任何一个。
1. Sublime Text Keymap 和设置导入器
在我们的列表中名列前茅的是标题恰当的 Sublime Text Keymap 和 Settings Importer。 如果标题不够描述，此扩展程序可让您引入现有的 Sublime Text 键盘映射和设置，以便您可以无缝过渡到使用 VS Code 作为默认设置。 由于有这么多人喜欢 Sublime 并在它上面花费了数年时间，因此让 VS Code 保留从该编辑器那里获得的肌肉记忆是很有意义的。
2. JavaScript (ES6) 代码片段
当您一遍又一遍地重复相同的代码片段时，键入 JavaScript（或任何代码）会变得很麻烦。 此扩展通过让您基本上为常用代码片段编写快捷方式来帮助缓解这种情况。 触发时，代码段只是替换文本并直接插入到文档中。
3. 支架对着色器 2
无论您编写哪种语言，括号都可能是其中的主要部分。 保持它们笔直可能会让人头疼。 但是使用这个 VS Code 扩展，你可以对匹配的对进行颜色编码，以帮助缓解这个痛点，并努力使代码本身工作——而不是编辑器。
4. ESLint
在许多方面，ESLint是JavaScript中的棉短绒。 捕获错误并立即为您提供反馈和警告对于保持团队代码清洁至关重要，在 JS 中确实没有比 ESLint 更好的方法来做到这一点。 我们强烈建议尽快安装这个。
5. 项目经理
VS Code 经常出现的一个问题是如何在不同项目之间进行交换。 默认情况下，流程并不是最直观的。 因此，项目管理器通过在侧栏中为您提供一个菜单来解决该问题，您可以使用该菜单来保存不同的文件夹和 Git 项目，以便在它们之间轻松切换。 这与其说是对编辑器的改进，不如说是对生活质量的提升。
6. 浏览器预览
Web 开发中最令人讨厌的元素之一是在不同的浏览器中加载和刷新您的内容以进行测试。 浏览器预览通过在新的 Chrome 进程中为您提供 VS Code 内部工作的可靠预览，有助于限制您需要执行此操作的数量。
7. 更漂亮
我们都想要更漂亮的代码。 所以我们可能都应该安装 Prettier 来为我们处理。 该描述将 Prettier 描述为“有意见的代码格式化程序，它通过解析您的代码并使用自己的规则重新打印它来强制执行一致的样式，这些规则考虑了最大行长度，并在必要时包装代码。” 您可能不想将它用于每种语言或项目，因此有很多配置设置，因此您可以根据自己的喜好对其进行自定义。
8. gitlink
我们喜欢 gitlink 因为它很简单。 虽然有很多 Git 扩展，但 gitlink 的一个特点是它很简单，而且只做一件事。 它做得很好。 只需突出显示一段代码，gitlink 就会将您带到该特定代码段的在线存储库。 无论远程托管在何处，快速转到您的存储库都非常有用。
9.更好的评论
注释您的代码是开发人员可以拥有的最重要的习惯之一。 更重要的是，很好地评论你的代码是一项应该在每个计算机科学课堂和编码训练营中教授的技能。 也就是说，Better Comments 是每个人都需要的 VS Code 扩展之一，因为如果您相信这个名字，它会让您在代码中留下更好的注释。 借助可让您区分问题、感叹号、注释掉的代码、查询、警报、突出显示和待办事项的快捷方式，此扩展不仅会让您的生活更轻松，还会让您的团队的生活更轻松。 以及在项目中跟随您的任何开发人员。 我们不能充分推荐这一点。
10. VS 代码图标
使用扩展自定义 VS Code 的一个主要部分是实际自定义。 不仅仅是功能改变。 使用 VS Code 图标，编辑器变得更加丰富多彩且更易于导航。 文件系统带有代表各种文件类型的图标，这些图标显示在资源管理器以及文档选项卡本身中。 它使您在复杂的文件系统中工作变得更加轻松，也不再那么令人头疼。 字面意思有时。 易于阅读的图标可防止眼睛疲劳和头痛。 因此，为了您的健康，请安装 VS Code Icons。
11. 自动关闭标签
也许是我们，但输入任何语言的结束标签变得如此繁琐。 只是在最后添加 / in 会使击键感觉有点不对劲。 从不畏惧。 自动关闭标签让我们的生活更轻松。 因此，我们想让您的工作更轻松。 它简单易行，您可以继续在它们之间打字，只需按自己的方式按键即可到达下一行或该行的末尾。 安装它，让您的手指从手动关闭标签的体操中休息一下。
12.上色
CSS 很棒。 在 CSS 中选择颜色不是。 当您处理十六进制代码和 RGBA 值时，有时很难想象您为网站设置的调色板。 此扩展程序通过为您在文件中使用的任何颜色代码提供视觉注释来帮助缓解这种情况。 您可以看到您在文本内部使用的颜色作为突出显示，这样您就不必经常在色板和颜色选择器等之间来回交换。
13. 宝典
Polacode 就像您的代码编辑器的宝丽来相机。 旨在使您的代码快照更清晰、更容易，对于任何希望他们的代码恰到好处的教程作者来说，这是必须的。
14. GitLens
很难真正完全解释是什么让 GitLens 如此出色。 它的工作原理就好像 Git 和 VS Code 在设计时考虑到了彼此，而不是通过命令行层次结构工作，您可以获得可视化和洞察力，从而消除团队 Git 工作中的很多混乱。 您可以通过悬停查看事物、查看最近的更改和注释、VS Code 本身内的比较视图、热图、行历史等等。 它基本上是完美的 Git 扩展，我们认为您应该立即安装它。
15. 直播服务器
您是否曾经想从您的 IDE 中启动本地开发服务器并实时处理它？ 无论您如何回答这个问题，您都会想尝试一下 Live Server。 因为这正是你可以用它做的。 虽然它可能不会完全消除对 Local by Flywheel 和 MAMP 等产品的需求，但在许多情况下肯定会减少它们的必要性。
16. 美化
Beautify 使用流行的js-beautify来让你的 JavaScript 看起来漂亮整洁。 不要担心断线和奇怪的间距和缩进。 只需单击一个按钮，您的所有代码都将准备好进行特写（也许使用上面的 Polacode）。
结论
此列表可能包含数千个项目。 事实上，你们中的一些人可能安装了数百种不同的扩展，您在不同的时间启用和禁用这些扩展。 但我们觉得这些是 VS Code 扩展，您可以安装它们，然后在深入市场时了解您还想要什么。
您首选的 VS Code 扩展是什么？ 让我们在评论中知道！
文章特色图片由 SVIATLANA SHEINA/shutterstock.com 提供