合理使用WebStorm-自定義TouchBar提升使用體驗
前言
前幾天Webstorm推送了新版本,本次更新帶來了全新的界面設計。用了幾天后,界面確實很干爽簡潔,突然間我的目光轉移到了MacBook自帶的Touchbar上面,覺得好像少了點什么.
要是能把我在開發中經常用到的一些操作放到上面就好了,查了下JetBrains的官網發現確實可以自己定義Touchbar上面要展示的功能,本文就跟大家分享下自定義的方法,歡迎各位感興趣的開發者閱讀本文。
實現過程
打開webstorm的設置菜單:依次點擊頂欄的Webstorm -> Preferences...?,或者直接按快捷鍵command + ,在彈出的菜單中選擇Menus and Toolbars
向下滾動,找到Touch Bar選項。
展開后,有3個選項,分別為:
編輯器內觸發搜索時要展示的操作選項
在編輯器窗口內停留時要展示的操作選項
調試代碼時要展示的操作選項
此處我們要添加的是Default狀態下的操作選項,我們將其點開并選中,點擊“加號”圖標在彈出的菜單中選擇Add Action...
在彈出的菜單中,找到自己想要添加的功能,點擊OK即可。
添加完成后即可在Default菜單中找到,默認在最后面,你可以通過拖拽來進行排序,將其放到合適的位置。
注意:你添加進來的某些操作可能默認沒有圖標,會顯示一個綠色的??,你可以自己給它設定一個圖標,實現起來也很簡單,只需要選中它,點擊工具欄的編輯圖標。
找到合適的圖標后,點OK即可。
image-20221206223050381
添加一些常用功能
我在平常開發中經常用到的功能有:
- 顯示當前打開的文件在目錄結構樹中的位置
- 顯示/隱藏目錄結構樹
- 提交代碼、pull代碼
- 顯示/隱藏git分支信息
- 在Finder中顯示當前打開的文件
- 打開/關閉終端
前三個功能將默認展示在TouchBar上,后三個功能將在按下option鍵時展示出來。
對應的菜單設置如下所示。
添加完成后,當我鼠標在Webstorm中任意位置點擊時,我的Touch Bar如下所示:
IMG_7521
按下ctrl后,展示出來的操作選項。
IMG_7522
注意:某些操作操作,搜索結果可能不能精確找到,這時你就需要在Other菜單下找一下了。
自定義ToolBar
新的界面中,編輯器的右上方展示的功能選項區域稱為Toolbar,默認的選項你可能也不喜歡,想自定義它也很容易,只需要右上方的空白區域右鍵,選擇Customize Toolbar...即可。
打開的界面如下所示,跟前面的設置界面大同小異,因此你可以用相同的方法來添加你需要的功能,按照你喜歡的順序進行拖拽排序,我設置好的界面如下所示。
設置完成后,點OK,即可在右上方的區域看到你設置好的內容。
最后,給大家放一張我編輯器設置完成后的完整截圖。
注意:我還隱藏了Tool Window Bars,這樣看起來就跟我的界面一摸一樣了,隱藏它也很簡單,你只需要依次點擊編輯器頂欄的View -> Appearance -> Tool Window Bars即可。