您需要这些 Visual Studio Code 扩展！

看来我的文章引起了你的注意。如果你想了解最新动态，请考虑订阅我的新闻通讯。

VS Code 是一款功能强大的工具，但“功能齐全”并非这款 IDE 的卖点。以下是如何获得最佳开发体验的方法。

Visual Studio Code - Insiders 版本

下载 VS Code 时，实际上有一个“版本”可供选择。您可以下载稳定版本，也可以选择使用为最早采用者发布的最新版本——Insiders 版本。选择权在您手中，但如果您正在阅读这篇文章，那么显然您应该选择常规版本。

扩展

好吧，让我们开始吧。我把它们分成了几类。在我看来，必备扩展是进行任何编码工作并保持理智的必需品。强烈推荐的扩展是受欢迎的，但有些人可能会觉得它们不必要或烦人。推荐的扩展也可以不用——它们能为你的工作流程增添价值，但那是一种非常特殊的工作流程。谁知道呢？也许它们只适合我？

基本的

• 自动重命名标签- 它实际上将编辑两个 HTML 标签所需的时间减少了一半！
• 括号对着色器- 可以对括号进行颜色编码，有助于区分一个范围与另一个范围。
• 颜色突出显示- 提示您刚刚输入的颜色。
• DotENV - 在 .env 文件中启用秘密的语法高亮显示。
• ESLint - 如果配置得当，这玩意儿能帮你省不少事。毫无疑问，它是这份清单上最省时的工具。它能发现代码中的问题，并且大多数情况下都能修复。除非你用的是 TypeScript，否则它就只是闲置在那里，什么也不做。
• JavaScript（ES6）代码片段- 减少输入，节省更多调试时间。
• Prettier - 不如 ESLint 有用，但如果一起配置，它们实际上会使您的代码库保持一致并且...漂亮。

强烈推荐

• 更出色的注释- 如果你在代码中添加注释，那么这个扩展会让你的注释更加精彩！无论是 TODO、JSDocs 等等，它们看起来都棒极了。
• 错误镜头- 当您最终搞砸了某些事情时，您的 IDE 不仅会在您的代码中添加一条红色波浪下划线，还会提供内联错误定义。
• GitLens - 与上文类似，只是这次它显示的是指定行的 git 历史记录的详细信息。此外，它还在活动栏中提供了一个附加菜单。
• 实时服务器- 启动开发服务器并开放端口，以便在浏览器中检查您的工作。包含实时刷新功能！
• npm Intellisense - 帮助输入那些 npm 包。
• 路径智能感知- 与上述类似，但针对文件。
• 设置同步- 您是否在多台机器上使用 VS Code，并且在它们之间同步 IDE 时遇到困难？这个功能非常适合您。它将您的配置、扩展等存储在 Gist 中，并允许您将它们下载到您当前使用的任何机器上。
• Turbo Console Log - 告别“cosnole.log”拼写错误！有了这个扩展，你的日志将立即、完美、细致地插入。

受到推崇的

• 代码拼写检查器- 帮你解决那些恼人的拼写错误。当然，linter 可以确保你的代码正常工作，但这个工具只处理正字法问题。不过，你需要把一些奇特的单词添加到你的词典里。
• Night Owl / Cobalt2 官方主题- 我觉得 VS Code 的基本配色主题还不错。但如果你想更丰富一些，我推荐其中一个主题。在我看来，它们看起来最好看。
• 图像预览- 为您提供刚刚输入的路径的漂亮内联缩略图和图像。
• Kite Autocomplete for Python 和 JavaScript - 这个功能很强大。它需要在你的机器上安装一些额外的程序，并使用机器学习来预测你将要输入的内容。最终，它可以节省你的按键次数。
• 材质图标主题- 我不知道为什么，但我只是喜欢在该项目树中看到漂亮的彩色图标。
• Polacode - 为你的代码制作专业的截图。在 Twitter 上看起来很棒。
• 行排序- 对行进行排序。升序、降序、大小写敏感，任您选择。

奖励环节——特定工具的扩展

在这里，我收集了扩展，由于它们是框架或工具特定的，因此肯定只会帮助我的工作流程。

• VSCode 的 GraphQL - GraphQL 查询的语法突出显示和 linting。
• IntelliJ IDEA 的按键绑定——这可是会被人嘲笑的。我工作时只用 Webstorm，而且我越来越喜欢它的按键映射了。我知道——我有点怪🤷‍♂️
• Tailwind CSS Intellisense - 最近我爱上了 TailwindCSS，它有助于输入这些实用程序
• Vetur - 适用于 Vue.js 及其生态系统
• Vue VS 代码片段- 这些片段永远不会太多！

结论

没有。只需从上面的列表中选择你喜欢的，然后继续编码！