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

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

微信截图_20220427235536.png


作为前端开发者,最趁手的搬砖工具无外乎 Webstorm 和 VSCode,Webstorm 像苹果系统,闭源、收费、官方有良好而强大的开发能力、智能索引和补全功能无出其右者,VSCode 就像安卓,开源、持续迭代更新、社区充满活力。


Webstorm 的 2021.3 版更新后,以往卡顿的情况缓解了很多,就算重新安装 node_modules 也不会像以前一样卡死半天,因为卡顿退坑 Webstorm 的小伙伴可以回来看看 😂


在下使用 Webstorm 较多,总结了一些不错的插件和实用 Tips,希望能帮到你~

本文是 <那些好用的工具> 系列文章之一:


  1. 推介几款 windows 下非常好用的工具
  2. 打造舒适搬砖环境,这些是我最想推介的桌面好物
  3. 干货满满!推介几款 Mac 下非常好用的软件(第一弹)
  4. 干货满满!推介几款 Mac 下非常好用的软件(第二弹)
  5. 干货满满!推介几款 Mac 下非常好用的软件(第三弹)
  6. 好用不卡,这些插件和配置让你的 Webstorm 更牛逼!


1. 插件推介


以下推介的插件都可以在 Webstorm 官方插件市场下载,直接搜索插件名安装即可。


有一些感觉并没有解决痛点的插件比如打字特效 activate-power-mode、彩虹括号 Rainbow Brackets、彩虹进度条 Dmitry Batkovich 就没有推介了。


还有一些第三方智能代码补全的插件比如 Codota、Kite、Tabnine,我觉得 Webstorm 自带的机器学习智能补全就挺好用了,用第三方插件有时候代码补全速度有点慢,要额外占用内存,有时候还会跟自带的补全冲突或者重复。可能是我机器配置不够高,感兴趣可以安装了试试看。


Chinese Language Pack / 中文语言包


早期没有官方中文语言包,还要靠 Github 上有个长期没有更新的翻译插件,好在 2021 年官方推出了中文语言包,弥补了在下弱鸡的英语能力(六级 436 飘过),不是说原英文的界面不能用,只是觉得英文的有些设置不能做到一目了然,要找半天。


有的大佬可能觉得英文的用着挺好,用习惯了也一样,看你个人需要了~


微信截图_20220427235543.png


AceJump:光标快速定位


可以将插入光标快速导航到编辑器中可见的任何位置,有了 AceJump 脱离鼠标全键盘开发不在话下,还有个很好的地方在于即使编辑器窗口拆分了,也可以在不同的窗口之间导航,快捷键 control/ctrl + ;


微信截图_20220427235547.png


GitToolBox:Git功能扩展


很多 Git 的功能增强,比如自动 fetch 代码,状态栏中显示当前 Git 分支的未提交和落后提交数显示,过时分支清理,commit 窗口支持 emoji 表情,Inline Blame 可以看到每行代码是谁提交的、什么时候提交的、以及 commit 信息等等,如果你经常用 Git,这个插件必装了。


微信截图_20220427235553.png


HighlightBracketPair:高亮括号


有些大佬会推介彩虹括号插件 Rainbow Brackets,我也下载过,但括号多了之后花花绿绿的看着也一样分不清。


后来发现 HighlightBracketPair 插件,这个插件会在当前括号上高亮之外,还会在左侧代码行数那显示括号范围,比彩虹括号插件更加直观而且不容易看花眼。


微信截图_20220427235558.png


Key Promoter X / Presentation Assistant:快捷键显示


很多大佬的博客推介 Key Promoter X,可以在你点某个功能的时候提示你这个功能的快捷键,多用一用就可以脱离鼠标,使用快捷键触发这些功能。


微信截图_20220427235603.png


还有一个很棒的插件叫 Presentation Assistant,支持功能的汉化显示,而且还可以将 Mac 和 Win 环境的快捷键都展示出来。


微信截图_20220427235607.png


One Dark Theme / Material Theme UI Lite:好看的免费主题


原来有个很好用的插件 Material Theme UI,但后来收费了,不过没关系,还有一些免费的主题也很好用,比如 Material Theme UI LiteCoderpillr ThemeOne Dark theme 等等,都挺好看的,自己挑个喜欢的主题吧~


微信截图_20220427235616.png


Atom Material Icons:好看的图标


以前有个编辑器叫 Atom,现在用的人不多了,它最大的贡献就是主题和图标设计的非常好看,这个插件就是将 Atom 的图标引入到 Webstorm 的文件夹、文件上,让编译器看起来更美观。


微信截图_20220427235625.png


IntelliVue:Vue功能增强


Webstorm 上对 Vue 支持很棒的插件,现在已经支持 Vue3 的一些语法,可以快速创建 Vue2 的 data、methods 等,或者 Vue3 的 setup method 等,帮你少些一些模板代码。


安装后菜单栏会多一个 Vue 的选项,下拉框里有一些操作功能,对 Vue2 项目比较好用。


微信截图_20220427235630.png


Translation:最佳翻译插件


可以便捷地在 Webstorm 中进行翻译,省去了打开翻译软件的操作,支持右键方式选中翻译,也可以打开独立窗口进行整段的翻译。


个人感觉最方便的功能就是翻译并替换功能,Mac 上快捷键 command + control + O,Win 上为 ctrl + shift + X,在写业务代码的时候会自动翻译汉字的业务词条自动翻译,字符串可以选择大驼峰或小驼峰什么的。


微信截图_20220427235635.png


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,这两个差不多的快捷键也很好记。


微信截图_20220427235640.png


.ignore:版本管理工具的忽略文件插件


.ignore 插件支持创建多种 .ignore 文件比如


.gitignore.eslintignore.dockerignore 等等,我们最常用的基本都支持,新建的时候支持选择不同类型的框架或库常用的忽略配置,如 node_modulesdist.cache 等。


微信截图_20220427235645.png


在文件上右键也可以快速添加到忽略文件中,是使用 Git 必装的小插件。


微信截图_20220427235650.png


也支持将文件旋选中右键快速添加到 .gitignore 文件中。


Import Cost:显示引入的包体积大小


VSCode 上也有这个插件,会在你引入的库后面告诉你这个库的体积大小,和 gzip 后的包体积。


微信截图_20220428000102.png


CodeGlance:右侧代码小地图


在代码面板的右侧显示一个代码缩略图,像 VSCode 里那样。我看有人在用这个插件,但在下不怎么用,在编辑器里使用分屏的时候觉得有些碍事,长文件中用着还行,看你个人喜好了。


微信截图_20220428000107.png


.env files support:配置文件支持


可以给 .env 环境配置文件增加语法高亮,给配置文件中定义的变量增加智能索引。另外在使用 Webpack 进行打包的时候,我们会有一些环境变,安装该插件后,就会提示环境变量文件中所拥有的环境变量。


微信截图_20220428000111.png


JetBrains Toolbox:全家桶管理软件


用来集中管理 Webstorm、IntelliJ、GoLand 等 JetBrains 全家桶软件,管理常用设置、项目导航,以及自动更新、插件更新、回滚和降级软件版本等功能,如果你 JetBrains 系列软件安装了不止一款,那十分推介安装。


微信截图_20220428000119.png


2. 实用设置 Tips


2.1 关闭不需要的插件


Webstorm 安装后自带了很多内置插件,有些不需要的或不常用可以将其关闭,项目开启速度可以进一步增加。


微信截图_20220428000125.png


2.2 连体字


现在不少字体都可以设置连体字,比如 Fira Code 或者 2021 年 JetBrains 增加的专用于编程的 JetBrains Mono 字体。强烈推介后者,2021 及以后版本内置于 Webstorm,是最新发布专用于编程的字体,清晰、易读、辨识度高。


微信截图_20220428000243.png


设置使用 JetBrains Mono 字体后,可以达到下面这样的效果:


微信截图_20220428000247.png


如果你喜欢这种风格,在设置的 编辑器->配色方案->配色方案字体 中修改。


微信截图_20220428000254.png


2.3 设置默认内存


相信很多人装上 Webstorm 第一件事就是改默认内存,可以在 .vmoptions 设置文件里手动改,也可以在 帮助->更改内存设置 中更改,建议设置为 4096 或者更高一点。


微信截图_20220428000259.png


当前的占用内存在软件界面右下角可以看到,如果感觉内存设置的不够,可以再改大点。


2.4 设置配置同步


可以在 文件 -> 管理IDE设置 -> IDE设置同步 中设置配置同步,Webstorm 会将你的配置与你的账户绑定,这样你家里的电脑就可以和公司的电脑使用相同的配置和快捷键。


微信截图_20220428000305.png



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

热门文章

最新文章