共计 4930 个字符,预计需要花费 13 分钟才能阅读完成。
作为前端开发者,最趁手的搬砖工具无外乎 Webstorm 和 VSCode,Webstorm 像苹果零碎,闭源、免费、官网有良好而弱小的开发能力、智能索引和补全性能无出其右者,VSCode 就像安卓,开源、继续迭代更新、社区充满活力。
Webstorm 的 2021.3 版更新后,以往卡顿的状况缓解了很多,就算重新安装 node_modules 也不会像以前一样卡死半天,因为卡顿退坑 Webstorm 的小伙伴能够回来看看 😂
在下应用 Webstorm 较多,总结了一些不错的插件和实用 Tips,心愿能帮到你~
本文是 < 那些好用的工具 > 系列文章之一:
- 推介几款 windows 下十分好用的工具
- 打造舒服搬砖环境,这些是我最想推介的桌面好物
- 干货满满!推介几款 Mac 下十分好用的软件(第一弹)
- 干货满满!推介几款 Mac 下十分好用的软件(第二弹)
- 干货满满!推介几款 Mac 下十分好用的软件(第三弹)
1. 插件推介
以下推介的插件都能够在 Webstorm 官网插件市场下载,间接搜寻插件名装置即可。
有一些感觉并没有解决痛点的插件比方打字特效 activate-power-mode、彩虹括号 Rainbow Brackets、彩虹进度条 Dmitry Batkovich 就没有推介了。
还有一些第三方智能代码补全的插件比方 Codota、Kite、Tabnine,我感觉 Webstorm 自带的机器学习智能补全就挺好用了,用第三方插件有时候代码补全速度有点慢,要额定占用内存,有时候还会跟自带的补全抵触或者反复。可能是我机器配置不够高,感兴趣能够装置了试试看。
Chinese Language Pack / 中文语言包
晚期没有官网中文语言包,还要靠 Github 上有个长期没有更新的翻译插件,好在 2021 年官网推出了中文语言包,补救了在下弱鸡的英语能力(六级 436 飘过),不是说原英文的界面不能用,只是感觉英文的有些设置不能做到高深莫测,要找半天。
有的大佬可能感觉英文的用着挺好,用习惯了也一样,看你集体须要了~
AceJump:光标疾速定位
能够将插入光标疾速导航到编辑器中可见的任何地位,有了 AceJump 脱离鼠标全键盘开发不在话下,还有个很好的中央在于即便编辑器窗口拆分了,也能够在不同的窗口之间导航,快捷键 control/ctrl + ;
GitToolBox:Git 性能扩大
很多 Git 的性能加强,比方主动 fetch 代码,状态栏中显示以后 Git 分支的未提交和落后提交数显示,过期分支清理,commit 窗口反对 emoji 表情,Inline Blame 能够看到每行代码是谁提交的、什么时候提交的、以及 commit 信息等等,如果你常常用 Git,这个插件必装了。
HighlightBracketPair:高亮括号
有些大佬会推介彩虹括号插件 Rainbow Brackets,我也下载过,但括号多了之后花花绿绿的看着也一样分不清。
起初发现 HighlightBracketPair 插件,这个插件会在以后括号上高亮之外,还会在左侧代码行数那显示括号范畴,比彩虹括号插件更加直观而且不容易看花眼。
Key Promoter X / Presentation Assistant:快捷键显示
很多大佬的博客推介 Key Promoter X,能够在你点某个性能的时候提醒你这个性能的快捷键,多用一用就能够脱离鼠标,应用快捷键触发这些性能。
还有一个很棒的插件叫 Presentation Assistant,反对性能的汉化显示,而且还能够将 Mac 和 Win 环境的快捷键都展现进去。
One Dark Theme / Material Theme UI Lite:难看的收费主题
原来有个很好用的插件 Material Theme UI,但起初免费了,不过没关系,还有一些收费的主题也很好用,比方 Material Theme UI Lite、Coderpillr Theme、One Dark theme 等等,都挺难看的,本人挑个喜爱的主题吧~
Atom Material Icons:难看的图标
以前有个编辑器叫 Atom,当初用的人不多了,它最大的奉献就是主题和图标设计的十分难看,这个插件就是将 Atom 的图标引入到 Webstorm 的文件夹、文件上,让编译器看起来更好看。
IntelliVue:Vue 性能加强
Webstorm 上对 Vue 反对很棒的插件,当初曾经反对 Vue3 的一些语法,能够疾速创立 Vue2 的 data、methods 等,或者 Vue3 的 setup method 等,帮你少些一些模板代码。
装置后菜单栏会多一个 Vue 的选项,下拉框里有一些操作性能,对 Vue2 我的项目比拟好用。
Translation:最佳翻译插件
能够便捷地在 Webstorm 中进行翻译,省去了关上翻译软件的操作,反对右键形式选中翻译,也能够关上独立窗口进行整段的翻译。
个人感觉最不便的性能就是翻译并替换性能,Mac 上快捷键 command + control + O
,Win 上为 ctrl + shift + X
,在写业务代码的时候会主动翻译汉字的业务词条主动翻译,字符串能够抉择大驼峰或小驼峰什么的。
String Manipulation / CamelCase:字符串解决
这两个插件都是解决字符串的,能够将英文字符串在 kebab-case、SNAKE_CASE、PascalCase、camelCase、snake_case、space case 状态间切换。
第一个 String Manipulation 插件比拟大,举荐常常解决字符串的小伙伴用,第二个 CamelCase 插件比拟轻量,日常应用齐全足够,应用也很简略,快捷键 option/alt +shift + U
就能够进行切换了。Webstorm 自带切换大小写的快捷键是 command/ctrl + shift + U
,这两个差不多的快捷键也很好记。
.ignore:版本管理工具的疏忽文件插件
.ignore
插件反对创立多种 .ignore
文件比方 .gitignore
、.eslintignore
、.dockerignore
等等,咱们最罕用的根本都反对,新建的时候反对抉择不同类型的框架或库罕用的疏忽配置,如 node_modules
、dist
、.cache
等。
在文件上右键也能够疾速增加到疏忽文件中,是应用 Git 必装的小插件。
也反对将文件旋选中右键疾速增加到 .gitignore
文件中。
Import Cost:显示引入的包体积大小
VSCode 上也有这个插件,会在你引入的库前面通知你这个库的体积大小,和 gzip 后的包体积。
CodeGlance:右侧代码小地图
在代码面板的右侧显示一个代码缩略图,像 VSCode 里那样。我看有人在用这个插件,但在下不怎么用,在编辑器里应用分屏的时候感觉有些碍事,长文件中用着还行,看你集体爱好了。
.env files support:配置文件反对
能够给 .env
环境配置文件减少语法高亮,给配置文件中定义的变量减少智能索引。另外在应用 Webpack 进行打包的时候,咱们会有一些环境变,装置该插件后,就会提醒环境变量文件中所领有的环境变量。
JetBrains Toolbox:全家桶管理软件
用来集中管理 Webstorm、IntelliJ、GoLand 等 JetBrains 全家桶软件,治理罕用设置、我的项目导航,以及自动更新、插件更新、回滚和降级软件版本等性能,如果你 JetBrains 系列软件装置了不止一款,那非常推介装置。
2. 实用设置 Tips
2.1 敞开不须要的插件
Webstorm 装置后自带了很多内置插件,有些不须要的或不罕用能够将其敞开,我的项目开启速度能够进一步减少。
2.2 连体字
当初不少字体都能够设置连体字,比方 Fira Code
或者 2021 年 JetBrains 减少的专用于编程的 JetBrains Mono
字体。强烈推介后者,2021 及当前版本内置于 Webstorm,是最新公布专用于编程的字体,清晰、易读、辨识度高。
设置应用 JetBrains Mono
字体后,能够达到上面这样的成果:
如果你喜爱这种格调,在设置的 编辑器 -> 配色计划 -> 配色计划字体
中批改。
2.3 设置默认内存
置信很多人装上 Webstorm 第一件事就是改默认内存,能够在 .vmoptions
设置文件里手动改,也能够在 帮忙 -> 更改内存设置
中更改,倡议设置为 4096 或者更高一点。
以后的占用内存在软件界面右下角能够看到,如果感觉内存设置的不够,能够再改大点。
2.4 设置配置同步
能够在 文件 -> 治理 IDE 设置 -> IDE 设置同步
中设置配置同步,Webstorm 会将你的配置与你的账户绑定,这样你家里的电脑就能够和公司的电脑应用雷同的配置和快捷键。
3. Tips
3.1 强悍的后缀补全性能
常常听到他人说代码主动补全,但我很少听人说过 Webstorm 的后缀补全,但特地实用,对于有些曾经脱离或者心愿脱离鼠标的高手来说,后缀补全能够让你少按很屡次 ←
键。
上面是 .const
补全的例子:
还有补全表达式的括号 .par
和 return 语句的 .return
形式:
全副的后缀补全能够在 编辑器 -> 惯例 -> 后缀补全
中看到,也能够自定义喜爱的补全形式。
3.2 正则表达式快捷验证
在正则表达式上按 option/alt + enter
能够就地快捷验证正则表达式,这是一个疾速性能,在做表单验证的一些正则表达式的时候十分实用
4. 实用快捷键
4.1 全局搜寻
双击 shift
能够关上随处搜寻性能,这里能够搜寻设置、代码、文件名、文件夹名、扭转主题等等,是 Webstorm 上最强性能之一,相当于 VSC 的 command/ctrl + shift + P
4.2 关上最近的文件
command/ctrl + E
能够关上最近的文件,在这些文件两头跳转,文件列表中也包含已敞开的文件。比方你刚刚敞开了一个文件,再想把这个文件关上,就能够应用这个快捷键,相当于浏览器的 command + shift + T
4.3 在我的项目视图中关上文件
在我的项目视图中关上文件是一个很不便的性能,就是我的项目文件目录面板下面两个同心圆一样的图标,能够在文件目录中疾速关上以后并定位到以后文件:
默认设置里并没有给这个性能减少快捷键,倡议在 键盘映射 -> 其余 -> 在我的项目视图中抉择文件
中增加本人的快捷键,我设置的是 option/alt + 1
,仅供参考:
4.4 查看用处
应用 option/alt + F7
能够查看以后变量、函数、类的应用、读取、导入的中央,在浏览他人的代码理清逻辑关系的时候十分好用,有了这个性能浏览源码终于不必 command/ctrl + shift + F
一个个找变量了。
疾速显示用法的快捷键是 command/ctrl + option/alt + F7
4.5 其余超级快捷键
command/ctrl + option/alt + O
:import 优化,移除没用到的 importcommand/ctrl + option/alt + L
:从新格式化代码command/ctrl + option/alt + Z
:Git 回滚以后区域的代码command/ctrl + J
:查看预约义代码模板command/ctrl + shift + up/down
:智能挪动代码块,如果挪动函数,能够将这个函数整体挪动到上一个函数上control/ctrl + shift + J
:合并两行command/ctrl + G
:抉择下一个雷同匹配项command/ctrl + D
:复制以后行F2
:导航到编辑器报错或者报正告的中央
查看官网的所有快捷键能够点击 帮忙 -> 键盘快捷键 PDF
,或者双击 shift
输出「键盘快捷键」就能够看到官网快捷键参考 PDF,内容十分全,多看看常常能够发现惊喜。
网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢送留言指出,如果本文帮忙到了你,别忘了点赞反对一下哦,你的点赞是我更新的最大能源~
参考文档:
- 都 2021 了你竟然还在用 WebStorm?
- Tips – WebStorm Guide
PS:本文收录在在下的博客 Github – SHERlocked93/blog 系列文章中,欢送大家关注我的公众号 前端下午茶
,间接搜寻即可增加或者点这里增加,继续为大家推送前端以及前端周边相干优质技术文,共同进步,一起加油~
另外能够退出「前端下午茶交换群」微信群,微信搜寻 sherlocked_93
加我好友,备注 加群,我拉你入群~