WebStorm 有哪些過人之處？

12-27

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

自問自答，多圖殺貓。

先說缺點吧：

常駐內存300M左右，如果你的內存只有1G，請用Sublime/VIM。如果你內存有4G，我覺得你真不用在意這點內存，Chrome 占的內存比這多多了，你還不是用的很嗨？

啟動一個項目所需的時間與項目大小相關。不願意等的請用Sublime。某人說 IDE 的正確打開方式是上班啟動之，下班關閉之。更有甚者說是入職啟動之，辭職關閉之。你們感受一下。

英語太差的就不要用 WS 了，喜歡花時間調教 VIM 各種插件的也沒必要用 WS 了。

所以我覺得，如果你機器的內存有 4G 以上，你每天花在寫代碼上的時間又很長，而且沒有時間精力折騰 VIM 各種蛋疼的插件的話，一定要試試 WebStorm！
WebStorm 為前端而生，專門為 JS 開發做了很多優化，有許多令前端工程師眼前一亮的地方，我十分喜歡這款 IDE。下面講下我覺得非常有用的幾個功能（絕大部分是官方發行版本自帶的功能）。
---
UPDATE: WebStorm 8 已經對我說的部分功能做了用戶體驗上的優化，所以具體細節可能和我說的有出入。
---
1. 圖片寬高提示。

平時你在寫 HTML 時，遇到 img 標籤時，是不是要費好大勁去知道圖片的寬高？WS 直接展示給你了。
2. 標籤重構、文件重命名、 CSS 重構以及 JS 重構
2.1 標籤重構
如果你想把

&此處省略200行&

改為

&

此處省略200行&

要怎麼辦？在 WS 里，你只需將游標移到 & 或者 &，讓後按重構的快捷鍵就可以輕鬆地把它變為 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、ST3、VIM 共存

END

自帶的版本控制，這功能挽救了我好多次了。
優秀的代碼定位能力，能輕鬆將游標定位到變數/屬性/方法的定義處，對閱讀代碼非常有用。
聰明的代碼聯想、格式化功能。
可定製的code template，加強版的zen coding，而且不僅限於html和css。
svn、git 等版本工具的支持，內置的 gist 非常方便。
nodejs 最好的開發工具，沒有之一。只要你會用 chrome 調試瀏覽器器端的 js，那麼你就會用 webstorm 調試 nodejs。
預處理語言的支持，使less、sass、cofeescript 等等語言的自動編譯變得很簡單。
最爽的一點，remote host和live edit的組合使用，讓你直接編輯遠程文件並實時刷新，一下省去了你這麼多步驟：保存本地文件，上傳本地文件到遠程伺服器，刷新瀏覽器。

功能太多了，只要慢慢調教，webstorm真的爽，我還寫了幾篇blog:巧：
WebStorm：令人眼前一亮的一款前端開發IDE
WebStorm功能特點以及使用指南
WebStorm 8 新功能一覽
使用WebStorm/Phpstorm實現remote host遠程開發

ps，blog 遷移到 github 以後，我現在已經直接用 webstorm 寫 blog 了，寫完md一個快捷鍵 push 到 github，好愉快……

WebStorm的過人在於，商家不斷的更新版本！WebStorm在JS開發中，被譽為web開發神器。

我來說說最新版WebStorm 8.0.1版本中最厲害的Spy-js

跟蹤伺服器代理伺服器,捕獲瀏覽器流量和變化動態JavaScript文件。變化不會影響應用程序的邏輯,spy-js只是插入額外的代碼指令收集運行時信息的代碼執行，通過跟蹤伺服器並將信息發送回IDE。可以查看：http://my.oschina.net/u/1251054/blog/222006

問題收集：http://www.oschina.net/question/1251054_151003

最新版更新內容和下載地址：http://www.evget.com/article/2014/4/14/20825.html

WS 的JavaScript 自動重構工具是其他IDE都沒有的。而且自帶了JsTestDriver，做非瀏覽器界面的單元測試很方便。

優點：
1.內置zencode編碼風格，讓你快速開發
2.豐富的插件資源，你可以去webstormw官網下載你需要的插件
3.簡單易操作的版本控制，只要你簡單的配置下git或svn就可以使用快捷鍵快速的進行版本控制
4.實時保存，不用頻繁的按ctrl+s了
5.對nodejs,typeScript,coffeScript支持良好
6.定製化功能很強大，不管是編碼還是UI
缺點：啟動慢，占內存

JavaScript重構 結合 快捷鍵，這才是真正的神器。。其他特性，其他IDE就可以完成了。

按下Command + Option + Shift + T，會有重構的菜單出現

重構之前最好要有測試！！！！！！！！！！
重構之前最好要有測試！！！！！！！！！！
重構之前最好要有測試！！！！！！！！！！

1. Shift + F6：重命名變數
只需要選中你需要重構的變數名(Command + W)，如下的github，按下快捷鍵改為GithubAPI，引用的地方都會修改。

2. Command + Option + N：內聯
選中下面的github，按下快捷鍵

代碼就會變成

3. Command + Option + V：提取變數
當你有多個變數重複的時候，可以用這個快捷鍵幫你一起替換。

4. Command + Option + M：提取方法
當你的函數太長的時候，可以用這個快捷鍵，將其中的一部分抽成一個方法。

。

不過，重構最強大的是同廠下的Intellij IDEA，是最好的Java語言IDE。但是這個Idea不是一般的貴，只能用公司的——ThoughtWorks

Idea下的重構快捷鍵有：

說到底還是用Java的底蘊渾厚。

可能是下面的原因：
Intellij Idea/Webstorm/Phpstorm 的高效快捷鍵

也可能是這些原因：
1. 對js的開發有長足的支持，那些自動提示，代碼主題，調試之類的我就不說了，主要是對流行技術的支持，比如Node.js,less,sass,jq,ext,prototype等框架的支持。

2. 自身對插件的支持，主要體現在webstorm 2.0以後就已經內置了zencoding了，而如果dw不是完整版的話，zencoding的安裝難度可想而知。如果是完整版的話，就不得不忍受一坨無用的插件。
3. 團隊開發的支持，主要體現在svn,git等版本管理工具，無須引入，直接可用。而且單文件還支持本地歷史記錄。
4. 插件的支持，主要體現在vim，可直接安裝插件，還有其它的插件等待著你去挖掘。
dw比webstorm的優點，那就是dw的內存佔用大概平常80M左右,而webstorm得300M左右，這是我發現唯一dw的長處。
5. 完善的版本管理：

6. 友好的ftp管理：
如何在Webstorm/Phpstorm中設置連接FTP，並快速進行文件比較，上傳下載，同步等操作
7. 超強的模板支持：
[轉]PhpStorm 超強語言模板的支持

如果說,dw是美工偶爾拖拖表格，寫寫css的小工具的話，那麼webstorm是前端開發的必備利器，不只是對html,css的抒寫比較強悍，而且對js，jq等其它js框架開發更是完美。
簡單的說：dw就是一個編輯器，而webstorm是一個IDE。
另外一個，dw自從cs4之後，就已經無路可走，本來近幾年的js開發如火如荼，看看這幫2B在dw cs5裡邊添加的那些隔靴搔癢的新功能，想想都笑，用戶在不斷的成長，市場在不斷的變化，而這幫2B還在沉睡，殘酷的市場如金的歲月會檢驗具有競爭力的產品。相比於dw的固步自封，webstorm正在走上坡路。這裡不得不提一下另外一款:aptana ，本身在js方面有一定的靚點，可惜現在搞得跟dw一樣，沒有抓住現下流行的趨勢，一直吃老本。看看aptana 3.0那些2B的功能，就能原諒dw現在還是這個樣子。
當然一分為二的看的話：如果你只是想拖拖表格，搞搞css，dw cs4 是目前市場上比較適合的編輯器。他的html結構自動識別摺疊，能很快找到不完整的div,ctrl + d，跳到定義的class位置等等，是其它編輯器所沒有的，在加上zencoding的話，寫寫靜態頁面足矣！
如果你不只是想折騰css，而是想搗鼓搗鼓js,less,sass,node.js等等之類的新玩意，也想試試vim結合傳統編輯器的威力，那webstorm絕對是你最佳的選擇。如果你是phper，我推薦phpstorm，它包含所有webstorm的功能。
本人已經轉向從dw cs4轉向 webstorm了，所有的代碼提交到google svn,github，下班前提交代碼，回家後更新代碼。

還可能是這個原因：
不用 Dreamweaver 只用 Notepad ++ 能做網站嗎?

一般給別人推薦兩個編輯器：
webstorm,sublime text,因為，有個技術叫emmet(ZenCoding), Emmet Documentation，而這兩個對他的支持是：
sublime text 是所有編輯器裡邊支持emmet比較好的的唯一一款。
webstorm是所有編輯器裡邊唯一內置emmet的一款，並且把emmet精髓往前推動了一步的唯一一款idea。

有希望就webstorm,phpstorm，及前端技術相關領域交流的加qq群：327388215
此群禁止閑聊，非喜勿進。問題驅動，鼓勵提問，分享。

對vim的支持最好,js的自動補全最好,還有最牛逼的go to definition (雖然不一定跳到準確的文件)和牛逼的重構，還有異常強大的local history功能（記錄項目最近一段時間的修改）

一直覺得webstorm的主題相當不符合審美，花了點時間配了個material+monokai的主題
GitHub - agileago/agileTheme: a very beautiful theme for webstorm
截圖覺得好看的點個star唄

更新一下：
有人問webstorm裡面vue高亮的問題，你可以按下面的步驟設置一下

1：解決vue文件v字圖標顯示問題安裝 GitHub - ChrisRM/material-theme-jetbrains: JetBrains theme of Material Theme 這個主題注意不要安裝 vue-for-idea那個插件功能不全用起來不爽

2：解決vue文件代碼高亮在設置裡面如下圖找到用html來解析的文件列表，添加*.vue

3：解決webstorm不能識別es6的問題還是在設置裡面設置解析js用es6來解析

4：解決sass，less等異構語言顯示報錯問題，注意請用最新的webstorm
然後在樣式標籤裡面寫上對應的異構語言，webstorm根據type屬性區分的，如

&