sublime text 是所有編輯器裡邊支援emmet比較好的的唯一一款。
webstorm是所有編輯器裡邊唯一内置emmet的一款，并且将emmet的精神往前推動的一款。
phpstorm，idea包括所有webstorm的功能。隻是phpstorm是針對phper的，idea是針對javaer，webstorm針對前端er。
一. css工具:
<a href="http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html" target="_blank">http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html</a>
<a href="http://www.qianduan.net/the-zen-coding-renamed-as-emmet.html" target="_blank">http://www.qianduan.net/the-zen-coding-renamed-as-emmet.html</a>
<a href="http://www.qianduan.net/zen-coding-update-to-0-7.html" target="_blank">http://www.qianduan.net/zen-coding-update-to-0-7.html</a>
<a href="http://www.qianduan.net/zen-coding-resources-to-update.html" target="_blank">http://www.qianduan.net/zen-coding-resources-to-update.html</a>
<a href="http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html" target="_blank">http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html</a>
emmet在sublime上的效果：
1). css ：他與其它編輯器的差別在于細節上，比如ctrl,alt+方向鍵可以修和裡邊的數值
2). html 效果：
3). sublime的emmet規則修改：
packages->Emmet->emmet->snippets.json
b. 隻有一個例外jetbrain公司的産品線：webstorm,phpstorm,intellij idea都是内置的，不需要安裝。
1).
寫js的效果：
2). webstorm的emmet規則修改：Files -> settings -> Live Templates
2. css壓縮辦法：
a. 通過正則五步替換法，适用于任何編輯器：
<a href="http://www.cnblogs.com/sky000/archive/2010/12/22/1913719.html" target="_blank">http://www.cnblogs.com/sky000/archive/2010/12/22/1913719.html</a>
b. 子產品化工具
二. js工具：
1. 壓縮等：
<a href="http://www.yulonghu.com/?post=5" target="_blank">http://www.yulonghu.com/?post=5</a>
線上壓縮
<a href="http://tools.css-js.com/" target="_blank">http://tools.css-js.com/</a>
<a href="http://tool.oschina.net/" target="_blank">http://tool.oschina.net/</a>
工具集
2. 以emmet的方式開發js,php,jsp,java and so on。
<a href="http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html" target="_blank">http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html</a>
<a href="http://www.cnblogs.com/jikey/archive/2012/06/14/2549347.html" target="_blank">http://www.cnblogs.com/jikey/archive/2012/06/14/2549347.html</a>
3. firebug,chrome調試工具的使用：
<a href="http://ued.taobao.org/blog/?p=5534">http://ued.taobao.org/blog/?p=5534</a> chrome調試 <a href="http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html">http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html</a> chrome的調試 <a href="https://developers.google.com/chrome-developer-tools/docs/commandline-api">https://developers.google.com/chrome-developer-tools/docs/commandline-api</a> chrome console 指令詳解 <a href="http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html">http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html</a> Firebug入門指南 <a href="http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html">http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html</a> Firebug控制台詳解 <a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation">https://developers.google.com/chrome-developer-tools/docs/mobile-emulation</a> chrome移動版調試 <a href="http://www.seejs.com/archives/296">http://www.seejs.com/archives/296</a> 【譯】Android上的遠端調試 <a href="http://blog.jobbole.com/31178/">http://blog.jobbole.com/31178/</a> 用Chrome開發者工具做JavaScript性能分析 <a href="http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html">http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html</a> 用谷歌(Chrome)浏覽器來當手機模拟器 <a href="http://www.cnblogs.com/xiaoyao2011/p/3447421.html">http://www.cnblogs.com/xiaoyao2011/p/3447421.html</a> 檢視事件綁定 chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1" <a href="http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/">http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/</a> 綜合浏覽器開發工具 <a href="http://ccforward.net/2013/02/firebug_console.html">http://ccforward.net/2013/02/firebug_console.html</a> 關于FireBug和Chrome的控制台 <a href="http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles">http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles</a> <a href="http://h5dev.uc.cn/article-25-1.html">http://h5dev.uc.cn/article-25-1.html</a> chrome profiles <a href="http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html">http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html</a> Chrome神器Vimium快捷鍵學習記錄 <a href="http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/">http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/</a> Chrome 開發工具 Workspace 使用
4. js參考手冊：
<a href="http://download.csdn.net/detail/jikeytang/3249206" target="_blank">w3c手冊</a>
5. 其它開發工具：
新手推薦：editplus，vim
團隊開發：
webstorm, phpstorm(phper), pycharm(pythoner), intellij idea(javaer).
<a href="http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook" target="_blank">http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook</a>
6. 子產品化開發grunt
<a href="http://www.gruntjs.org/article/getting_started.html" target="_blank">http://www.gruntjs.org/article/getting_started.html</a>
入門
<a href="http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows" target="_blank">http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows</a>
擴充工具grunt
<a href="http://www.gruntjs.org/article/home.html" target="_blank">http://www.gruntjs.org/article/home.html</a>
<a href="http://www.cnblogs.com/tugenhua0707/p/3497488.html" target="_blank">http://www.cnblogs.com/tugenhua0707/p/3497488.html</a>
前端項目建構工具---Grunt
<a href="http://javascript.ruanyifeng.com/tool/grunt.html" target="_blank">http://javascript.ruanyifeng.com/tool/grunt.html</a>
<a href="http://www.infoq.com/cn/articles/GruntJs" target="_blank">http://www.infoq.com/cn/articles/GruntJs</a>
<a href="http://blog.segmentfault.com/frankfang/1190000000372612" target="_blank">http://blog.segmentfault.com/frankfang/1190000000372612</a>
享受 Grunt
<a href="http://www.cnblogs.com/yexiaochai/p/3603389.html" target="_blank">http://www.cnblogs.com/yexiaochai/p/3603389.html</a>
<a href="http://www.cnblogs.com/yexiaochai/p/3594561.html" target="_blank">http://www.cnblogs.com/yexiaochai/p/3594561.html</a>
葉小钗 第一彈
7. gulpjs
<a href="http://gulpjs.com/" target="_blank">http://gulpjs.com</a>
官網
<a href="http://www.tuicool.com/articles/n2Uj2y" target="_blank">http://www.tuicool.com/articles/n2Uj2y</a>
教程
<a href="http://gratimax.github.io/search-gulp-plugins" target="_blank">http://gratimax.github.io/search-gulp-plugins</a>
gulp plugins
https://github.com/gulpjs/gulp
<a href="http://blog.segmentfault.com/laopopo/1190000000372547?page=1" target="_blank">http://blog.segmentfault.com/laopopo/1190000000372547?page=1</a>
前端建構工具gulp入門教程
<a href="http://zhuanlan.zhihu.com/TLA42/19691575" target="_blank">http://zhuanlan.zhihu.com/TLA42/19691575</a>
Gulp 另一種自動化流水線
三：jq工具
2. w3c_all.chm，w3cschool離線版，包含了javascript,jquery,php,sql,html,css2.x,3.x的手冊。
本文轉自懶得安分部落格園部落格，原文連結：http://www.cnblogs.com/jikey/p/3607133.html，如需轉載請自行聯系原作者