作为一名软粉，换成 WebStorm

前言

在前端开发同学使用的 IDE 工具中，有两个占到绝对主流：WebStorm 与 VSCode。这也是我们推荐新手入门的两个主要工具，而本文则是用来安利 WebStorm 的，局限性不可避免，还请自行判断。

Webstorm 由 Jetbrains 公司开发，这个公司 2000 年成立在捷克的首都布拉格，他们最著名的产品就是 IntelliJ IDEA，全球第一 Java IDE。当然宇宙第一 IDE 是谁就不用我说了。

VSCode的话我自己其实平时是有在用的，而且用的 Insider 版本，但是两个在我这里的地位是完全不同的，一个是 IDE，另一个呢那就是 nodepad.exe。说实话啊，VSCode 当记事本用是真的好用，它真的是一个非常棒的 Editor。

另外，本文作者是个软粉

I means 等一个微软收购 JetBrains

然后字节跳动收购微软功能对比

开箱即用！

WebstormVSCode

代码检查

可靠、智能、发展出了自己的 Linter可侦测未使用的选择器、多余的逻辑、未处理的 Promise 等，甚至还能教你语文

主要依赖 ESLint无限可能 (指现在还没有)

版本控制

迄今为止最好用的 git 客户端

比命令行好一点，装了插件更好一点

集成版本控制

自带 LocalHistory，实时记录更改，撤销你手残 git reset --hard 的结果，自带改进版 Stash (Shelve)

装插件

代码重构

在代码中和注释中重命名变量安全删除

装插件

插件

利益驱动开发，高质量官方插件

开源车！

价格

企业已购买 / 预览版免费

统统不要钱！

开发效率

启动慢，开发很快

启动很快；装了一堆插件不见得快

代码检查

JetBrains 是在长期的发展过程中自己做了一套 Linter，个人觉得非常好用。比如说它可以去检查你的代码中有没有未使用的变量，当然这个在 ESLint 支持范围内，但是它还可以检查未使用的选择器、多余的逻辑、未使用的文件或文件夹。

关于多余的逻辑主要是说比如 if (foo) return true else return false 这类的冗余逻辑，WebStorm 会提示 If statement can be simplify，加上 Redundant else statement，因为你前面已经 return 了肯定不需要 else 了。

关于未处理的 Promise 是说它会提醒你是不是忘了 await。

它还会检查正则表达式。比如你写了一个正则表达式 /(d|.)/，它会提示你把它改成 /[d.]/。

对于 VSCode，Linter 能力完全依赖 ESLint，ESLint 能做到什么程度它就能做到什么程度。从这个角度来看呢 VSCode 是一款具有无限可能无限未来的 IDE。

版本控制

WebStorm 可以说是集成了迄今为止最好用的 VCS 客户端，而且它不只是 git 客户端，Subversion，CVS，个个都跑得欢。

看这张截图，Cherry-pick，Rebase，Merge，还可以 Undo commit 或者 Reword。这两个虽然我用的不多，但是你用到的时候如果没有 WebStorm 你会非常痛苦的。当然 Undo commit 仅限本地，如果是远端它会让你交一个 revert commit。

而 WebStorm 的 VCS 能力还不限于此。对于 Git Merge，它有我认为目前市面上最好的用户体验。

智能合并，多数时候不会出问题。如果一个文件和另一个文件可以自动合并，它就不会通知你，除此以外的情况，它会保留可以自动合并的部分让你看。

它会列出所有具有冲突的文件。

好，那 VSCode 的 Git 是什么样的呢？跟没有差不多，不过有一个插件叫 Git Lens，推荐 VSCode 用户去安装。简而言之，你得装插件。集成版本控制

WebStorm 自带一个功能叫 LocalHistory。基本上长这个样子。

什么时候需要用到它呢？当你手残的时候。它不会像 git 那样你 commit 一次记录一次，他会自动记录所有更改，所以如果你在命令行里打了一个 git reset --hard，那就是你用这个功能的时候了。你可以选择 Revert，Create Patch，或者手动回退每一处更改。

它还支持从选区查看历史，而且它的 VCS 也有这个功能，你可以查看单个文件或文件夹的历史，或者查看一小片代码片段的更改历史，简单的说，想怎么查就怎么查。VSCode 要想支持这个功能的话，装插件。

同学们，这就是开源车和特斯拉的区别。

代码重构

在 WebStorm 的一级文件菜单里你找不到 Delete 和 Rename 这类选项，它们都被收纳到了二级菜单里，这个二级菜单叫 Refactor。

你可以看到有一个功能叫 Safe Delete。它是干什么的呢？它会在删除文件之前帮你检查有哪个地方用到了这个文件，准确性没到 100% 也有 99% 了吧。剩下那 1% 多半是某个输出文件夹里的某个文件引用了输出文件夹里的同名文件。

这个功能引用的是 WebStorm 的重构功能。它不仅会搜索变量，还会搜索注释，字符串，还可以包括文本常量和其他非代码文件。

VSCode 用户建议装插件。总结

所以我们可以看出，WebStorm 是几乎不需要自己装插件的，开箱即用。当然这不代表 WebStorm 不需要插件，WebStorm 安装的时候会自带 50 多个插件，其中包括 git 支持、Markdown 支持等等最基本的东西。这些插件的稳定性都是有买许可证的钱在背后推动的，而 VSCode 的话，插件基本上都是社区插件。

我们已经说了这么多，那可能有 VSCode 用户会说了，启动一次 VSCode，几秒钟过去了，启动一次 WebStorm，一分钟过去了。那你也可以试试看如果给 VSCode 装插件装到 WebStorm 的水平，启动一下 VSCode 得要几分钟。

所以说，何时选择 VSCode 呢？

我这里总结了几条经验。

开始使用 WebStorm备份你的设置远程开发编辑器自带快捷键我的快捷键方案

不一定适合每个人。

向右移动同理。关闭窗口 Ctrl + W切换窗口 Ctrl + 数字键, Alt + 方向键移动窗口 Alt + .垂直分割窗口 Alt + , Alt + F24在分割窗口间切换 Alt + [, Alt + ]重构代码 Alt + ;, Alt + F24使用 ESLint 重构代码 Alt + '我的插件方案

WebStorm 真的不需要装很多插件。

我只装了 5 个插件，其中有 3 个是主题和外观插件。

Git Branch Cleaner