WebStorm（Amaze開發工具）--JavaScript 開發工具

WebStorm（Amaze開發工具）--JavaScript 開發工具

1、總結

一、webstorm：前段開發神器，應該比sublime好用。 

二、webstorm功能：支持顯示圖片寬高，標籤重構，自帶版本控制等功能

 

2、簡介

WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽爲「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

 

3、WebStorm 有哪些過人之處？

本文內容只適用於 WebStorm 8，如今 WebStorm 已經更新，請注意。

自問自答，多圖殺貓。

先說缺點吧：

1. 常駐內存300M左右，若是你的內存只有1G，請用Sublime/VIM。若是你內存有4G，我以爲你真不用在乎這點內存，Chrome 佔的內存比這多多了，你還不是用的很嗨？
2. 啓動一個項目所需的時間與項目大小相關。不肯意等的請用Sublime。某人說 IDE 的正確打開方式是上班啓動之，下班關閉之。更有甚者說是入職啓動之，辭職關閉之。大家感覺一下。
3. 英語太差的就不要用 WS 了，喜歡花時間調教 VIM 各類插件的也不必用 WS 了。

因此我以爲， 若是你機器的內存有 4G 以上，你天天花在寫代碼上的時間又很長，並且沒有時間精力折騰 VIM 各類蛋疼的插件的話，必定要試試 WebStorm！
WebStorm 爲前端而生，專門爲 JS 開發作了不少優化，有許多令前端工程師眼前一亮的地方，我十分喜歡這款 IDE。下面講下我以爲很是有用的幾個功能（絕大部分是官方發行版本自帶的功能）。
---
UPDATE: WebStorm 8 已經對我說的部分功能作了用戶體驗上的優化，因此具體細節可能和我說的有出入。
---
1. 圖片寬高提示。
平時你在寫 HTML 時，遇到 img 標籤時，是否是要費好大勁去知道圖片的寬高？WS 直接展現給你了。
2. 標籤重構、文件重命名、 CSS 重構以及 JS 重構
2.1 標籤重構
若是你想把

<div>此處省略200行</div>

改成

<p>此處省略200行</p>

要怎麼辦？在 WS 裏，你只需將光標移到 <div> 或者 </div>，讓後按重構的快捷鍵就能夠輕鬆地把它變爲 p 標籤。

2.2 文件重命名
你想把 style1.css 重命名爲 style2.css，可是 style1.css 被不少 html 文件引用了，怎麼辦？
使用 WS 的文件重命名功能，大膽地重命名吧，它會自動幫你更新全部引用。（前提是你的引用是正確且符合常規的）

2.3 CSS 重構
另外，若是你想把內聯的 style 移到外部 CSS 文件裏，也是但是經過重構功能實現的。雖然在生產環境下你不會在 HTML 裏寫內聯 style 的，但咱們調試時爲了方便，會常常這麼作。等你調試完了，天然會用到這個功能。

（WS 8.0 以更新此功能，詳見評論）
JS 重構也很好用。包括變量重命名、聲明提高等等等等。WS 是我用過的對 JS 重構支持最好的 IDE。你能夠告訴我還有什麼 IDE 對 JS 重構支持不錯，我去比較下。

 

3. 對業界最新技術的支持
你安裝 WS 後，你會發現它內置了對 SASS、NodeJS、CoffeeScript、Jade 的支持。
連 Emmet 都內置了，並且快捷鍵仍是 Tab，太方便了。沒有這個功能我都不想寫 HTML 了。
若是它發現你的文件後綴是 .less/.scss/.sass 或者 .coffee，就會問你，是否須要把它們自動編譯爲 css 或 js。
若是它發現你有 NPM，會自動列出你安裝過的 package，方便管理和升級。（這個貌似須要裝 NodeJS 支持插件，我記不清是否是自帶功能了。）

4. 可自定義代碼格式化規則
雖然不少 IDE 都有格式化功能，但能自定義到 WS 這種程度的還沒見過。

• 是否保留單行的 { }。
• 是否保留單行的function。
• 屬性是否要對其。
• 冒號先後是否加空格。
• ……

 

5. 設置項是可搜索的（英文）
「這個 IDE 有這麼多設置項，我要折騰很久啊！」
WS 考慮到了這一點，因此他的全部設置都是可搜索的，不會讓你漫無目的地摸索，你想設置什麼就搜什麼。
想設置外觀，就搜 appearance；
想設置快捷鍵，就搜 keymap；
想設置插件就搜 plugin。
當你進入 keymap，你還能夠進行二級搜索，好比你想知道 format 功能的快捷鍵，就直接搜 format。
你甚至能夠反過來，搜 Ctrl + L 這個快捷鍵對應的功能是什麼。
P.S. WS 的快捷鍵是支持二次按鍵的。好比我把 Git add 的快捷鍵設置爲 Alt+G & Alt + A，把 Git commit 設置爲 Alt+G & Alt+C。這樣的好處是不會讓你無快捷鍵可設。

 

6. 再說說其餘 IDE 也有的功能吧
6.1. 本地版本控制。你在 WS 裏全部的編輯都被存在本地了，你隨時能夠還原到歷史版本。

不過要注意這些歷史有可能被清除。
6.2. 能與番茄工做法結合。有個插件叫 Pomodoro-tm，應該有很多程序員喜歡。
6.3. 能與 Redmine / Trello / Jira 等集成。
6.4 文件結構分析。直接看圖。
JS 文件結構
HTML 文件結構
這個功能對於大文件特別有用。

 

好功能太多，有機會之後再介紹了。

---------------------------------------------
回覆評論：

VIM / ST 黨可能會說，你這些功能 VIM / ST 也能作到啊。嘿嘿，作不作獲得先不談，WS上面這些功能可都是內置的哦，無需任何配置，改改快捷鍵就能很稱手了喲。如今若是要我用回 VIM / ST，我想得第一件事就是「把 VIM 改形成一個相似於 WebStorm 的 IDE 須要花多久時間呢？」

1. 編輯器和 IDE 是不一樣的事物，若是你還認爲 VIM / ST 比 IDE 好的話，你爲何不來比較一下吸塵器和自行車孰好孰劣呢？

2. 我說 WS 好的時候，絕對沒有說 VIM / ST 很差的意思。 VIM 和 ST 我都用過超過半年以上，都是不錯的「編輯器」，比 WS 快多了。WS 能比它們快纔是奇了怪了。

3. 至於 Notepad++，也很不錯，我大學時用過至少一年，不過在我習慣了 VIM 以後就把它拋棄了。全部不支持 VIM 模式的編輯器或 IDE 我應該都不會再喜歡了。這裏有我回答的一個關於 Notepad++ 的一個問題： Notepad++ 有哪些適用於前端開發的插件？

4. 個人路線大概是 Notepad++ => ST2 => VIM => WebStorm、ST三、VIM 共存

END

 

參考：

WebStorm 有哪些過人之處？ - 知乎https://www.zhihu.com/question/20936155