都 2021 了你居然还在用 WebStorm ?是的!-阿里云开发者社区

开发者社区> AlibabaF2E> 正文
登录阅读全文

都 2021 了你居然还在用 WebStorm ?是的!

简介: 都 2021 年了,你居然还在用 WebStorm?VSCode 不香吗?😤

作者:侑夕

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

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


如何用上 WebStorm 最新正版?



image.png

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

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

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

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

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

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


如何让 WebStorm 好用不卡?

640.gif


image.gif

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

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:需要稍微配置一下,可以将你所有敲代码的地方装上这个插件,可以很访问的统计你敲了多长时间的代码,详细见官网[11]

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

2.修改一下文字大小

主要有 3 个常用地方要修改下,可也按照个人喜好配置(截图说明[12]):

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

3. 禁止掉不用的插件

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

image.png

image.gif

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

image.gifimage.png

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

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

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

  1. 常用的一些好用快捷键,建议强迫多用最后到肌肉记住:
## 查找替换操作
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 工具
  1. 找到「设置里的键盘映射」,进行操作文字「搜索」,设置几个有用的自定义快捷键,我习惯用左边竖直对齐的 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 特别合适想安静敲代码的时候
  1. 刚开始不习惯使用快捷键的同学,可以在顶部菜单栏、在编辑器上、底部状态栏上、左侧导航文件树上多用用右键,可以发现很多新玩意,通过 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 管理工具

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

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

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

3. 智能提示真的很强

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

image.png

  1. 机器学习来提示代码:写代码过程中,当前 WebStorm 2021 支持机器学习所有人的代码习惯来优化代码提示功能,支持简洁的代码提示(VSCode 有时候会有很多用不上的提示),用了一段时间后你就慢慢发现了。
    image.gifimage.png

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

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

image.png

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

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

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

image.png


回到开始所说,提高操作效率不在乎你用哪一个工具,而在乎你熟练哪个工具,同时很建议大伙对于自己常用的软件,慢慢让自己习惯使用快捷键,并逐步脱离鼠标,会有有趣事情发生的

参考资料

[1]

WebStorm 30天: https://www.jetbrains.com/zh-cn/webstorm/

[2]

个人版本: https://www.jetbrains.com/zh-cn/WebStorm/buy/#personal?billing=yearly

[3]

官方说: https://sales.jetbrains.com/hc/en-gb/articles/207241015-Can-I-use-my-personal-license-for-commercial-development-

[4]

免费许可证计划: https://www.jetbrains.com/zh-cn/community/opensource/#support

[5]

这篇教程: https://zhuanlan.zhihu.com/p/87370573

[6]

学术许可: https://www.jetbrains.com/zh-cn/community/dev-recognition/

[7]

用户组: https://www.jetbrains.com/zh-cn/community/user-groups/

[8]

开发者活动: https://www.jetbrains.com/zh-cn/community/events-partnership/#developers

[9]

开发者认可: https://www.jetbrains.com/zh-cn/community/dev-recognition/

[10]

ide-eval-resetter: https://gitee.com/pengzhile/ide-eval-resetter

[11]

官网: https://wakatime.com/

[12]

截图说明: https://qpluspicture.oss-cn-beijing.aliyuncs.com/up/gatYqk.png

[13]

看到: https://qpluspicture.oss-cn-beijing.aliyuncs.com/up/qqeGgE.png

[14]

状态栏: https://qpluspicture.oss-cn-beijing.aliyuncs.com/up/yXusL6.png

[15]

效果: https://qpluspicture.oss-cn-beijing.aliyuncs.com/up/Ko1zcO.png

[16]

详细记录: https://qpluspicture.oss-cn-beijing.aliyuncs.com/up/60h8XE.png

[17]

效果: https://qpluspicture.oss-cn-beijing.aliyuncs.com/up/vgy10n.png

[18]

设置演示: https://qpluspicture.oss-cn-beijing.aliyuncs.com/up/06rBw9.png

[19]

官方视频: https://www.youtube.com/watch?v=Lq0fCMCK-Yw

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
AlibabaF2E
使用钉钉扫一扫加入圈子
+ 订阅

阿里经济体前端技术最新内容汇聚在此,由阿里经济体前端委员会官方运营。我们的愿景是建立全球一流的前端团队,链接商业,让数字世界触手可及是我们的使命。阿里经济体前端委员会致力于加强技术前瞻性、推进集体成长、提升国际影响力。同时我们运营着阿里经济体前端的官方公众号:Alibaba F2E,欢迎关注。

官方博客
最新文章
相关文章