blog
blog copied to clipboard
lmk123
于是我从 WebStorm 转向了 VS Code
自大学以来，我换了不少编辑器。一开始学习 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 的时候，一般要经过下面这些步骤：
- 打开 WebStorm，这一阶段差不多要 7 秒。
- 选择上面提到的测试项目并打开，需要 3 秒。
- 打开项目之后，WebStorm 会索引代码，这段时间内它的一些功能（比如代码提示与代码着色）还没有准备好，所以我一般会等索引完成之后再开始写代码。这一阶段根据项目大小需要的时间也不固定，但对于测试项目，这一过程差不多要 10 多秒——如果你没有将
node_modules文件夹 Mark Directory as Excluded，那么需要的时间会更长。
所以从我打开 WebStorm 到它真的可以用的这段时间，已经快有半分钟了！在使用 VS Code 之前，我从来没觉得这段时间很长。
那么同样的项目，VS Code 打开需要多长时间？答案是 4 秒。这是在我安装了 19 个扩展的情况下得出的结论，而这 19 个扩展基本涵盖了 WebStorm 中我用得到的功能。
我仔细观察了一下为什么 VS Code 相对于 WebStorm 会快很多：
- 在 MacOS 中，直接用两个手指点击 VS Code 的图标就能展开最近打开过的项目，而 WebStorm 要先打开一个选择界面。
- 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 好的方面：
- 就像上面提到的，WebStorm 有很多内置的官方维护的插件，能有效避免用户自行挑选第三方插件。
- 不能否认，WebStorm 确实功能齐全，而有一些功能并不是 VS Code 的插件能取代的。让我个人感觉最强烈的一点就是 WebStorm 内置的 Git 集成要比 VS Code 好太多，即使安装了好几个 VS Code 的 Git 相关插件，也比不过 WebStorm 内置的 Git 功能。
- ……想了想似乎就没有更多了 :joy:
我的建议是，如果你不喜欢折腾、更喜欢使用纯 GUI 方式写代码，WebStorm 无疑更适合你，使用 VS Code 的时候，你可能得学一些 Git 命令来弥补 VS Code 在 Git 集成功能方面的不足；如果你更看中 VS Code 的轻量，并且也愿意付出时间去适应、安装插件，那 VS Code 会比较合你的胃口。
最后，欢迎你留下自己的看法 ;)
感谢分享~速度体验和核心理念特别好。我一直在用 WebStorm，上次在 chat 群里面讨论到 IDE 的事情，因为换 IDE 还是一个成本比较高的事情，想试试 VSCode 但我一直没有做。不过倒是产出了一个 checklist，可供换 IDE 的时候参考，里面有几个点，不知道楼主可否分享下这些方面试用 VSCode 的心得~
- 极简、无干扰、好看的界面
- 可配置的全键盘支持
- 丰富的插件系统，其中 Git 和 Terminal 插件似乎是必须
- 最常用的快捷键，如自动补全、文件导航、自动导包、全局搜索、进入方法、前进后退、live templates 等
- 特色功能
上面是我的界面，简明的界面可以避免分散注意力在多余的元素上，没有 toolbar / status bar / navigation bar / tool buttons，只有行号和代码。同时，没了 GUI，快捷键系统就必须跟上。所以比较感兴趣全键盘、快捷键支持、插件系统这一块，以及 VSCode 有哪些特色的功能和体验，楼主可否分享下使用体验。谢谢啦。
楼下补充得真详细。产品定位、LSP API 很有启发。感谢分享，没有其他独立问题就不再单独回复了。
我来补充一点， 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
- 界面颜值还是挺高的，并且第三方主题丰富
- 键盘快捷键可以通过插件切换到 VIM、Sublime、IntelliJ、VS、Eclipse 等不同的键位布局，如果想只通过键盘完成所有功能，VIM 插件应该是个不错的选择
- 已内置 Terminal，并且 Windows 下可以自由切换成 cmd、powershell、git bash、wsl，macOS/Linux 下可以自由切换 bash、zsh、fish。Git 功能 VS Code 已内置一部分，结合插件
Git Lens应该功能相当全了。 - 所有功能的快捷键都可以自定义
- VS Code 自带 Zen Mode，可以隐去所有多余界面，只留代码
调试功能也基本不会用到😂 都通过其他的方式消化了，基本只有调调生命周期方法的时候会打个 log：
- 逻辑代码：通过测试来验证输入输出
- 验证点正则表达式或 lodash 什么的：直接打开 node 控制台验证
@agileago 没错，VS Code 的智能提示体验太差了，这点我忘了在文章里提到了，但是，WebStorm 的智能提示也没有好太多，如果没有用 TypeScript，它会索引所有代码，收集项目里所有的变量名，然后在你输入匹配的字符时将所有匹配项全显示出来。
@git-issue 正好相反，我觉得 WebStorm 里的调试功能比 VS Code 要好用一些 😂
@izee WebStorm 已经内置了这个插件了，但是这个插件没法支持 TypeScript，也没法正确提示 this 的属性与方法，就像我在文中说过的那样。
最近也在用VSCode写vue，那么问来了，点一个class的字符串，不会跳转到对应 的style里，点一个方法 不会跳转到方法实现那里去，求帮助
@agileago 本来想自己写个VSCode 插件跳转的，结果折腾了一晚上，太麻烦了，还是期待有对应的插件吧，不然回归Webstorm是必然啊
@lmk123 你看到一个方法，想看下怎么实现的或者想修改这个方法，在webstorm里点击一下这个方法的字符串就能跳转到方法实现那里去，VSCode目前，只能自己复制一个这个方法名，搜索，command g跳转到下一个字符串，才能定位到这个方法实现
@songxing10000 VS Code 确实不支持 JavaScript 的方法跳转，但是它支持 TypeScript 的，而我一直都写 TypeScript 所以没太大问题。
WebStorm 的做法其实跟全局搜索差不多，如果有多个同名的方法，你点击方法名之后会展示一个列表给你选择要跳到哪个方法去，并不能精准定位到你点击的这个方法的实现位置。
我还是换回webstorm吧，vue文件里的js方法不能跳转就算了，现在连 template 也不能正常识别了。。
弱智的一笔，改成 > 或者 <= 就没问题
说到这个，我个人有个理念是这样。性能这个事情，可以用钱解决的问题就用钱解决就好了。比如现在对我来说，我觉得追求效率的一个开发配置应该是这样：
- [ ] 顶配的垃圾桶 - 8核 Xeon E5 CPU + 16GB DDR3，解决大部分性能和内存问题，让编程飞起来
- [x] 4K 显示器 - 更大的 IDE 屏幕空间，可以放一个测试的 panel 一直 watch 改了代码就跑、todolist，工作流顺畅到极致
- [x] HHKB 键盘 - 程序员友好的键盘布局，所有操作都在键盘主键区完成，提升效率
还要省钱买垃圾桶…
webstorm => vscode换了半年没换过来，说下 webstorm
缺点：
- 新建
node_modules文件夹会突然索引卡死 - 收费
- 自带功能太多，臃肿吃内存（
java开发的ide貌似都这样）
优点：
- 自带
vcs功能，无论是git还是svn都用的非常舒心（vscode自带的感觉比不上） - 自带
terminal功能无论是windows还是mac都很好用（vscode不支持tab模式，文件夹拖进去不能进入） - 自带
deployment功能非常逆天，无论terminal，ftp，sftp，部署，运维，文件同步很方便了（vscode要找插件，而且找了遍，没发现这些功能都有的） - 自带的test rest client功能，测试接口很方便（vscode没发现）
- 全局快速搜索替换，定位
symbol（方法，变量）神操作（vscode检索比较慢，暂时没发现定位symbol的方式） - 自带的插件就对
vue，angular，react，nodejs有很好支持
强烈推荐 WebStorm
如果你像我一样
。
。
。
。
电脑是32g内存的话。。。
（我是黑苹果 i5-8500 + 16g * 2 芝奇 3200）
说 vscode 不能实现 js 方法跳转，我不服
vscode跳转定义，会索引搜索，要耗时的，而且js代码跳转的位置并不准确。
你现在用的什么编辑器，我是超喜欢vscode， 可是现在就一个很常用的功能不能用， vue中 变量以及方法无法跳转~~ 超级蛋疼，其他都调好了
@heiliuer 你现在用的什么编辑器，我是超喜欢vscode， 可是现在就一个很常用的功能不能用， vue中 变量以及方法无法跳转~~ 超级蛋疼，其他都调好了
关于WebStorm 占内存的问题，也是有解决方案的。在不需要索引的文件夹上，右键 Mark directory as 选择Exclude，就不会对该文件夹进行索引。 自己测试，只要取消不必要的文件夹索引，比如node_modules,bower_components 这些，真的可以减少很多内存的占用，我使用的情况基本都是2g左右内存的占用（虽然不能和vscode比）。 VSCode 轻量级确实让人垂涎，但是js没有跳转，还怎么用。
@agileago 我们都用Weex近两年了，挺好的，Flutter很多东西还不成熟，上次运行了其demo感觉流畅度还不如Weex呢，不过我看好Flutter
各位，我又回归 WebStorm 了 😂
顺便分享一波我的 WebStorm 设置：https://github.com/lmk123/WebStorm-Settings
各位用webstorm的大佬们，借楼请问有没有用Emacs/Mac OSX keymap的？最近试了一下好像jetbrain全家桶在我win10/ubuntu上，每当按ctrl-n的时候都会卡住报错搞得想放弃了.....去google了半天也没看出个所以来......不知道大家有没有遇到的，这种属于得等他们修复的bug么？
我用的 webstorm v2017 版 对冲突文件处理不太友好,有没啥别的插件支持
这个的话，我一直直接在文本上解决冲突。这种冲突一般不是很复杂，用图形化界面还要点几下，不必要。如果冲突一般很多很复杂，说明开发流程应该改善，要经常更新主分支的代码、经常把代码合并回主分支。
各位用webstorm的大佬们，借楼请问有没有用Emacs/Mac OSX keymap的？最近试了一下好像jetbrain全家桶在我win10/ubuntu上，每当按ctrl-n的时候都会卡住报错搞得想放弃了.....去google了半天也没看出个所以来......不知道大家有没有遇到的，这种属于得等他们修复的bug么？
不知道设置里面的“Invalid and Restart”有用没？
说 vscode 不能实现 js 方法跳转，我不服
你现在用的什么编辑器，我是超喜欢vscode， 可是现在就一个很常用的功能不能用， vue中 变量以及方法无法跳转~~ 超级蛋疼，其他都调好了
有段时间也是被不能跳转折磨的不行，后来偶尔返现option(alt)+左键可以
各位，我又回归 WebStorm 了 😂
顺便分享一波我的 WebStorm 设置：https://github.com/lmk123/WebStorm-Settings
我就知道 你会用回ws的，
若干年以后，你们统统都会回到 webstorm。折腾这个没啥意思，就像一开始用 Android 的，各种刷机，尝试各种 rom，最后都搞不动啦。不如花点时间搭建个好的开发平台，升级下硬件软件等，这对开发效率的提升完爆一切花拳绣腿
@agileago 我们都用Weex近两年了，挺好的，Flutter很多东西还不成熟，上次运行了其demo感觉流畅度还不如Weex呢，不过我看好Flutter
demo默认是debug模式，如果你试试release模式，你会发现新天地的。 release的Flutter性能，基本上是所有跨端UI框架中最快的了，跟Native相比也是毫不逊色。
各位，我又回归 WebStorm 了 😂
顺便分享一波我的 WebStorm 设置：https://github.com/lmk123/WebStorm-Settings
非常感谢作者的这篇文章加这段回复, 成功阻止了我瞎折腾的决心. 今天把phpstorm从2019.2.5 更新到2019.3配置和主题全部丢失了, 即使从远程账户更新也无效, 替换2019.2.5的配置文件也不行, 转眼一想整个团队都在用VSCode就我一个人在用phpstorm. 还要每年交$53, 还不如换了吧. 这篇文章从开头看到结尾 大概的心情是.... 我下定决心要换VSCode -> 要不要换? -> 算了吧还是继续交钱吧
我从webstorm转到vscode是因为卡顿问题，有时候新加一个node_modules会导致整个系统卡死半个小时。现在用vscode+prettier爽的不要不要的，另外我想项目几乎都是typescript。在webstorm上配置vue+ts，我搞了半天也没搞定。相反在vscode上就很轻松。代码提示和跳转也很准确。tsx的写法让模版的代码提示和跳转也很智能，我现在找不到重回webstorm的理由了。
vscode拓展性好、轻量级，非常适合作为编辑器，但是它不够智能。 webstorm非常智能，拥有强大的索引系统，还有我非常看中的一点是代码导航功能，只可以在代码之间快速穿梭而不需要频繁点击页面查找，简直是看源码利器。 总结：其实两者出发点不同，一个是vscode以编辑器为根基，依赖强大github开源社区作为插件市场实现强大拓展性，来无限接近IDE;一个是商业IDE为根基，原生提供统一且强大的基本功能（统一这点很重要，个人不是很喜欢vscode的非常不统一的插件系统）。
然后我觉得过一段时间你就会换回webstorm的，因为ws的智能提示完爆任何编辑器
才刚试vscode，真的很多补全的插件都么得，而且找插件也难得找
我真的觉得VScode 的git太难用了，我裂开。WebStorm的git真好用的。
这个真的很赞同
我使用webstorm最主要的原因就是离不开它的git
