于是我从 WebStorm 转向了 VS Code

[lmk123]

自大学以来，我换了不少编辑器。一开始学习 C# 的时候，用的是 Visual Studio，这款编辑器确实非常好用，即使是用来写 JavaScript 也有很全的代码提示。

后来我决定专攻前端开发，这时候 Visual Studio 就显得太过于笨重了。在学校老师的建议下，我开始用 Dreamweaver，老师极力推荐它的原因是它的「所见即所得」特性——不需要自己写代码，只需要拖一些控件进去，它就会自动帮你生成页面……可是它生成的代码太差劲了，我从来没拖过控件，它的代码提示也不如 Visual Studio 全面，时不时的还会卡顿。

再后来，我在网友的推荐下开始用 WebStorm，简直爱不释手，从此再也没有换过编辑器——

直到半个月前，我试了一下 VS Code。

让我决定去尝试一下 VS Code 原因倒不是因为这个编辑器本身，而是因为它的一个插件——Vetur，由 Vue.js 团队开发，用来给 *.vue 文件提供代码提示与 TypeScript 支持。用过 Vue.js 的同学都知道，Vue.js 配置项里面的方法的 this 其实指向这个 Vue 实例本身，但是 WebStorm（我想其他编辑器也一样）只会把方法里的 this 识别成这个方法所在的对象，所以编辑器不能正确的提供 this 的代码提示。

在尝试了 VS Code 之后，我再一次体会到了当时发现 WebStorm 的时候的心情——爱不释手、给它折腾了一堆插件、想立刻写一些代码来体验一下这个编辑器，最后，我就停不下来了 😂

我想从我的使用角度解释一下为什么我最终从 WebStorm 转向了 VS Code，也许能给看到这篇文章的朋友们一点参考。

VS Code 最让我看中的特点就是轻量——它的轻量体现在它的启动速度、内存占用和功能。

注意：我是在 2015 年款 MacBook Pro (8GB 内存)上对这两款编辑器进行比较的，可能与你的感受不太一样。

启动速度

VS Code 启动的时候非常快——这里的非常快是相对于 WebStorm 而言的。我使用了同一个中等大小的项目（下文统一称之为测试项目）做测试，这个项目使用了 TypeScript 和 Vue.js，大概有 30 个文件。

在使用 WebStorm 的时候，一般要经过下面这些步骤：

1. 打开 WebStorm，这一阶段差不多要 7 秒。
2. 选择上面提到的测试项目并打开，需要 3 秒。
3. 打开项目之后，WebStorm 会索引代码，这段时间内它的一些功能（比如代码提示与代码着色）还没有准备好，所以我一般会等索引完成之后再开始写代码。这一阶段根据项目大小需要的时间也不固定，但对于测试项目，这一过程差不多要 10 多秒——如果你没有将 node_modules 文件夹 Mark Directory as Excluded，那么需要的时间会更长。

所以从我打开 WebStorm 到它真的可以用的这段时间，已经快有半分钟了！在使用 VS Code 之前，我从来没觉得这段时间很长。

那么同样的项目，VS Code 打开需要多长时间？答案是 4 秒。这是在我安装了 19 个扩展的情况下得出的结论，而这 19 个扩展基本涵盖了 WebStorm 中我用得到的功能。

我仔细观察了一下为什么 VS Code 相对于 WebStorm 会快很多：

1. 在 MacOS 中，直接用两个手指点击 VS Code 的图标就能展开最近打开过的项目，而 WebStorm 要先打开一个选择界面。
2. VS Code 没有那么明显的索引代码的过程。也许它根本就没有索引代码这一过程，又或者，它在后台偷偷索引但没有提示给用户知道，不过当我打开文件的时候，代码提示和代码着色都是已经准备好了的。有一些扩展会在第一次使用时花费一段时间索引你的项目代码，但这一过程在下次打开项目时会非常快，所以这段时间没有计入 VS Code 的打开时间中。

内存占用

我经常会需要同时开启两三个项目，然后再开一些其他软件（听歌的、微信、Chrome 之类的）。如果我使用 WebStorm，时间一长，8GB 内存就会被用的只剩两三百兆，我不得不用 CleanMyMac 清理我的内存，不然电脑会变得反应迟钝。

同样的情况换成是 VS Code 就没有这个问题。我知道这一感受非常主观，所以在我写这片文章的时候，我尝试分别用这两个编辑器同时打开三个相同的项目，但它们的内存占用从数字上看是差不多的——都是 1.6GB 左右。有一点不同的是，VS Code 的进程本身占用内存很少，但它有很多个 Code Helper 进程，我每关掉一个项目，Code Helper 的数量和它们占用的内存都会相应减少。

上面的数据仅仅只是打开了三个项目的情况，如果后面多使用一段时间，WebStrom 的内存占用会越来越多——这也跟你使用了 WebStorm 中的多少功能相关。按照我这半个月来的使用体验，WebStorm 会让我觉得内存不够用，而 VS Code 就没有。

当然，这些都只是我的主观感受，由于没有足够的数据支持，你可以认为它们在内存占用方面打了个平手。

功能

一个编辑器的功能是越多越好还是越少越好？功能多当然很不错，但并不是所有人都需要一些功能，而且多余的功能会导致编辑器更加笨重。

WebStorm 和 VS Code 都提供了插件系统，但仅从核心大小来看的话，VS Code 无疑要比 WebStorm 轻量许多——这一点你从它们的设置里就可以看出来了。

WebStorm 的插件系统更像是锦上添花，因为它已经内置了很多很有用并且也很好用的功能了。WebStorm
还内置了很多官方维护的插件，但大部分我都不需要，我还得自己去关闭一些。所以，第三方插件我一个也没装过。

反观 VS Code，我觉得它的插件系统才是它的核心功能——VS Code 本身缺少很多功能，如果你不安装一些插件，基本上很难愉快的写代码。

从个人的角度来看，我非常喜欢 VS Code 的做法——我在写一些 JavaScript 项目的时候也是这么想的——核心应该尽可能的小，然后通过插件的方式来补充功能以适应不同的使用场景。Koa 和 Chrome 浏览器就是使用插件扩充功能的例子。

但是，依赖于社区开发的插件就会出现一个问题——插件的质量总是参差不齐的，插件的维护者也不一定会长时间维护下去，所以在给 VS Code 安装插件的时候我花了很长时间尝试了很多个同样功能的不同插件，不过这个痛苦的过程也只是一次性的。

对于未来，我希望 VS Code 团队能像 WebStorm 那样有一些官方维护的高质量插件，避免用户在选择插件的时候眼花缭乱。不过，目前 VS Code 肯定是没有多余的精力做这些的，所以作为用户的我们也只能自己不断的尝试了。

总结

本文从三个方面阐述了我个人认为 VS Code 对比 WebStorm 的优势，但实际上 WebStorm 也并不是没有比 VS Code 好的方面：

1. 就像上面提到的，WebStorm 有很多内置的官方维护的插件，能有效避免用户自行挑选第三方插件。
2. 不能否认，WebStorm 确实功能齐全，而有一些功能并不是 VS Code 的插件能取代的。让我个人感觉最强烈的一点就是 WebStorm 内置的 Git 集成要比 VS Code 好太多，即使安装了好几个 VS Code 的 Git 相关插件，也比不过 WebStorm 内置的 Git 功能。
3. ……想了想似乎就没有更多了 😂

我的建议是，如果你不喜欢折腾、更喜欢使用纯 GUI 方式写代码，WebStorm 无疑更适合你，使用 VS Code 的时候，你可能得学一些 Git 命令来弥补 VS Code 在 Git 集成功能方面的不足；如果你更看中 VS Code 的轻量，并且也愿意付出时间去适应、安装插件，那 VS Code 会比较合你的胃口。

最后，欢迎你留下自己的看法 ;)

[EthanLin-TWer]

感谢分享~速度体验和核心理念特别好。我一直在用 WebStorm，上次在 chat 群里面讨论到 IDE 的事情，因为换 IDE 还是一个成本比较高的事情，想试试 VSCode 但我一直没有做。不过倒是产出了一个 checklist，可供换 IDE 的时候参考，里面有几个点，不知道楼主可否分享下这些方面试用 VSCode 的心得~

• 极简、无干扰、好看的界面
• 可配置的全键盘支持
• 丰富的插件系统，其中 Git 和 Terminal 插件似乎是必须
• 最常用的快捷键，如自动补全、文件导航、自动导包、全局搜索、进入方法、前进后退、live templates 等
• 特色功能

上面是我的界面，简明的界面可以避免分散注意力在多余的元素上，没有 toolbar / status bar / navigation bar / tool buttons，只有行号和代码。同时，没了 GUI，快捷键系统就必须跟上。所以比较感兴趣全键盘、快捷键支持、插件系统这一块，以及 VSCode 有哪些特色的功能和体验，楼主可否分享下使用体验。谢谢啦。

---

楼下补充得真详细。产品定位、LSP API 很有启发。感谢分享，没有其他独立问题就不再单独回复了。

[hronro]

我来补充一点， VS Code 的定位其实是 code editor，并不是 IDE，更准确的说，可能是介于 code editor 和 IDE 之间的一种产品形态。VS Code 本身的设计可能更趋于 code editor 一些，但会提供很多基于 Language Server Protocol (LSP) 的 API，使其能够很方便的扩展到 IDE 级别的功能。VS Code 本身内置了 JS/TS 的 LSP，而其他语言的 LSP，就需要用户自己安装插件来获取了。像 Vetur 这个插件，其实也就是个 LSP，会将 vue 文件里面的 html/css/js 分别交由各自语言的 LSP 处理，这一点在 Vetur 的项目主页也是有说明的。
另外 VS Code 对 JS/TS 的智能提示，并不需要通过索引代码来完成，而是通过 TypeScript 的类型系统来完成的。这个东西快是快，但也有一些缺点，比如你用了某个很小众的库，而这个库并没有 TypeScript 的类的申明文件，那就没有办法对这个库做智能提示了。同理，如果在你自己写的 JS 代码中，如果某些变量不能被 TypeScript 的类型推导系统推导出类型的话，智能提示也会失效。而 WebStorm 里面的情况就要好很多。

@linesh-simplicity

1. 界面颜值还是挺高的，并且第三方主题丰富
2. 键盘快捷键可以通过插件切换到 VIM、Sublime、IntelliJ、VS、Eclipse 等不同的键位布局，如果想只通过键盘完成所有功能，VIM 插件应该是个不错的选择
3. 已内置 Terminal，并且 Windows 下可以自由切换成 cmd、powershell、git bash、wsl，macOS/Linux 下可以自由切换 bash、zsh、fish。Git 功能 VS Code 已内置一部分，结合插件 Git Lens 应该功能相当全了。
4. 所有功能的快捷键都可以自定义
5. VS Code 自带 Zen Mode，可以隐去所有多余界面，只留代码

[agileago]

然后我觉得过一段时间你就会换回webstorm的，因为ws的智能提示完爆任何编辑器

[git-issue]

vscode 比 webstorm 还有抢很多的是 调试。。。尤其是 node

[EthanLin-TWer]

调试功能也基本不会用到😂 都通过其他的方式消化了，基本只有调调生命周期方法的时候会打个 log：

• 逻辑代码：通过测试来验证输入输出
• 验证点正则表达式或 lodash 什么的：直接打开 node 控制台验证

[lmk123]

@agileago 没错，VS Code 的智能提示体验太差了，这点我忘了在文章里提到了，但是，WebStorm 的智能提示也没有好太多，如果没有用 TypeScript，它会索引所有代码，收集项目里所有的变量名，然后在你输入匹配的字符时将所有匹配项全显示出来。

@git-issue 正好相反，我觉得 WebStorm 里的调试功能比 VS Code 要好用一些 😂

[izee]

https://github.com/JetBrains/intellij-plugins/tree/master/vuejs

[lmk123]

@izee WebStorm 已经内置了这个插件了，但是这个插件没法支持 TypeScript，也没法正确提示 this 的属性与方法，就像我在文中说过的那样。

[yyman001]

vs的提示包含太多内容了，有点不够好用，而且你没办法关闭那些无用的提示，无从下手。

[lmk123]

@yyman001 赞同。但是在 WebStorm 中，即使开启了「强类型检测」，也还是有很多无用的提示。

[qlie]

博主让我又增长了见识，原来还能用issue来做博客。

• 学到了

[songxing10000]

最近也在用VSCode写vue，那么问来了，点一个class的字符串，不会跳转到对应 的style里，点一个方法 不会跳转到方法实现那里去，求帮助

[agileago]

@songxing10000 没准博主已经从vscode转到webstorm了，期待下一篇我为什么从vscode转到webstorm

[songxing10000]

@agileago 本来想自己写个VSCode 插件跳转的，结果折腾了一晚上，太麻烦了，还是期待有对应的插件吧，不然回归Webstorm是必然啊

[lmk123]

@songxing10000 平常没有用到过这个功能，这个功能对我来说无关紧要所以没觉得有啥不妥 😂

@agileago 我仍然在用 VS Code

[songxing10000]

@lmk123 你看到一个方法，想看下怎么实现的或者想修改这个方法，在webstorm里点击一下这个方法的字符串就能跳转到方法实现那里去，VSCode目前，只能自己复制一个这个方法名，搜索，command g跳转到下一个字符串，才能定位到这个方法实现

[lmk123]

@songxing10000 VS Code 确实不支持 JavaScript 的方法跳转，但是它支持 TypeScript 的，而我一直都写 TypeScript 所以没太大问题。

WebStorm 的做法其实跟全局搜索差不多，如果有多个同名的方法，你点击方法名之后会展示一个列表给你选择要跳到哪个方法去，并不能精准定位到你点击的这个方法的实现位置。

[hronro]

@songxing10000 @lmk123
vs code 可以实现 js 的方法跳转啊，而且是精准定位，不是全局搜索

[ghost]

说 vscode 不能实现 js 方法跳转，我不服

[songxing10000]

@liuliangsir 一开始就说的vue，没有说过JS

[kinglisky]

哈哈，关于编辑器的撕逼就多了，vs code 大法好！

[keepeye]

我还是换回webstorm吧，vue文件里的js方法不能跳转就算了，现在连 template 也不能正常识别了。。

弱智的一笔，改成 > 或者 <= 就没问题

[gxy01]

蛤，启动速度和内存到你这里居然变成了优势。
每个人对同一个事物的体会果然会因为自己的经历不同啊

[EthanLin-TWer]

说到这个，我个人有个理念是这样。性能这个事情，可以用钱解决的问题就用钱解决就好了。比如现在对我来说，我觉得追求效率的一个开发配置应该是这样：

• 顶配的垃圾桶 - 8核 Xeon E5 CPU + 16GB DDR3，解决大部分性能和内存问题，让编程飞起来
• 4K 显示器 - 更大的 IDE 屏幕空间，可以放一个测试的 panel 一直 watch 改了代码就跑、todolist，工作流顺畅到极致
• HHKB 键盘 - 程序员友好的键盘布局，所有操作都在键盘主键区完成，提升效率

还要省钱买垃圾桶…

[songxing10000]

@linesh-simplicity 同意，注意效率的人才是真正热爱程序的人

[wl05]

算了，还是抱紧webStorm 吧，老了折腾不动了

[songxing10000]

由于写Weex没有跳转，于是我再次从 VS Code 转向了 WebStorm

[agileago]

@songxing10000 Weex还活着呢？现在不都是flutter了

[songxing10000]

@agileago 我们都用Weex近两年了，挺好的，Flutter很多东西还不成熟，上次运行了其demo感觉流畅度还不如Weex呢，不过我看好Flutter

[lmk123]

各位，我又回归 WebStorm 了 😂

顺便分享一波我的 WebStorm 设置：https://github.com/lmk123/WebStorm-Settings

[yyman001]

我用的 webstorm v2017 版 对冲突文件处理不太友好,有没啥别的插件支持

[seraphlive]

各位用webstorm的大佬们，借楼请问有没有用Emacs/Mac OSX keymap的？最近试了一下好像jetbrain全家桶在我win10/ubuntu上，每当按ctrl-n的时候都会卡住报错搞得想放弃了.....去google了半天也没看出个所以来......不知道大家有没有遇到的，这种属于得等他们修复的bug么？

[EthanLin-TWer]

我用的 webstorm v2017 版 对冲突文件处理不太友好,有没啥别的插件支持

这个的话，我一直直接在文本上解决冲突。这种冲突一般不是很复杂，用图形化界面还要点几下，不必要。如果冲突一般很多很复杂，说明开发流程应该改善，要经常更新主分支的代码、经常把代码合并回主分支。

各位用webstorm的大佬们，借楼请问有没有用Emacs/Mac OSX keymap的？最近试了一下好像jetbrain全家桶在我win10/ubuntu上，每当按ctrl-n的时候都会卡住报错搞得想放弃了.....去google了半天也没看出个所以来......不知道大家有没有遇到的，这种属于得等他们修复的bug么？

不知道设置里面的“Invalid and Restart”有用没？

[seraphlive]

不知道设置里面的“Invalid and Restart”有用没？

我还没试这个，然后也不知道为啥自己就好了，很神奇......谢谢回复哈。

[bestkp]

说 vscode 不能实现 js 方法跳转，我不服

vscode跳转定义，会索引搜索，要耗时的，而且js代码跳转的位置并不准确。

你现在用的什么编辑器，我是超喜欢vscode， 可是现在就一个很常用的功能不能用， vue中 变量以及方法无法跳转~~ 超级蛋疼，其他都调好了

有段时间也是被不能跳转折磨的不行，后来偶尔返现option(alt)+左键可以

[lyon007]

各位，我又回归 WebStorm 了 😂

顺便分享一波我的 WebStorm 设置：https://github.com/lmk123/WebStorm-Settings

我就知道 你会用回ws的，

[wl05]

年轻人玩得真花

[EthanLin-TWer]

用WebStorm TDD FizzBuzz 两部分需求，只需要92秒，VSCode党也整一个分享分享呗？友好交流一下。

[Castleeee]

只有4G内存的我，转向了VSCODE.不过我还是觉得Webstorm好用，吃内存不是白吃的

[songxing10000]

有大佬做出来了，vscode weex支持方法跳转 class跳转得装一个插件，于是我又从 WebStorm 转向了 VS Code

[kylesean]

若干年以后，你们统统都会回到 webstorm。折腾这个没啥意思，就像一开始用 Android 的，各种刷机，尝试各种 rom，最后都搞不动啦。不如花点时间搭建个好的开发平台，升级下硬件软件等，这对开发效率的提升完爆一切花拳绣腿

[xingchenxuanfeng]

@agileago 我们都用Weex近两年了，挺好的，Flutter很多东西还不成熟，上次运行了其demo感觉流畅度还不如Weex呢，不过我看好Flutter

demo默认是debug模式，如果你试试release模式，你会发现新天地的。
release的Flutter性能，基本上是所有跨端UI框架中最快的了，跟Native相比也是毫不逊色。

[carl-jin]

各位，我又回归 WebStorm 了 😂

顺便分享一波我的 WebStorm 设置：https://github.com/lmk123/WebStorm-Settings

非常感谢作者的这篇文章加这段回复, 成功阻止了我瞎折腾的决心.
今天把phpstorm从2019.2.5 更新到2019.3配置和主题全部丢失了, 即使从远程账户更新也无效, 替换2019.2.5的配置文件也不行, 转眼一想整个团队都在用VSCode就我一个人在用phpstorm. 还要每年交$53, 还不如换了吧. 这篇文章从开头看到结尾 大概的心情是.... 我下定决心要换VSCode -> 要不要换? -> 算了吧还是继续交钱吧

[xiongxt]

我从webstorm转到vscode是因为卡顿问题，有时候新加一个node_modules会导致整个系统卡死半个小时。现在用vscode+prettier爽的不要不要的，另外我想项目几乎都是typescript。在webstorm上配置vue+ts，我搞了半天也没搞定。相反在vscode上就很轻松。代码提示和跳转也很准确。tsx的写法让模版的代码提示和跳转也很智能，我现在找不到重回webstorm的理由了。

[chaochis]

我想问一下，楼主是不是已经用回webstorm了

[CabelChen]

vscode拓展性好、轻量级，非常适合作为编辑器，但是它不够智能。
webstorm非常智能，拥有强大的索引系统，还有我非常看中的一点是代码导航功能，只可以在代码之间快速穿梭而不需要频繁点击页面查找，简直是看源码利器。
总结：其实两者出发点不同，一个是vscode以编辑器为根基，依赖强大github开源社区作为插件市场实现强大拓展性，来无限接近IDE;一个是商业IDE为根基，原生提供统一且强大的基本功能（统一这点很重要，个人不是很喜欢vscode的非常不统一的插件系统）。

[tesla4321]

vs写c#如果没有jb提供的插件也是很难受的，代码补全很弱，不能自动using，切换出去再回来就不能继续提示了，要删掉重来，括号补全也很弱。

[ccwq]

航母和快艇的区别，ide vs 编辑器。两个不同层面的东西，功能上有很多重合的，根据项目类型和个人习惯选择吧

[chengwb53]

然后我觉得过一段时间你就会换回webstorm的，因为ws的智能提示完爆任何编辑器

才刚试vscode，真的很多补全的插件都么得，而且找插件也难得找

[carl-jin]

年轻人, BUG改完了吗? 何必瞎折腾呢, 继续交钱吧..

[helloCx]

我真的觉得VScode 的git太难用了，我裂开。WebStorm的git真好用的。

[gdoudeng]

我真的觉得VScode 的git太难用了，我裂开。WebStorm的git真好用的。

这个真的很赞同

[sdz123]

我真的觉得VScode 的git太难用了，我裂开。WebStorm的git真好用的。

这个真的很赞同

我使用webstorm最主要的原因就是离不开它的git

[mingbai2006]

来挖个坟，现在vs code又多了一个特别大的优点：无敌的远程开发体验，无论是连接到本机的WSL，还是直接连接到远程的Linux，开发体验真的太好了。我现在就是申请了一个公司的虚拟机来跑vs code远程服务，本地的vs code客户端一身轻松，脏活累活都扔给服务器，服务器的配置不够了还可以随时加配置，从此再也不用听到笔记本的风扇啸叫了，再也不用担心内存不足了，用垃圾笔记本也能流畅开发了。相对的，目前的jetbrain家的fleet还处在preview阶段基本没法用，gateway的远程开发也用过跟vs code完全没法比，总是会遇到奇奇怪怪的问题。

[skimhugo]

项目大了感觉还得 webstorm。vscode 的重构功能不敢用。webstorm 虽然也很多坑，但是还是好太多了。