目錄：
前言
由於很多人現在使用的是dw工具開發前端，dw在拖拽頁面時代確實是一個不可代替的編輯器，但是隨着頁面開發的復雜，尤其是jQuery的興起之后，dw慢慢滿足不了當下的前端開發需求，尤其是對js的支持，一直停滯不前，所以今天有必要為大家介紹兩款新式的編輯器。
另外編輯器沒有最好的，只有最合適的，只有在合適的場景下選擇全靠的編輯器。另外還是個人使用習慣，我並不排斥Editplus,Vim等優秀的編輯器，但在此文只做這兩個的分享。
所謂新式的具備了以下的特點：
- 支持新的插件或前端相關技術。
- 友好的用戶體驗或干凈清爽的界面。
- 要么功能特別強大，要么占用資源十分小。
經過多次的嘗試，最后感覺以下兩種是適合以上的標准。
一. Webstorm
1. 優點
webstorm的優點確實不少，另外Idea, phpstorm, webstorm是同一家公司的，對應：javaer, phper, 前端er，請選擇適合自己的編輯器。
- 對新技術支持比較完善。比如支持nodejs, emmet, html5, jslint, less, sass, coffeescript, typeScript, stylus, git, svn 等。除了這些之外，在博客上都會有個投票有那些新技術，及時的投票之后進行功能的增加。
- 相對eclipse混亂的插件來說，他對插件進行了封裝，大部分是自己開發，插件的質量相對來說稍高一點。
- 用戶體驗快捷鍵支持都比其它同類編輯器更進一步，借鑒了多個編輯器的優點，又向前走了一步。
2. 缺點
缺點主要在三個方面：
- 對中國人來說，英文仍然是一部分開發者的阻礙之一。
- 由於功能的強大，對電腦硬件資源的消耗是比較猛的。所以對配置有一定的要求。
- 配置，由於功能特別強大，要使用到順手，必須經過一定的配置，才可以。
3. 教程
4. 插件
來源：http://www.zhihu.com/question/22437385
- Markdown 支持md，點擊編輯窗口下面的Text/Previev可以切換代碼/預覽視圖
- AngularJS——支持AngularJS的標簽提示
- AceJump——快速定位光標位置，有了它你可以丟棄鼠標了
- IdeaVim——針對webstorm的VIM插件，實現了80%的功能。
- WebStorm Chinese Language Pack（中文語言包）
-
准備嘗試使用WebStorm做開發，因為英文本身也不好，所以做了這個漢化包；
把壓縮包里的"resources_zh_CN.jar"拷貝到WebStorm安裝目錄下的lib目錄，重啟即可！
因為開始使用了大量的自動翻譯，雖然幾經校對，加上英文水平有限，應該還有大量的翻譯錯誤在里面！
5. 技巧
- 去除煩人的波浪線+灰色變量名，原因 - 沒用過的標簽
file - settings - Editor - Colors & Fonts - General - Unused sumbol，然后取消選中Effects和Foreground
file - settings - Editor - Colors & Fonts - General - 開啟對Compass支持
- 多行編輯
Add/remove a selection: Alt + Shift + Mouse Click
Select/unselect the next occurrence: Alt + J / Shift + Alt + J (Ctrl + G / Shift + Ctrl + G) for Mac OS X)
Select all occurrences: Shift + Ctrl + Alt + J (Ctrl + Cmd + G for Mac OS X)
Clone caret above/below (the shortcuts are not mapped yet)
Remove all selections: Esc - webstorm 漢化
- 顯示右下角垃圾回收進度
file - settings - Appearance - show memory indicator - Webstorm的調試是不支持中文路徑中文文件名。
二. SublimeText
1. 優點
SublimeText優點比較直接：簡潔，低耗，給力。
- 對新技術以插件的形式支持比較完善。插件比較多，可以說是海量，而且安裝方便。
- 很多人因為他那個黑色的皮膚而選擇他，無非這也是一個優點。
- 內存戰勝比較低
2. 缺點
缺點主要在三個方面：
- 還是語言問題，不過近年有中文漢化版的出現，但建議使用英文。
- 對GBK支持不是很友好。
- 對大文件的讀取沒有同類軟件支持友好。
3. 教程
- 介紹：大城小胖視頻介紹
- 下載：Download SublimeText
- 入門教程1：Sublime Text 全程指南
- 入門教程2：前端工程師手中的Sublime Text
- Sublime Text 使用介紹、全套快捷鍵
- sublime text 3解放鼠標的快捷鍵總結
4. 插件
- Emmet
規則在：Preferences -> Browser packages -> Emment -> emment -> snippets.json - Side Bar
增強的側邊欄 - Docblockr
增強js注釋 - Alignment
等號對齊
在Preferences -> package settings -> Alignment -> Settings User添加冒號對齊。
{ "align_indent": false, "alignment_chars": ["=", ":"], "alignment_space_chars": ["=", ":"] }
- AutoFileName:
文件路徑自動提示 - gbk支持 GBK Encoding Support
- 檢測快捷鍵沖突
- markdown
markdown 轉為 pdf - LineEndings 設置換行符
- SublimeText插件列表
- html美化插件
- Sublime Text 新建文件的模版插件: SublimeTmpl
- 前端自動化神器LiveReload配合瀏覽器和less/sass使用方法
- 使用 Sublime Text 2 開發 Unity3D 項目
- 全棧開發必備的10款 Sublime Text 插件
5. 技巧
- xdebug調試
- sublimetext 3.0文檔
- Sublime Text 3 絕對神器
- SublimeText手冊-tw
- 怎樣從直接Github的repository安裝Sublime Text插件
- Sublime text2的ThinkPHP插件
- Ubuntu 下Sublime Text 2 輸入中文解決方法
- 如何開發Sublime Text2插件_衍生篇
- 用sublime構建phonegap項目
- 超級牛B編碼王（二）：Sublime2之Zencoding快速上手
- sublime text 左側菜單美化1
- 在 Ubuntu 12 下安裝 Sublime Text 2
- Sublime Text 全程指南
- Sublime Text 全程指引 by Lucida
- sublime 有哪些使用技巧
- 前端工程師手中的Sublime Text
到此為止兩個編輯的技巧就分享完了，這個只是拋磚引玉，更多的技巧期待小伙伴們分享。