WebStorm 常用功能的使用技巧分享

代碼編輯

• 代碼跳轉: Ctrl + 左鍵 或者 Ctrl + B，可以跳轉到函數或者變量的聲明位置

• 調用位置: Alt + F7，查找調用者

• 自動補全: 最好是修改一下響應時間，Settings->Editors->General->Code Completing: Autopopup in 0.

• 打開文件: Ctrl + Shift + N

• 打開類: Ctrl + N

• 打開函數: Ctrl + F12

• “超級”打開: 雙擊 shift，可以 search anywhere.

• 復制整行: Ctrl + D

• 刪除整行: Ctrl + Y

• 折疊當前塊: Ctrl + “-”，折疊當前塊以及子塊: Ctrl + Alt + “-”，折疊全部塊: Ctrl + Shift + “-”

• 展開, 把折疊的快捷鍵換成”+”

• 選擇: Ctrl + W，會從小到大逐漸擴大。比如按一次,選中word，按兩次，選擇表達式, 三次, 整個函數

重構

• 改名: Shift + F6，修改函數名，變量名，文件名，同時修改所有引用的位置.

• 移動文件: F6, 并修改文件的引用位置, 包括 html 和 js文件

• 抽取函數: Ctrl + Alt + M，整塊代碼抽取成函數

• 抽取變量: Ctrl + Alt + V，當前選中抽取為變量

• 移動整塊代碼: Ctrl + Shift + ↑↓

• 包裹: Ctrl + Alt + T，外層包裹，比如 if、try catch等

Run & Debug

可以直接 Run & Debug NodeJS 腳本，也可以執行服務端腳本

NPM

View -> Tool Windows -> npm，可以打開 npm 快捷窗口

這里可以直接右鍵 update

可以雙擊執行 npm 命令

自動測試

可以在 IDE 中啟動測試框架，比如 karma.

可以自動監控代碼變化，自動運行測試腳本.

版本控制

本地代碼控制

VCS -> Local history 可以列出本次 WebStorm 啟動以后，所有的代碼修改。

可以集成主流的版本控制工具, 如 git、mercurial、subversio 等

通過兩個按鈕, 即可完成 pull、update、merge、commit、push 的完整流程, 非常方便

通過 branch 管理工具，可以方便的切換 branch 工作，同時可以 create、close、merge 操作

Task

可以與主流的 Task 平臺集成，可以自動拉取 Task，自動創建提交記錄.

快捷鍵

通過 Ctrl + Shift + A，可以快速的通過關鍵字檢索到相應的功能設置和快捷鍵。

這里是快捷鍵文檔

格式化代碼

快捷鍵: Ctrl + Shift + L

可以設置為 commit 前自動格式化

靜態檢查

可以集成主流靜態檢查工具

這里以 ESLint 為例

在 IDE 中可以啟動對單個文件，或者整個工程的靜態檢查

新技術支持

支持最新技術，如 TypeScript CoffeeScript 最新版、 Angular2、ES6 ES7等，集成 Gulp、Grunt 等工具。

虛擬機參數

如果工程較大，強烈建議使用 64 位 jre，并修改虛擬機內存參數，根據本機物理內存盡量設置大。

本文只分享了一些個人常用的基本操作，更多 WebStorm 功能的使用技巧，期待能和大家一起探索。