我为什么从 Visual Studio Code 切换到 JetBrains WebStorm

2015 年，我开始了我的第一个 JavaScript 项目，当时我使用了JetBrains WebStorm，这是一款用于 JavaScript 开发的 IDE（集成开发环境）。由于之前使用过基于IntelliJ IDEA的 Android Studio，我已经习惯了 JetBrains IDE 。此外，我还获得了公司颁发的 WebStorm 许可证，因此可以不受任何限制地使用它。

随着Visual Studio Code越来越流行，我开始将它用于我后续的 Web 项目。我非常喜欢它，因为它速度更快、高度可定制，而且免费，所以我也可以用它来开发我的私人项目。

在我目前的项目中，我遇到了一位开发人员，他对我使用编辑器而不是IDE来开发大型商业应用程序感到非常困惑。起初，我并没有真正考虑他的顾虑，但同时，我也理解他的感受。

在这篇博文中，我想告诉你为什么我现在主要使用 WebStorm 而不是 VS Code 进行开发。

前言

这是一个非常热门的话题，我知道它会引起一些争议。在下面的文章中，我将分享我在一个主要使用 VS Code 开发的大型 Angular 应用程序中使用 WebStorm 的经验。

代码检查

WebStorm 提供强大、快速且灵活的静态代码分析。此分析可检测语言和运行时错误，并提出更正和改进建议。它还能索引整个项目，例如检测所有未使用的方法、变量等。

您还可以使用 VS Code 和 ESLint 的规则no-unused-vars和no-unreachable来检测 JavaScript 方法中未使用的方法。但是，例如，如果您使用的是 TypeScript 项目（例如 Angular），VS Code 不会检测未使用的公共方法。请看这个简单的例子：

VS 代码

WebStorm

这会对主要使用 VS Code 开发的大型 Angular 代码库的代码质量产生巨大影响。

要查看差异，请打开使用 WebStorm 在 VS Code 中开发的项目并运行代码检查。这基本上让我确信使用 WebStorm 可以获得更干净的代码库。

综合业力测试

WebStorm 有一个集成的测试运行器，我非常喜欢。这样你就可以直接在 IDE 中运行测试，甚至可以在那里进行调试。

在 WebStorm 中运行我的jasmine和Karma测试时，我可以轻松跳转到失败的测试代码，并仅重新运行此特定测试。下图展示了这样的测试运行：

我在 VS Code 中的 Angular 单元测试工作流程通常是用（例如）标记一个describe或it测试块，这告诉 Karma 只运行这个特定的测试块。或者，我使用karma-jasmine-html-reporter，你也可以通过在 HTML 页面中点击特定测试来定义只运行特定的测试。ffdescribe

目前还有一个VS Code Karma 测试适配器正在开发中，它应该为 VS Code 提供类似的集成 Karma 测试功能。

未使用的承诺

如果您希望后续代码仅在 Promise 解析后运行，那么不等待 Promise 可能会非常棘手。WebStorm 会显示是否存在未解析的 Promise（在本例中为 TypeScript 应用程序）：

WebStorm

VS Code 目前无法显示此信息：

VS 代码

源代码控制/Git 集成

VS Code 默认集成了相当基础的 Git 功能。您可以使用GitLens之类的扩展程序，或者如果您喜欢使用 GUI 进行复杂的 Git 操作，也可以使用Sourcetree之类的附加工具。

WebStorm 提供所有复杂的 git 工作所需的开箱即用功能。您可以直接在 IDE 中使用可视化的 diff/merge 工具提交文件、查看更改并解决冲突。

当地历史

VS Code 不会保存您更改的本地历史记录，但您可以使用Local History等扩展。

WebStorm 会自动跟踪您对文件所做的所有更改，从而防止您意外丢失这些更改。您可以检查文件和目录的历史记录并进行回滚。例如，如果您不小心执行了 git push force 操作，甚至在远程分支上覆盖了文件，此功能将非常有用。

调试

VS Code 只能通过使用Debugger For Chrome扩展程序在 Chrome 上调试 Web 应用程序，然后您需要为您的应用程序配置该扩展程序。

使用 WebStorm，您已经拥有默认可用的所有内容，例如，对于 Angular，只需单击“调试应用程序”，您就可以在编辑器中设置断点并观察变量等。

代码重构

在我看来，使用 WebStorm 重构代码效果更好。你可以重命名组件，它会更新 HTML 和 TypeScript 文件中所有文件名和用法。总的来说，所有 JetBrains IDE 都以其重构功能而闻名：

JetBrain IDE 的一个著名功能是安全删除。使用此功能，您可以在重构期间安全地从源代码中删除文件。IDE 将首先搜索文件的用法，如果找到，您可以检查它们并在删除文件之前进行必要的修改。

不幸的是，VS Code 目前还没有那么强大。

Angular CLI 集成

WebStorm 通过所谓的 Angular Schematics 提供了良好的 Angular CLI 集成：

总的来说，WebStorm 对 Angular 具有很好的支持，因为它可以帮助编辑 Angular 模板，并为变量、管道和模板参考变量提供代码完成。

速度

VS Code 基于 Electron，由 HTML 和 JavaScript 提供支持。

WebStorm 是用 Java 开发的，总体感觉比 VS Code 慢。虽然不能说慢到一定程度，但速度差异还是很明显的。

VS Code 的启动时间更快，但如果您正在处理一个项目，您的 IDE 或编辑器始终处于打开状态，启动时间并不起关键作用。

HTML 可访问性检查

WebStorm 提供基于Web 内容可访问性指南(WCAG) 建议的检查，帮助您编写更易于访问的 HTML 代码。

价格

VS Code 是开源的并且可以免费使用。

您需要支付 WebStorm 许可证费用，除非您选择适用于开源项目、学生、教师、课堂辅导或培训课程、编码学校和新兵训练营的免费许可证之一。

另一个选择是使用EAP（抢先体验计划）。这些预发布版本包含将在下一版本中添加的功能。在新版本软件发布之前，这些版本是暂时可用的。

这是 EAP 的官方免责声明：

这是该产品的早期体验版本。您明确承认此版本的产品可能不可靠，可能无法按预期运行，并且可能包含错误。任何使用 EAP 产品的风险均由您自行承担。

结论

VS Code 更像是一个编辑器，而不是像 WebStorm 那样的 IDE。WebStorm 的标准安装比 VS Code 的默认安装（无需额外安装任何扩展）拥有更多功能。

微软用 VS Code 打造了一款出色的产品，当然你也可以用它来开发更大型的商业应用程序。总的来说，我更倾向于并推荐使用 WebStorm，原因如下：

• 更好的代码分析功能
• 一体化 IDE，具有良好的基本功能，无需安装许多额外的插件
• 更好的代码重构可能性

如果您优先考虑速度，更喜欢使用开源软件或只是想快速编辑一些配置文件，那么您应该选择 VS Code。

你使用 VS Code 和 WebStorm 的体验如何？请在评论区留言，告诉我你用什么开发了你的应用程序！

我的 VS Code 和 WebStorm 设置

本文中的屏幕截图展示了使用Material Dark Theme 的VS Code 和使用带有 Material Darker 主题的 Material UI 的WebStorm 。