作者：侑夕

其实都用，平时写 Demo 或格式化文档时用 VSCode，写项目以及阅读源码会用 WebStorm，我认为两者更多是 IDE 和 Editor 的区别，放一起比较必要性也不大；敲代码用啥只有一个条件就是你可以超级熟练使用那个工具，重点是可提高你独有的敲代码效率，有些像「君子性非异也，善假于物也」这句话表达的观点。

那么到底 WebStorm 更香在哪儿，周末花了个下午写篇文章来开一个 “历史倒车轮“，给大伙介绍一下「如何用上 WebStorm 最新正版？」「如何让 WebStorm 好用不卡？」，以及「WebStorm 香的地方在哪里？」，以下文章将单词 WebStorm 换成 IntelliJ IDEA 也合适。

如何用上 WebStorm 最新正版？

很建议初步使用的时候「用上 WebStorm 30天^[1]内免费」的福利，等到觉得好用再去考虑申请正式版本，防止造成不必要的浪费！

1. 自费去官方购买个人版

资金允许的同学可以直接上官网买个人版本^[2]，首年 59 美元，后面年续会便宜不少(59->47->35)，假如不更新的话还可一直用下去不续费。同时对于个人版官方说^[3]同样支持用于商业项目，只需要保证一个人用即可。

2. 通过开源项目申请一年的使用

讲道理，JetBrains 公司真的很良心，提供了开源开发许可证福利，让大伙免费用他家软件进行开源贡献，一般项目维护在 3 个月以上大概率可通过。可从此入口 免费许可证计划^[4] 进入申请，也可参考 这篇教程^[5]；除去开源申请外，还可试试学术许可^[6]、用户组^[7]、开发者活动^[8]、开发者认可^[9]方式获取，但都「不能用于商业项目」请斟酌使用。

综上，若资金允许就买个人正式版，有些紧就用开源项目的方案。 同时 ~~不建议用淘宝购买自己邮箱授权的教育版或用 ide-eval-resetter^[10] 插件延迟试用期的灰色地带方式~~ 来开发商业项目。

如何让 WebStorm 好用不卡？

打开我 Mac 上最大的一个项目 xRender，没有插电情况下，实际的启动效果录屏 mp4

1. 安装几个常用的插件

直接 command + . 打开设置，找到 plugin，复制后在插件市场进行搜索安装：

中文语言包：讲道理编程的同学应该默认全英文，但是安装后你会一眼发现很多之前英语下“看不到“的东西。想起之前自己强迫自己苹果全家桶都用英文，坚持了 1 个月就忍不下去了，虽然看得懂，但是需要脑袋 proxy 翻译的时间，回想起来何必呢？不过看英语如看中文无需反应的同学可忽视（等到哪一天功能熟练以后其实也可以关闭中文）。
Coderpillr Theme：超级好看的一个主题，之前试过很多如 One Dark、Material Theme Ul 都不是很满意，其实最爱 Dracula Theme，但遗憾在这里不好看，刚好 Coderpillr 这个小众的很有 Dracula 风格，深得我心。
Key Promoter X：快捷键爱好者的神器，会来智能教你记住快捷键。
.ignore：自动提示你哪些文件可以被 ignore，省去新项目场景一个一个找的问题
WakaTime：需要稍微配置一下，可以将你所有敲代码的地方装上这个插件，可以很访问的统计你敲了多长时间的代码，详细见官网^[11]。

对于插件，不建议安装太多，满足使用即可，太酷炫的反而影响性能，同时也建议禁用掉一批你用不上的。

2.修改一下文字大小

主要有 3 个常用地方要修改下，可也按照个人喜好配置（截图说明^[12]）：

一是外观字体，默认有些小了，建议 .ApplesystemUIFont 16；
二是编辑器字体，推荐 JetBrains Meno 20，行高 1.16，不要连体；
三是控制台字体，推荐 JetBrains Meno 18，行高 1.14，紧凑一些，不要连体；

3. 禁止掉不用的插件

继续在 plugin 中已安装 Tab 中，对你觉得你用不上的取消勾选禁止掉一批可能用不上的，减少使用内存，我禁止了很多，其中「Code With Me」不用也可以关闭，可以在「帮助->诊断工具->分析插件内存」来看到^[13]更多可优化的空间，选择性参考如下：

4. 将默认内存设置大一些

当前占用内存，可在底部栏看到，如果没有，可以右键底栏选择打开，也可以关闭一些不用的状态显示（1）
在顶部菜单栏找到「帮助->更改内存设置」(2)，M1 很牛逼不动也行，其他的更新到 4096 即可(3)。

5. 记住和设置常用的快捷键

建议从这里开始，打开本地有 Git 发布记录的前端项目来测试，借此熟练一遍，建议在「设置->键盘映射」中，将「在 Touch Bar上显示F1、F2等键」勾选上。由于正常软件为了最大化主编辑区，操作动作都在埋在菜单内部了，导致不能所见所得从而想不到使用，记住快捷键可以让你没有想到情况下比普通用户用到多 50% 的潮流功能。

常用的一些好用快捷键，建议强迫多用最后到肌肉记住：

## 查找替换操作
shift 按两次             // 随处搜索，搜索文件、功能、代码很方便
command + f              // 当前页搜索
command + shift + f      // 全局搜索字段
command + r              // 替换当前文档
command + shift + r      // 全局替换字段
## 视图展示
command + 1              // 显示隐藏左侧文件树
command + 0              // 显示当前待提交代码，用于提交前 diff
command + 9              // 显示当前历史所有的提交记录
command + 7              // 显示当前文件的结构，特别是看 Class 时候很方便
command + 上箭头         // 跳转到导航栏
command + 点击           // 跳到代码调用位置
## 代码操作
command + option + l     // 格式化代码(常用)
shift + f6               // 使文件、标签、变量名重命名
f2, shift + f2           // 切换到上\下一个突出错误的位置
shift + 回车             // 无论在什么位置，自动跳到下一行
option + 回车            // 警告代码快速给出自动修正
command + 回车           // 跳到当前调用文件
command + delete         // 删除当前行，command + x也可以
command + d              // 复制新增一行一样的代码
command + w              // 关闭当前文件选项卡
command + /              // 注释行代码
command + b              // 跳转到变量声明处
command + shift + c      // 复制文件的路径
command + shift + [ ]    // 选项卡快速切换，很有用
command + shift + u      // 大小写自动转
command + shift + /      // 注释块代码
command + shift + +/-    // 展开/折叠 当前选中的代码块
command + shift + v      // 从剪切板里选择黏贴
## git 操作
command + k              // 填写代码提交记录
command + option + k     // 提交代码
command + option + z     // 撤销当前代码改动
command + d              // 选中两个文件进行对比，充当文件夹 diff 工具

找到「设置里的键盘映射」，进行操作文字「搜索」，设置几个有用的自定义快捷键，我习惯用左边竖直对齐的 control+shift，也可以设置自己顺手的:

打开最近：设置成 control+shift+r 或者更顺手的 command+e，recent 可以将历史开发过的项目快速打开
打开..：设置成 control+shift+o ，open 用于打开新项目，后面更多使用 command+e 快速启动
关闭项目：设置成 control+shift+w ，用于关闭当前项目的 WebStrom 窗口
终端：设置成 control+shift+i，iterm 用于打开命令行窗口，这个命令用得很多
注解：设置成 control+shift+b，blame 可以显示当前文件代码每行的开发记录
显示历史提交记录：设置成 control+shift+h，history 可以显示当前文件所有的提交改动记录
拉代码：设置成 control+shift+p，pull 当前分支最新的的 git 代码
与分支比较：设置成 control+shift+d，diff 可以将当前文件/文件夹（选择左侧的文件树）和历史分支对比，排查线上问题简直神器
切换演示模式: 设置成command+option+control+v，view 特别合适在代码演示和分享给他人看的时候的场景
切换免打扰模式: 设置成command+option+control+m，mute 特别合适想安静敲代码的时候

刚开始不习惯使用快捷键的同学，可以在顶部菜单栏、在编辑器上、底部状态栏上、左侧导航文件树上多用用右键，可以发现很多新玩意，通过 Key Promoter X 来辅助记忆

6. 可能用不上的高级设置

假如设置平时不卡，但是在 Webstorm 自带终端 npm i 以后，特别是依赖 node_modules 文件索引超多变化导致无响应的问题（好电脑一般不会），可以试试我这边调试了好多次的高级设置。

在顶部菜单找到「帮助->编辑自定义属性」，打开 idea.properties 文件，编辑如下：

idea.cycle.buffer.size=4096
idea.max.intellisense.filesize=50

继续在「帮助->编辑自定义VM选项」打开 webstorm.vmoptions 文件，编辑如下：

-ea
-server
-Xms2048m
-Xmx8192m
-Xss16m
-XX:MaxMetaspaceSize=2G
-XX:MetaspaceSize=1G
-XX:ConcGCThreads=8
-XX:ParallelGCThreads=8
-XX:NewRatio=2
-XX:ReservedCodeCacheSize=240m
-XX:+AlwaysPreTouch
-XX:+UseG1GC
-XX:+DoEscapeAnalysis
-XX:+TieredCompilationUseG1GC
-XX:SoftRefLRUPolicyMSPerMB=50
-XX:+UnlockExperimentalVMOptions
-Dsun.io.useCanonPrefixCache=false
-Djava.net.preferIPv4Stack=true
-Dsun.io.useCanonCaches=false
-XX:LargePageSizeInBytes=256m
-XX:+UseCodeCacheFlushing
-XX:+DisableExplicitGC
-XX:+ExplicitGCInvokesConcurrent
-XX:+AggressiveOpts
-XX:+CMSClassUnloadingEnabled
-XX:CMSInitiatingOccupancyFraction=60
-XX:+CMSParallelRemarkEnabled
-XX:+UseAdaptiveGCBoundary
-XX:+UseSplitVerifier
-XX:CompileThreshold=10000
-XX:+OptimizeStringConcat
-XX:+UseStringCache
-XX:+UseFastAccessorMethods
-XX:+UnlockDiagnosticVMOptions
-XX:+HeapDumpOnOutOfMemoryError
-XX:-OmitStackTraceInFastThrow
-Djdk.attach.allowAttachSelf=true
-Dkotlinx.coroutines.debug=off
-Djdk.module.illegalAccess.silent=true
-XX:+UseCompressedOops
-Dfile.encoding=UTF-8
-XX:CICompilerCount=2
-Xverify:none

最后在顶部菜单栏找到「文件->清楚缓存..」，然后重启 WebStrom 后，再试试 npm i 安装巨多依赖应该也不会卡了。

当你上面都熟练了，很建议在右下角 状态栏^[14] 中登录账号进行同步，防止设置丢失，等你用过一段时间后，你就会发现 WebStorm 慢慢的就香起来了。

WebStorm 香的地方在哪里？

1. 世界上最好用 Git 管理工具

看这一行代码是谁写的：也叫 git blame，快捷键 control+shift+b，或者在代码行数数字式右键「使用 Git Blame 注解」，就可以出现了这样效果^[15]，同时可鼠标点击下对应的名称，会出现当时那次提交的 详细记录^[16]。
提交前 CR 代码改动：很建议保持这个习惯，每次提交前都对比一下改动了下，快捷键为command + 0，这个 diff 对比超级清晰，同时很容易发现粗心的代码，这样的效果^[17]，确定无误后 command+k 填写提交记录，command+shift+k 提交代码，提交完成后 command+1 切回到代码开发。
查看当前的所有提交记录：快捷键 control+shift+h 可以查看所有的历史提交记录，假如你只想看某个文件或者某个文件夹，选中，然后快捷键即可，或者右键找到 git 里面的「显示历史记录」。
查看当前分支和主干的改动点：这个是我觉得最好用的地方，也叫「救命操作」，比如说线上出现了问题，想对比上线版本和上一个版本的全部代码改动点就用得上他了，或者你需要合并 master 之前用于最后的 CR 也是很合适的，快捷键为 control+shift+d，或者在对应的总文件夹上面点击右键找到 git 里面的「与分支比较」,就可看到如下效果，同时可以按下 F7 来看下一个改动点。

2. 很安稳的重构&优化代码的神器

文件、变量重命名会帮忙将所有的调用也修改掉：快捷键为 shift+f6，也可以直接在文件或者变量上右键找到重构，改后所有地方都会帮你自动改动。
文件修改位置后，也会自动修改调用处的引用。
文件删除前，会检测调用是否清理干掉：可以在一个文件上 command+delete 试试，会提示你哪儿还在使用。
拼写错误、语法错误、代码写得不优雅都会有提示：可以 option+回车 来按照建议修复，有时候拼写错误可能是自有单词，可将此单词存到 WebStorm 字典里面。
可以将某一块代码提炼成一个方法使用：找到一块可以提炼成方法的代码，选中，然后 command+option+m 即可抽象方法并智能帮你方法命名。
可替换成使用 Prettier 作为默认格式化：这个功能可以更好的和其他同事 VSCode 开发场景中代码格式保持一致，可见 设置演示^[18]。
告诉你哪些代码可以优化：特别是重复代码的提示查找工具很是不错，此处偷偷 @NASA FR 有可优化代码。

3. 智能提示真的很强

显示当前包信息：可以将鼠标放到对应的引入包上面一会儿，会显示这个包的 README，省去去看如何使用：

机器学习来提示代码：写代码过程中，当前 WebStorm 2021 支持机器学习所有人的代码习惯来优化代码提示功能，支持简洁的代码提示（VSCode 有时候会有很多用不上的提示），用了一段时间后你就慢慢发现了。

4. 潮流功能 Code With Me 实时调试他人的代码

回想起之前给同学排查代码问题，特别是不坐到一起的场景，你需要先让他加代码权限，然后 clone 代码，切分支，npm i，然后告诉你代码哪儿可能有问题，这里就浪费了很多时间了。
有时候可能会用 Mac 远程控制，但是有这里体验很不好，很多时候都是卡顿掉帧反应慢，寸步难行的感觉，更不要说去调试代码了。
有了这个 Code With Me 后（没有开启需要去插件中去开启），直接对方分享一个 url 给你，会自动将对方代码包括安装好的依赖同步到你的 WebStorm，然后你在你本地修改时候，对方电脑也会修改，更潮流的你两还可以视频会议的方式来聊哪儿问题，使用几乎原生秒开的体验，可通过 官方视频^[19] 了解更多。

5. 还有不少小惊喜的功能

给你一个清晰的 node_modules：可能很多用 VSCode 的同学都很困惑，我的 node_modules 根本找不到东西，但是 WebStorm 就很清晰了：

左边为 WebStorm，右侧为 VSCode（不过可通过 Node Modules Context Menu 这个小众插件解决）
独特的演示模式和专注模式，可以在通过自定义快捷键 command+option+control+v 打开，或者在「视图->外观->进入演示模式」找到（可去设置->外观->最下面将演示模式字体设置到 28），省去演示代码时下面看不清的尴尬；使用自定义快捷键 command+option+control+v 进入免打扰模式，也可以「视图->外观->进入专注模式」认真敲代码，也是很清晰的。