侧边栏壁纸
博主头像
神奇的程序员

今天的努力只为未来

  • 累计撰写 167 篇文章
  • 累计创建 25 个标签
  • 累计收到 215 条评论

目 录CONTENT

文章目录

合理使用WebStorm-自定义TouchBar提升使用体验

神奇的程序员
2022-12-06 / 0 评论 / 5 点赞 / 799 阅读 / 1,309 字 正在检测是否收录...

前言

前几天Webstorm推送了新版本,本次更新带来了全新的界面设计。用了几天后,界面确实很干爽简洁,突然间我的目光转移到了MacBook自带的Touchbar上面,觉得好像少了点什么🤔

要是能把我在开发中经常用到的一些操作放到上面就好了,查了下JetBrains的官网发现确实可以自己定义Touchbar上面要展示的功能,本文就跟大家分享下自定义的方法,欢迎各位感兴趣的开发者阅读本文。

实现过程

打开webstorm的设置菜单:依次点击顶栏的Webstorm -> Preferences...,或者直接按快捷键command + ,在弹出的菜单中选择Menus and Toolbars

image-20221206220933139

向下滚动,找到Touch Bar选项。

image-20221206221101272

展开后,有3个选项,分别为:

  • 编辑器内触发搜索时要展示的操作选项
  • 在编辑器窗口内停留时要展示的操作选项
  • 调试代码时要展示的操作选项

image-20221206221403998

此处我们要添加的是Default状态下的操作选项,我们将其点开并选中,点击“加号”图标在弹出的菜单中选择Add Action…

image-20221206221949462

image-20221206222118945

在弹出的菜单中,找到自己想要添加的功能,点击OK即可。

image-20221206222521789

添加完成后即可在Default菜单中找到,默认在最后面,你可以通过拖拽来进行排序,将其放到合适的位置。

注意:你添加进来的某些操作可能默认没有图标,会显示一个绿色的?,你可以自己给它设定一个图标,实现起来也很简单,只需要选中它,点击工具栏的编辑图标。

image-20221206223000523

找到合适的图标后,点OK即可。

image-20221206223050381

添加一些常用功能

我在平常开发中经常用到的功能有:

  • 显示当前打开的文件在目录结构树中的位置
  • 显示/隐藏目录结构树
  • 提交代码、pull代码
  • 显示/隐藏git分支信息
  • 在Finder中显示当前打开的文件
  • 打开/关闭终端

前三个功能将默认展示在TouchBar上,后三个功能将在按下option键时展示出来。

对应的菜单设置如下所示。

image-20221206225425318

image-20221206225614920

添加完成后,当我鼠标在Webstorm中任意位置点击时,我的Touch Bar如下所示:

IMG_7521

按下ctrl后,展示出来的操作选项。

IMG_7522

注意:某些操作操作,搜索结果可能不能精确找到,这时你就需要在Other菜单下找一下了。

image-20221206225828736

自定义ToolBar

新的界面中,编辑器的右上方展示的功能选项区域称为Toolbar,默认的选项你可能也不喜欢,想自定义它也很容易,只需要右上方的空白区域右键,选择Customize Toolbar...即可。

打开的界面如下所示,跟前面的设置界面大同小异,因此你可以用相同的方法来添加你需要的功能,按照你喜欢的顺序进行拖拽排序,我设置好的界面如下所示。

image-20221206230210471

设置完成后,点OK,即可在右上方的区域看到你设置好的内容。

image-20221206225914723

最后,给大家放一张我编辑器设置完成后的完整截图。

image-20221206230540809

注意:我还隐藏了Tool Window Bars,这样看起来就跟我的界面一摸一样了,隐藏它也很简单,你只需要依次点击编辑器顶栏的View -> Appearance -> Tool Window Bars即可。

image-20221206230828073

写在最后

至此,文章就分享完毕了。

我是神奇的程序员,一位前端开发工程师。

如果你对我感兴趣,请移步我的个人网站,进一步了解。

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
  • 本文首发于神奇的程序员公众号,未经许可禁止转载💌
5

评论区