WebStorm 常用功能的提示分享

標籤：webstorm

    

WebStorm 是 JetBrain 公司開發的一款 JavaScript IDE，使用非常方便，可以使編寫代碼過程更加流暢。

本文在這裡分享一些常用功能的提示，希望能協助大家更好的使用這款強大的 JavaScript 開發工具。

文章來源：葡萄城產品技術社區

代碼編輯

• 代碼跳轉: 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 指令碼，也可以執行服務端指令碼

650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143319021-1853972669.png" style="margin:0px;padding:0px;border:0px;" />

NPM

View -> Tool Windows -> npm，可以開啟 npm 快捷視窗

這裡可以直接右鍵 update

可以雙擊執行 npm 命令

自動化的測試

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

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

650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143403412-823807787.png" style="margin:0px;padding:0px;border:0px;" />

版本控制

本地代碼控制

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

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

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

650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143540334-1035247013.png" style="margin:0px;padding:0px;border:0px;" />

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

650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143553646-1469619697.png" style="margin:0px;padding:0px;border:0px;" />

Task

可以與主流的 Task 平台整合，可以自動拉取 Task，自動建立提交記錄.

 650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143606490-144580768.png" style="margin:0px;padding:0px;border:0px;" />

快速鍵

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

這裡是快速鍵文檔

 650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143622318-1751139562.png" style="margin:0px;padding:0px;border:0px;" />

格式化代碼

快速鍵: Ctrl + Shift + L

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

靜態檢查

可以整合主流靜態檢查工具

這裡以 ESLint 為例

650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143646443-1444786529.png" width="661" height="393" style="margin:0px;padding:0px;border:0px;" />

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

650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143705443-417450229.png" style="margin:0px;padding:0px;border:0px;" />

新支援人員

支援最新技術，如 TypeScript CoffeeScript 最新版、 Angular2、ES6 ES7等，整合 Gulp、Grunt 等工具。

虛擬機器參數

如果工程較大，強烈建議使用 64 位元 jre，並修改虛擬機器記憶體參數，根據本機實體記憶體盡量設定大。

 650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143752568-1449455547.png" style="margin:0px;padding:0px;border:0px;" />

650) this.width=650;" src="http://images2015.cnblogs.com/blog/139239/201611/139239-20161129143955693-1813136970.png" style="margin:0px;padding:0px;border:0px;" />

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

 

學習 WebStorm 的提示，可以協助我們更好的開發前端項目。同時，在開發過程中，還可以藉助一些開發工具，如Wijmo，這是一款大而全面的前端 HTML5 / JavaScript UI控制項集，能為公司專屬應用程式提供更加靈活的操作體驗，現已全面支援Angular 2。

WebStorm 常用功能的提示分享