目录：
前言
由于很多人现在使用的是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
到此为止两个编辑的技巧就分享完了，这个只是抛砖引玉，更多的技巧期待小伙伴们分享。