WebStorm極速開發-進階版-讓你不用動滑鼠

在去年六月時，很幸運的能夠上到極速開發的課程，至此開始就覺得在開發的過程中，需要使用滑鼠就覺得很「阿雜」。因此不斷精進，並且找到相關工具or原本IDE的使用更加強化。以下介紹，本人的開發習慣，以及其對應策略。

• 筆電OS：macOS
• 開發IDE:WebStorm
• IDE安裝外掛：bitbucket linky、Dash、ideavim、AceJump (ideavim、AceJump 在此不進行介紹，有需要請報名極速開發課程。)
• 桌面應用程式：Hammerspoon、Alferd、Maccy、
• 鍵盤layout：colemak

WebStorm 視窗呈現進階應用

1. 切換視窗至Project <cmd⌘+1>
   以下為我們一般看到的開發程式時所看到的介面。

但是我們不可能永遠都是看著程式碼，一定會有需要看程式資料夾架構的時候。所以我們可以透過<cmd⌘+1>，開啟資料夾的架構，也就是IDE的Project。

當游標停止在project 時，上方會呈現綠藍色（不知道怎麼描述該顏色，總之跟分頁的底色不一樣。）此時可以透過方向鍵，以及直接輸入字母尋找你所想要的檔案。附帶一題（如果不想移動手指到方向鍵，可以找nerdTree幫忙你，但本人沒有使用因為colemak layout 的問題，之後再跟大家做介紹。)

2. 切換視窗至Git <cmd⌘+9>
當我們需要查看git 的路徑或者commit 的資訊，我們需要開啟git的視窗。按下<cmd⌘+9>即會彈出git 視窗，呈現相關資訊

3. 切換視窗至run <cmd⌘+4>
當我們跑單元測試時，WebStorm即會呈現run視窗。告知每個測試執行狀況。若我們需要再重新查看時，可以使用<cmd⌘+4>開啟。

蛤！你說講了這些你就快要忘記？沒關係，以下告訴你怎麼看快捷鍵。按下<control⌃+tab⇥> 會呈現switcher 視窗。

此時，紅色區塊內的數字及代表，<cmd⌘+紅色框內的數字鍵>，就是開啟該視窗的快捷鍵。譬如剛剛提到的git、run、project。至於下方的英文字母，則是在switcher視窗的狀態下，按下該字母即會呈現該視窗。譬如我想開啟，terminal視窗，<control⌃+tab⇥+T>即會呈現terminal 視窗。

這樣基本上就可以達到不用滑鼠及呈現該視窗的功能。

---

「你又說你這樣中間程式碼會看不到，程式碼區域太小？」這裡教大家，「關閉全部視窗僅呈現程式碼區域」，以及「關閉單一視窗」的方式。

1. 關閉全部視窗<cmd⌘+shift⇧+F12>
   當發現左、右、下方的區域皆被操作站滿想要重新開始coding 有舒服的環境時，可以按下<cmd⌘+shift⇧+F12>讓程式碼介面重新變成全螢幕的狀態。
2. 關閉單一視窗<shift⇧+esc⎋>
   如果我還是想保留run+project 這兩個視窗僅想要把git 的區域關掉，我們可以先<cmd⌘+9>將游標位置移動到git 視窗，並且按下<shift⇧+esc⎋>該視窗就會關閉。

以上是WebStorm的關於視窗進階應用。

---

WebStorm Git 操作應用

我知道很多人可能會使用command line 直接操作git，我自己也是這樣使用差不多一年的時間，但後來不知道為什麼想說買了webstorm來玩玩IDE的git 操作好了。git 的操作其實比上述的視窗還要簡單很多，我們僅需要開啟git的操作總覽，後續介面上都會跟你說要按下哪一個案件了。

開啟 VCS Operations <ctrl⌃+V>

接著在VCS Operations當中就有一排數字呈現，代表如果你想要使用該功能按下該數字鍵即可。或者直接按照功能的名稱進行輸入，譬如：我想要去branches當我輸入b 這個字母時會自動變成搜尋模式

這時候再補上”r” 就會游標就會鎖定在branches 上了。

checkout branch當我們進入branches介面時，呈現以下畫面

接著只需要輸入你的分支名稱，讓IDE進入搜尋狀態。

讓游標停留在你想要checkout 的分支上，按下return↩︎就會呈現後續可以進行的操作。此時就看你要checkout 到此分支，或者從此分支開另外的分支…等等

其他的git 操作我相信大家可以舉一反三的XD

補充WebStorm bitbucket Linky

bitbucket linky  <cmd⌘+shfit⇧+X>延續剛剛的git操作，在此補充說明一下，如果您的專案跟我一樣是放置在bitbucket 上，可以安裝bitbucket Linky這個plugin。當你已經commit 好你的程式想要提交pull request，或者查案remote 的程式碼時，按下 <cmd⌘+shfit⇧+X>此時在你的webstorm最下方會出現提示訊息。

接著按下<shift⇧+B>開啟bitbucket in browser。或者<shift⇧+P>提交pull request。

補充Dash 查詢文件的幫手

• Dash  <cmd⌘+shfit⇧+D>
  如果你跟我一樣忽然不知道這個method 在幹嘛，想要查文件，這裡可以提供一個比alferd 查詢更快的方式。因為只要按四個按鍵，以下為使用教學。

前置作業

• 在你的mac 上安裝 Dash 。
• 安裝dash plugin 在你的IDE上。
• 將dash 安裝你需要的Docset (哎，這個又可以再寫一篇教學，先請大家自己查sorry)

接著開始嚕，四個按鍵，你準備好了嗎？游標停在class

接著按下 <cmd⌘+shift⇧+D>即呈現以下畫面。

然後第四個鍵<return↩︎>給他按下去!!

MDN文件直接呈現在你眼前。大概0.55688秒可以完成文件查詢。抱歉，用alferd 綁MDN已經過時了，呵呵還要綁這串？https://developer.mozilla.org/en-US/search?q={query}我已經查詢結束啦！

最後，喔還沒最後

寫到現在發現還有好多東西還沒說。之後再跟大家分享吧！跟大家預告，今年鐵人賽希望可以拿快捷鍵大全以及各式各樣的生產力工具結合的內容進行參賽，真正實現mac無滑鼠開發。以上介紹希望大家喜歡！

謝謝大家耐心地閱讀！！希望大家在看到此篇文章後可以訂閱，並且花個5分鐘幫我填寫下問卷，讓我更有動力！！！問卷網址如下https://forms.gle/iVmPmnvJW22bpxbc8