好用不卡,这些插件和配置让你的 Webstorm 更牛逼!(下)

简介: 作为前端开发者,最趁手的搬砖工具无外乎 Webstorm 和 VSCode,Webstorm 像苹果系统,闭源、收费、官方有良好而强大的开发能力、智能索引和补全功能无出其右者,VSCode 就像安卓,开源、持续迭代更新、社区充满活力。 Webstorm 的 2021.3 版更新后,以往卡顿的情况缓解了很多,就算重新安装 node_modules 也不会像以前一样卡死半天,因为卡顿退坑 Webstorm 的小伙伴可以回来看看 😂 在下使用 Webstorm 较多,总结了一些不错的插件和实用 Tips,希望能帮到你~

3. Tips


3.1 强悍的后缀补全功能


经常听到别人说代码自动补全,但我很少听人说过 Webstorm 的后缀补全,但特别实用,对于有些已经脱离或者希望脱离鼠标的高手来说,后缀补全可以让你少按很多次 键。


下面是 .const 补全的例子:


微信截图_20220428000551.png


还有补全表达式的括号 .par 和 return 语句的 .return 方式:


微信截图_20220428000556.png


全部的后缀补全可以在 编辑器->常规->后缀补全 中看到,也可以自定义喜欢的补全方式。


3.2 正则表达式快捷验证


在正则表达式上按 option/alt + enter 可以就地快捷验证正则表达式,这是一个快速功能,在做表单验证的一些正则表达式的时候非常实用


微信截图_20220428000601.png


4. 实用快捷键


4.1 全局搜索


双击 shift 可以打开随处搜索功能,这里可以搜索设置、代码、文件名、文件夹名、改变主题等等,是 Webstorm 上最强功能之一,相当于 VSC 的 command/ctrl + shift + P


微信截图_20220428000606.png


4.2 打开最近的文件


command/ctrl + E 可以打开最近的文件,在这些文件中间跳转,文件列表中也包括已关闭的文件。比如你刚刚关闭了一个文件,再想把这个文件打开,就可以使用这个快捷键,相当于浏览器的 command + shift + T


微信截图_20220428000610.png


4.3 在项目视图中打开文件


在项目视图中打开文件是一个很方便的功能,就是项目文件目录面板上面两个同心圆一样的图标,可以在文件目录中快速打开当前并定位到当前文件:


微信截图_20220428000615.png


默认设置里并没有给这个功能增加快捷键,建议在 键盘映射->其他->在项目视图中选择文件 中添加自己的快捷键,我设置的是 option/alt + 1 ,仅供参考:


微信截图_20220428000619.png


4.4 查看用途


使用 option/alt + F7 可以查看当前变量、函数、类的使用、读取、导入的地方,在阅读别人的代码理清逻辑关系的时候非常好用,有了这个功能阅读源码终于不用 command/ctrl + shift + F 一个个找变量了。


微信截图_20220428000623.png


快速显示用法的快捷键是 command/ctrl + option/alt + F7


4.5 其他超级快捷键


  1. command/ctrl + option/alt + O:import 优化,移除没用到的 import
  2. command/ctrl + option/alt + L:重新格式化代码
  3. command/ctrl + option/alt + Z:Git 回滚当前区域的代码
  4. command/ctrl + J:查看预定义代码模板
  5. command/ctrl + shift + up/down:智能移动代码块,如果移动函数,可以将这个函数整体移动到上一个函数上
  6. control/ctrl + shift + J:合并两行
  7. command/ctrl + G:选择下一个相同匹配项
  8. command/ctrl + D:复制当前行
  9. F2:导航到编辑器报错或者报警告的地方


查看官方的所有快捷键可以点击 帮助->键盘快捷键 PDF,或者双击 shift 输入「键盘快捷键」就可以看到官方快捷键参考 PDF,内容非常全,多看看经常可以发现惊喜。


微信截图_20220428000631.png


网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出,如果本文帮助到了你,别忘了点赞支持一下哦,你的点赞是我更新的最大动力~


参考文档:

  1. 都 2021 了你居然还在用 WebStorm ?
  2. Tips - WebStorm Guide



相关文章
|
5月前
|
JavaScript
使用Webstorm快速启动Vue项目配置
使用Webstorm快速启动Vue项目配置
66 0
|
6月前
|
JavaScript
WebStorm配置代码模板【以vue模板为例,提供vue代码模板】
WebStorm配置代码模板【以vue模板为例,提供vue代码模板】
75 0
|
11月前
|
前端开发
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
|
11月前
|
前端开发 JavaScript IDE
JavaScript-WebStorm中配置Github并将代码托管到Github
JavaScript-WebStorm中配置Github并将代码托管到Github
74 0
|
JavaScript 前端开发
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】
471 0
WebStorm配置【设置左侧及其代码编辑区最舒服的字体】
|
机器学习/深度学习 JavaScript 前端开发
好用不卡,这些插件和配置让你的 Webstorm 更牛逼!(上)
作为前端开发者,最趁手的搬砖工具无外乎 Webstorm 和 VSCode,Webstorm 像苹果系统,闭源、收费、官方有良好而强大的开发能力、智能索引和补全功能无出其右者,VSCode 就像安卓,开源、持续迭代更新、社区充满活力。 Webstorm 的 2021.3 版更新后,以往卡顿的情况缓解了很多,就算重新安装 node_modules 也不会像以前一样卡死半天,因为卡顿退坑 Webstorm 的小伙伴可以回来看看 😂 在下使用 Webstorm 较多,总结了一些不错的插件和实用 Tips,希望能帮到你~
好用不卡,这些插件和配置让你的 Webstorm 更牛逼!(上)
|
存储 前端开发 安全
小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)
小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)
314 1
小马带你认识前端开发神器WebStorm(WebStorm及Git的相关配置与使用)
|
JavaScript 前端开发 Windows
WebStorm 开发配置
1. require黄线问题 图1.png 配置: File->Settings...->Lanaguages & Frameworks -> JavaScript -> Libraries -> Add... 图2.png 按图2填写,点击ok,效果图3所示,点击ok即可。
1254 0
|
网络安全 开发工具 数据安全/隐私保护
Webstorm安装,配置Github和Git
一、安装Webstorm 1、Webstorm资源  Webstorm下载地址:https://www.jetbrains.com/webstorm/  注册地址:http://idea.
2963 0
|
开发工具 git 网络安全