图解web前端开发工具教程

第一章 编辑工具

一 WebStorm

与IntelliJ IDEA同源，继承了IntelliJ IDEA的JS部分的功能。
代码的自动折叠功能，这个很好，如下图；函数，注释，if-else块，等等，都有自动折叠；折叠的上方不可见时，放鼠标到折叠下方的上尖标记时会有黄色的折叠上方代码提示；适合阅读较长代码；下图是打开jquery 1.8时的情形；

大量的代码导航和使用搜索选项；
ECMAScript协同支持；
CoffeeScript；
WebStorm允许您调试和验证您的服务器端JavaScript - Node.js的应用程序；
代码检查和快速修复；等。

 

文件模板功能；敲“ctrl+shift+a”，输入File Templates，出现下面窗口；可插入图示的模板；也可加入自己的常用代码文件作为模板；不错的功能；

Live Templates，代码片段模版，如下图所示，可插入html、javascript、css等的代码段；

模板可以替换变量。

这个工具挺好的，鄙人正在用；

下载：

http://pan.baidu.com/s/1sjFhTqH

http://pan.baidu.com/s/1c0yDxj6

http://pan.baidu.com/s/1qWyoT9y

三个压缩包同时解压；

 

二 HTMLPad

可自动插入html代码段，以及css、php、js等的一些代码片段；

插入html的功能比较强；如下图，插入列表，插入表格；

 

 

 

此工具插入html代码的功能较强；

下载：

http://pan.baidu.com/s/1nt3KIG5

 

三 jsEditor

    这是网上下的一个小工具；可插入一些js常用语句；有时候可能有用；

下载：

http://pan.baidu.com/s/1bnvrCkB