JetBrains WebStorm

WebStorm是一款非常好用的JavaScript 開(kāi)發(fā)工具，軟件目前已經(jīng)被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”、“最強(qiáng)大的 HTML5 編輯器”、“最智能的 JavaScript IDE ”等。與 IntelliJ IDEA 同源，繼承了 IntelliJ IDEA 強(qiáng)大的 JS 部分的功能。

功能介紹：

1、智能的代碼補(bǔ)全

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

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

2、代碼格式化

代碼不僅可以格式化，而且所有規(guī)則都可以自己來(lái)定義

3、html提示

大家經(jīng)常在js代碼中編寫(xiě)html代碼，一般來(lái)說(shuō)十分痛苦，不過(guò)有了智能提示，就爽多了。而且html里面還能有js提示。

4、聯(lián)想查詢(xún)

只需要按著Ctrl鍵點(diǎn)擊函數(shù)或者變量等，就能直接跳轉(zhuǎn)到定義；可以全代碼導(dǎo)航和用法查詢(xún)

項(xiàng)目查找函數(shù)或者變量，還可以查找使用并高亮。

5、代碼重構(gòu)

這個(gè)操作有些像Resharper，熟悉Resharper的用戶(hù)應(yīng)該上手很快，支持的有重命名、提取變量/函數(shù)、內(nèi)聯(lián)變量/函數(shù)、移動(dòng)/復(fù)制、安全刪除等等。

6、代碼檢查和快速修復(fù)

可以快速找到代碼中的錯(cuò)誤或者需要優(yōu)化的地方，并給出修改意見(jiàn)，快速修復(fù)。

7、代碼調(diào)試

支持代碼調(diào)試，界面和IDEA相似，非常方便。

8、代碼結(jié)構(gòu)瀏覽

可以快速瀏覽和定位

9、代碼折疊

功能雖小，不過(guò)勝在方便高效

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

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

安裝方法：

1. 配置 Webstorm 安裝項(xiàng)

選擇 64 位，防止桌面 Webstorm 快捷方式打不開(kāi)。

配置 Webstorm 安裝項(xiàng)

2. 是否導(dǎo)入 Webstorm 配置信息

這里的意思是之前使用過(guò) Webstorm ，并且配置過(guò)，Webstorm 配置信息可以起到優(yōu)化性能的作用，因?yàn)樗�本身是個(gè)比較吃?xún)?nèi)存的東西，文件多了容易卡頓，可以通過(guò)在配置文件中得到優(yōu)化，后面單獨(dú)介紹優(yōu)化。

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

是否導(dǎo)入 Webstorm 配置信息

3. 激活 Webstorm

免費(fèi)版的試用期是 30 天，30 天之后各種讓人不舒服，比如不能保存，每隔30分鐘自動(dòng)關(guān)閉程序等等，所以在開(kāi)始的時(shí)候還是激活成功使用永久版本的比較好。

要填的內(nèi)容：http://idea.imsxm.com/，復(fù)制進(jìn)去即可。

激活 Webstorm

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

4. 設(shè)置 Webstorm 工具的主題和風(fēng)格

這里暫時(shí)寫(xiě)保持默認(rèn)設(shè)置，后面會(huì)單獨(dú)介紹如何折騰一個(gè)獨(dú)一無(wú)二的屬于個(gè)人審美的 Webstorm 工具。

使用體驗(yàn)：

1. 設(shè)置開(kāi)發(fā)工具主題/風(fēng)格

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

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

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

快捷鍵設(shè)置

3. 取消勾選安全保存時(shí)間

這兩項(xiàng)取消勾選，否則影響熱更新，不能及時(shí)將修改的內(nèi)容反應(yīng)在瀏覽器上。

取消勾選安全保存時(shí)間

4. 集成 Eslint

集成 Eslint 的前提是你的項(xiàng)目里使用了 Eslint。

集成 Eslint

5. 集成 Git

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

集成 Git

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

git 提交代碼

對(duì)于分支的操作在 Webstorm 右下角