如果您是 Web 开发人员，很有可能正在使用 VS Code。毕竟，它是最流行的代码编辑器。在很大程度上，它的受欢迎程度主要归功于开源、高度可配置和可扩展性。

在本文中，我们将看看一些专门针对 Vue 的最佳 VS Code 扩展。随着Vue 3的采用，生态系统发生了很多变化，相关工具也不例外。这是您需要了解的有关正在进行的更改以及 2022 年要使用的扩展程序的所有信息！

随着 Vue 3 + TypeScript 组合越来越受欢迎，Vue 的官方 VS Code 扩展 — Vetur — 开始出现问题，例如将 Vue 与 TypeScript 一起使用时 CPU 使用率高，或者缺乏对 Vue 3 的新 <script setup> 语法的支持。

这就是创建 Volar 的原因——解决 Vetur 的问题，并为 Vue 3 + TypeScript 用户提供可能的最佳开发体验。它为 Vue 3 提供完整的语言支持——包括标准的单文件组件 (SFC) 语法及其最新添加的内容，如 <script setup>。

如果你正在使用 Vue 3——尤其是 TypeScript——你应该看看 Volar。它是 Vue 的创建者推荐的，也是 Vite 开发的推荐扩展。

尽管 Volar 是 Vue 3 的当前推荐，但 Vetur 不会很快消失。它仍然是目前最流行的 Vue 相关 VS Code 扩展，并且许多生态系统仍在 Vue 2 上运行，对于那些没有升级的人来说，它是最好的选择。

与 Volar 一样，Vetur 提供了完整的语言支持，虽然更加成熟和功能丰富，但在 Vue 3 和 TS 支持方面有所欠缺。您仍然可以在 Vue 3 和 TS 中使用它就好了，但您应该意识到可能缺乏经验。

已经有人讨论在 Vetur 下再次结合现代 Vue 工具；但是，目前，您仍然必须选择哪个用于您的工作流程。

想要使用 Vetur 的一些附加功能（Snippets、ESLint 和 Prettier 集成）但希望拥有良好的 Vue 3 + TS 体验的开发人员还有一个解决方案 - VueDX。

VueDX（又名 Vue 开发者体验）是一组工具，旨在改善 Vue 的开发体验——特别是对于那些将它与 TypeScript 一起使用的人。它与 Vetur 集成得非常好，填补了它的许多功能漏洞。

主要扩展 - VueDX - 扩展 TS 以提供 .vue SFC 的类型检查、完成、重命名和重构。此外，还有一个 SFC 语法高亮扩展和一个独特的预览——VueDX 扩展，用于在 VS Code 中实时预览 Vue 组件。

Vue VSCode 片段（Vue VSCode Snippets）

代码段一直是提高编码效率的好方法，在 Vue 中也不例外。

Vue VSCode Snippets 提供了一组很棒的代码段，可用于 Vue 2 和 Vue 3。有用于常见导入的代码段、Vue 3 的组合 API、选项 API、生命周期钩子等等。

这个扩展将很棒的 ESLint linter 直接集成到 VS Code 中，直接在你的代码中向你展示所有的 linting 问题。虽然不是特定于 Vue 的，但 Vue 为 ESLint 提供了官方插件，以确保您的 Vue 代码中的最佳实践的正确性和使用。

要正确配置您的设置，请确保遵循官方文档。该插件提供了许多 linting 规则，您可以通过提供的预设之一或一对一地使用它们。如果您使用的是 TypeScript — 您还应该查看 TypeScript ESLint 工具。

必备品

现在，除了上述所有内容之外，VS Code 市场充满了我认为无论您在做什么类型的 Web 开发都必不可少的扩展。以下是我个人的一些首选。

• Prettier 是一种自以为是的代码格式，可以在任何配置的操作（例如文件保存）上快速格式化您的代码。支持开箱即用的 Vue SFC 语法。
• GitLens 是一个功能丰富的扩展，可满足您所有的 Git 需求。我最喜欢的功能是 Git 修订导航、Git 代码镜头和丰富的 Git 侧边栏视图。

GitHub 存储库

谈到 Git，GitHub Repositories 是一个相当新的扩展（目前处于预览阶段），它允许您在舒适的 VS Code 编辑器中搜索、获取和浏览任何可访问的 GitHub 存储库的代码。将它与 GitLens 结合起来，在任何开源 Vue 项目上工作都将是一场爆炸！

值得注意的是，此扩展可能会在不久的将来成为内置功能。

代码拼写检查器（Code Spell Checker）

Code Spell Checker 鼓励您提高代码的可读性和语法正确性。它会根据任何已安装的字典检查您代码中的单词，以确保它首先是正确的和人类可读的。如果您想完善您的命名游戏 - 这是必不可少的。

TODO 亮点（TODO Highlight）

如果您习惯于在代码中留下大量 TODO 类型的注释，以便您将来应该做的事情，TODO Highlight 正适合您。它不仅会突出显示带有 // TODO: 或 // FIXME: 等标签的评论，还会向您展示所有 TODO 的摘要！

结论

就是这样了！希望您发现这篇文章很有见地，现在知道应该为 Vue 开发考虑哪些扩展。现在 Vue 生态系统发生了很多变化，我希望你和我一样兴奋地看到 2022 年的未来。

原文：https://medium.com/@epicprogrammer/top-5-vs-code-extensions-for-vue-dev…

本文：https://jiagoushi.pro/node/1646