WebStorm 折腾记

介绍

WebStorm 上大学的时候断断续续用过（上学的时候穷啊，一直是在网上找的注册码），但用的最多的是 Atom、Sublime Text 这些编辑器，直到后来微软出了 VSCcode。VSCode 作为后来者确实让人惊叹，有和 WebStorm 齐头并进的趋势，对于开发者来说是件好事儿，有竞争就有进步。VSCode 推出了 Remote 远程开发模式，WebStorm 立马跟上，这不 Jetbrains 最近又开始换 UI 了。

首先说下 WebStorm 的缺点吧：

1. 卡，WebStorm 在有些时候（例如项目依赖索引）会变得巨卡，甚至失去响应
2. 贵，第一年 59 刀，之后每年都会有折扣，作为对比 VSCode 是免费的

但是为什么 WebStorm 又这么流行呢？作为前端 IDE 集成开发环境，完美适配了三个主流框架（Vue/React/Anglar），Webpack/Prettier/ESLint 都有集成支持，开箱即用省去了很多麻烦；优秀的 Debug；完美的 Git 支持；HTTPClient……等等。如果在设置里探索一圈下来，估计会有很多以前没有注意到功能，这就是 IDE 的意义。

一些插件

JetBrains 插件市场是通用的，任意一个 IDE 都可以安装使用，生态也很丰富，推荐一下常用的插件：

• CodelyTV Theme 一款主题，有浅色和暗色
• .ignore 提供一些常用的 ignore 文件模板及文件名补全功能
• Key Promoter X 快捷键辅助记忆，在你使用鼠标操作的提示对应的快捷键
• Rainbow Brackets 括号匹配着色
• GitToolBox 拓展 WebStorm 的 Git 插件，提供自动 fetch、Git Blame 等功能

安装过多插件可能会影响 WebStorm 性能，不过可以禁用一些不常用的内置插件，例如我自己就禁用了 Docker/Keymap/Remote Development/Code With Me/Subversion 等一些暂时不用的插件。

一些配置

就像上面提到的，WebStorm 在索引 node_modules 的时候可能会很卡，可以通过以下步骤解决（配置好点的电脑无所谓）：

1. Help → Change Memory Setting

2. Help → Edit Custom Properties

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

3. Help → Edit VM Options

-ea
-server
-Xms2048m
-Xmx4096m
-Xss16m
-XX:MaxMetaspaceSize=2G
-XX:MetaspaceSize=1G
-XX:ConcGCThreads=8
-XX:ParallelGCThreads=8
-XX:NewRatio=2
-XX:ReservedCodeCacheSize=512m
-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

4. File -> Invalidate Caches 删除缓存并重启 WebStorm

快捷键

WebStorm 几乎为每个操作都提供了快捷键，而且可以完全自定义或者安装其它快捷键映射（VSCode，Sublime 等），上面提到的 Key Promoter X 可以辅助记忆快捷键，而且还可以统计 miss 掉的快捷键：

当然这么多快捷键肯定是记不下的，那就只能用到什么查什么了，WebStorm 自带了快捷键文档，打开 Help → Keyboard Shortcuts PDF 就可以查看：

另外也可以打开 Help → Tip of the Day 每日技巧提示获取帮助，日记月累就可以熟练使用了。

同步

忘了从哪个版本开始，JetBrains 为 IDE 加入了设置同步的功能，只需要在右下角选择要同步的设置（UI 主题、启用/禁用的插件）。

正版 Or 盗版

条件允许的情况下还是支持正版吧。上大学期间用的是网上的注册码，后来工作直接买了 JetBrains 全家桶，不用再为 License 发愁了，省时省力。第一年 249 刀，后续每年都有折扣，看个人情况。