JetBrains WebStorm

WebStorm是一款非常好用的JavaScript 開發工具，軟件目前已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的 HTML5 編輯器”、“最智能的 JavaScript IDE ”等。與 IntelliJ IDEA 同源，繼承了 IntelliJ IDEA 強大的 JS 部分的功能。

功能介紹：

1、智能的代碼補全

支持不同瀏覽器的提示，還包括所有用戶自定義的函數。

代碼補全包含了所有流行的庫，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

2、代碼格式化

代碼不僅可以格式化，而且所有規則都可以自己來定義

3、html提示

大家經常在js代碼中編寫html代碼，一般來說十分痛苦，不過有了智能提示，就爽多了。而且html里面還能有js提示。

4、聯想查詢

只需要按著Ctrl鍵點擊函數或者變量等，就能直接跳轉到定義；可以全代碼導航和用法查詢

項目查找函數或者變量，還可以查找使用并高亮。

5、代碼重構

這個操作有些像Resharper，熟悉Resharper的用戶應該上手很快，支持的有重命名、提取變量/函數、內聯變量/函數、移動/復制、安全刪除等等。

6、代碼檢查和快速修復

可以快速找到代碼中的錯誤或者需要優化的地方，并給出修改意見，快速修復。

7、代碼調試

支持代碼調試，界面和IDEA相似，非常方便。

8、代碼結構瀏覽

可以快速瀏覽和定位

9、代碼折疊

功能雖小，不過勝在方便高效

10、包裹或者去掉外圍代碼

自動提示包裹或者去掉外圍代碼，一鍵搞定。

安裝方法：

1. 配置 Webstorm 安裝項

選擇 64 位，防止桌面 Webstorm 快捷方式打不開。

配置 Webstorm 安裝項

2. 是否導入 Webstorm 配置信息

這里的意思是之前使用過 Webstorm ，并且配置過，Webstorm 配置信息可以起到優化性能的作用，因為它本身是個比較吃內存的東西，文件多了容易卡頓，可以通過在配置文件中得到優化，后面單獨介紹優化。

劇透：Webstorm 安裝完成后配置信息位置：C:\Users\Administrator\.WebStorm2017.1。

是否導入 Webstorm 配置信息

3. 激活 Webstorm

免費版的試用期是 30 天，30 天之后各種讓人不舒服，比如不能保存，每隔30分鐘自動關閉程序等等，所以在開始的時候還是激活成功使用永久版本的比較好。

要填的內容：http://idea.imsxm.com/，復制進去即可。

激活 Webstorm

有朋友反映使用該網站激活失敗，我又去找了另一種激活方式，實測在 Webstorm 2017.2 版本上是激活成功的。Webstorm2017.2 版本激活文件，密碼：fls5

4. 設置 Webstorm 工具的主題和風格

這里暫時寫保持默認設置，后面會單獨介紹如何折騰一個獨一無二的屬于個人審美的 Webstorm 工具。

使用體驗：

1. 設置開發工具主題/風格

File -> settings -> Editor -> colors&fonts -> scheme name.

跟人覺得 Default Darcula 這兩款主題還可以，如果內置主題都不喜歡，可以去 主題下載地址 尋找你中意的主題。

2. 換成自己熟悉編輯器的快鍵鍵：如 Eclipse 的快捷鍵 + 自定義快捷鍵組合

快捷鍵設置

3. 取消勾選安全保存時間

這兩項取消勾選，否則影響熱更新，不能及時將修改的內容反應在瀏覽器上。

取消勾選安全保存時間

4. 集成 Eslint

集成 Eslint 的前提是你的項目里使用了 Eslint。

集成 Eslint

5. 集成 Git

對 Webstorm 集成 Git 的前提是你已經掌握 Git 的基礎使用方法，如果對于 Git 的基本概念不了解的話，可以參閱：廖雪峰 Git 教程。

集成 Git

Webstorm 集成 Git 帶來的遍歷就是將 Git 的指令用選項的意思表達出來，如果你熟悉 Git 是如何提交代碼的，那么在 Webstorm 使用 Git 提交代碼應該不是什么難事。

git 提交代碼

對于分支的操作在 Webstorm 右下角