**很建议初步使用的时候「用上 [WebStorm 30天内免费](https://www.jetbrains.com/zh-cn/webstorm/) 」的福利，等到觉得好用再去考虑申请正式版本，防止造成不必要的浪费！**
### 1. 自费去官方购买个人版
资金允许的同学可以直接上官网看看[个人版本](https://www.jetbrains.com/zh-cn/store/#personal)，首年 69 美元（较之前涨价了些），假如不更新的话还可一直用下去不续费。同时**对于个人版[官方说](https://sales.jetbrains.com/hc/en-gb/articles/207241015-Can-I-use-my-personal-license-for-commercial-development-)同样支持用于商业项目**，只需要保证一个人用即可，国内用户也可以去 [荔枝数码](https://store.lizhi.io/site/products/id/427?cid=nd69gncw)购买更方便些。
### 2. 通过开源项目申请一年的使用
讲道理，JetBrains 公司真的很良心，提供了开源开发许可证福利，让大伙免费用他家软件进行开源贡献，一般项目维护在 3 个月以上大概率可通过。可从此入口 [免费许可证计划](https://www.jetbrains.com/zh-cn/community/opensource/#support) 进入申请，也可参考 [这篇教程](https://zhuanlan.zhihu.com/p/87370573)；除去开源申请外，还可试试[学术许可](https://www.jetbrains.com/zh-cn/community/dev-recognition/)、[用户组](https://www.jetbrains.com/zh-cn/community/user-groups/)、[开发者活动](https://www.jetbrains.com/zh-cn/community/events-partnership/#developers)、[开发者认可](https://www.jetbrains.com/zh-cn/community/dev-recognition/)方式获取，**但都「不能用于商业项目」请斟酌使用**。
## 二、如何让 WebStorm 好用不卡？
### 1. 安装几个常用的插件
直接 `command + ,` 打开设置，找到 plugin，复制后在插件市场进行搜索安装：
1. **中文语言包**：讲道理编程的同学应该默认全英文，但是安装后**你会一眼发现很多之前英语下“看不到“的东西**。想起之前自己强迫自己苹果全家桶都用英文，坚持了 1 个月就忍不下去了，虽然看得懂，但是需要脑袋 proxy 翻译的时间，回想起来何必呢？不过看英语如看中文无需反应的同学可忽视（等到哪一天功能熟练以后其实也可以关闭中文）。
2. **Coderpillr Theme**：超级好看的一个主题，之前试过很多如 One Dark、Material Theme Ul 都不是很满意，其实最爱 Dracula Theme，但遗憾在这里不好看，刚好 Coderpillr 这个小众的很有 Dracula 风格，深得我心。
3. **Key Promoter X**：快捷键爱好者的神器，会来智能教你记住快捷键。
4. **.ignore**：自动提示你哪些文件可以被 ignore，省去新项目场景一个一个找的问题
5. **WakaTime**：需要稍微配置一下，可以将你所有敲代码的地方装上这个插件，可以很访问的统计你敲了多长时间的代码，详细见[官网](https://wakatime.com/)。
**对于插件，不建议安装太多，满足使用即可，太酷炫的反而影响性能，同时也建议禁用掉一批你用不上的**。
### 2.修改一下文字大小
主要有 3 个常用地方要修改下，可也按照个人喜好配置（[截图说明](https://cdn.tw93.fun/blog/upic/rdJGpL.jpg)）：
- 一是外观字体，默认有些小了，建议 `.ApplesystemUIFont` 16；
- 二是编辑器字体，推荐 `JetBrains Meno` 20，行高 1.16，不要连体；
- 三是控制台字体，推荐 `JetBrains Meno` 18，行高 1.14，紧凑一些，不要连体；
### 3. 禁止掉不用的插件
继续在 plugin 中已安装 Tab 中，对你觉得你用不上的取消勾选禁止掉一批可能用不上的，减少使用内存，我禁止了很多，其中「Code With Me」不用也可以关闭，可以在「帮助->诊断工具->分析插件内存」来[看到](https://gw.alipayobjects.com/zos/k/kl/BWA11F.gif)更多可优化的空间，选择性参考如下：
### 4. 将默认内存设置大一些
1. 当前占用内存，可在底部栏看到，如果没有，可以右键底栏选择打开，也可以关闭一些不用的状态显示（1）
2. 在顶部菜单栏找到「帮助->更改内存设置」(2)，M1 很牛逼不动也行，其他的更新到 4096 即可(3)。
### 5. 记住和设置常用的快捷键
建议从这里开始，打开本地有 Git 发布记录的前端项目来测试，借此熟练一遍，建议在「设置->键盘映射」中，将「在 Touch Bar上 显示F1、F2等键」勾选上。由于正常软件为了最大化主编辑区，操作动作都在埋在菜单内部了，**导致不能所见所得从而想不到使用，记住快捷键可以让你没有想到情况下比普通用户用到多 50% 的潮流功能**。
1. **常用的一些好用快捷键，建议强迫多用最后到肌肉记住：**
```shell
## 查找替换操作
shift 按两次 // 随处搜索，搜索文件、功能、代码很方便
command + f // 当前页搜索
command + shift + f // 全局搜索字段
command + r // 替换当前文档
command + shift + r // 全局替换字段
## 视图展示
command + 1 // 显示隐藏左侧文件树
command + 0 // 显示当前待提交代码，用于提交前 diff
command + 9 // 显示当前历史所有的提交记录
command + 7 // 显示当前文件的结构，特别是看 Class 时候很方便
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 工具
```
2. **找到「设置里的键盘映射」，进行操作文字「搜索」，设置几个有用的自定义快捷键，我习惯用左边竖直对齐的 `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 特别合适想安静敲代码的时候
3. **刚开始不习惯使用快捷键的同学，可以在顶部菜单栏、在编辑器上、底部状态栏上、左侧导航文件树上多用用`右键`，可以发现很多新玩意，通过 Key Promoter X 来辅助记忆**
### 6. 可能用不上的高级设置
假如设置平时不卡，但是在 Webstorm 自带终端 `npm i` 以后，特别是依赖 node_modules 文件索引超多变化导致无响应的问题（好电脑一般不会），可以试试我这边调试了好多次的高级设置。
在顶部菜单找到「帮助->编辑自定义属性」，打开 `idea.properties` 文件，编辑如下：
```shell
idea.cycle.buffer.size=4096
idea.max.intellisense.filesize=50
```
继续在「帮助->编辑自定义VM选项」打开 `webstorm.vmoptions` 文件，编辑如下：
```shell
-ea
-server
-Xms2048m
-Xmx8888m
-Xss16m
-XX:MaxMetaspaceSize=2G
-XX:MetaspaceSize=1G
-XX:ConcGCThreads=8
-XX:ParallelGCThreads=8
-XX:NewRatio=2
-XX:ReservedCodeCacheSize=1024m
-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=1024m
-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` 安装巨多依赖应该也不会卡了。
---
当你上面都熟练了，很建议在右下角 [状态栏](https://gw.alipayobjects.com/zos/k/vz/NfBNKx.jpg) 中登录账号进行同步，防止设置丢失，等你用过一段时间后，你就会发现 WebStorm 慢慢的就香起来了。
## 三、WebStorm 香的地方在哪里？
### 1. 世界上最好用 Git 管理工具
1. **看这一行代码是谁写的**：也叫 git blame，快捷键 `control+shift+b`，或者在代码行数数字式右键「使用 Git Blame 注解」，就可以出现了这样 [效果](https://gw.alipayobjects.com/zos/k/xy/MRsvfR.jpg)，同时可鼠标点击下对应的名称，会出现当时那次提交的 [详细记录](https://gw.alipayobjects.com/zos/k/my/2OhCIv.jpg)。
2. **提交前 CR 代码改动**：很建议保持这个习惯，每次提交前都对比一下改动了下，快捷键为`command + 0`，这个 diff 对比超级清晰，同时很容易发现粗心的代码，这样的 [效果](https://gw.alipayobjects.com/zos/k/ge/YnE72Q.jpg)，确定无误后 `command+k` 填写提交记录，`command+shift+k` 提交代码，提交完成后 `command+1` 切回到代码开发。
3. **查看当前的所有提交记录**： 快捷键 `control+shift+h` 可以查看所有的历史提交记录，假如你只想看某个文件或者某个文件夹，选中，然后快捷键即可，或者右键找到 git 里面的「显示历史记录」。
4. **查看当前分支和主干的改动点**：这个是我觉得最好用的地方，也叫「**救命操作**」，比如说线上出现了问题，想对比上线版本和上一个版本的全部代码改动点就用得上他了，或者你需要合并 master 之前用于最后的 CR 也是很合适的，快捷键为 `control+shift+d`，或者在对应的总文件夹上面点击右键找到 git 里面的「与分支比较」,就可看到如下效果，同时可以按下 F7 来看下一个改动点。
有试过知名的 Tower、Sourcetree、Sublime Merge、Fork 等 Git 管理工具，发现真心不如它
### 3. 智能提示真的很强
1. **显示当前包信息**：可以将鼠标放到对应的引入包上面一会儿，会显示这个包的 README，省去去看如何使用：
2. **机器学习来提示代码**：写代码过程中，当前 **WebStorm 2021 支持机器学习所有人的代码习惯来优化代码提示功能**，支持简洁的代码提示（VSCode 有时候会有很多用不上的提示），用了一段时间后你就慢慢发现了。
### 4. 潮流功能 Code With Me 实时调试他人的代码
1. 回想起之前给同学排查代码问题，特别是不坐到一起的场景，你需要先让他加代码权限，然后 clone 代码，切分支，npm i，然后告诉你代码哪儿可能有问题，这里就浪费了很多时间了。
2. 有时候可能会用 Mac 远程控制，但是有这里体验很不好，很多时候都是卡顿掉帧反应慢，寸步难行的感觉，更不要说去调试代码了。
3. 有了这个 Code With Me 后（没有开启需要去插件中去开启），直接对方分享一个 url 给你，会自动将对方代码包括安装好的依赖同步到你的 WebStorm，然后你在你本地修改时候，对方电脑也会修改，更潮流的你两还可以视频会议的方式来聊哪儿问题，使用几乎原生秒开的体验，可通过 [官方视频](https://www.youtube.com/watch?v=Lq0fCMCK-Yw) 了解更多。
左边为本地 WebStorm，右侧为协助者的 Code With Me，类比两台电脑协同的效果
左边为 WebStorm，右侧为 VSCode（不过可通过 Node Modules Context Menu 这个小众插件解决）
第一次是演示模式，第二次是免打扰模式