HTML5集成开发环境搭建
对于新手朋友而言，Adobe Brackets是一款值得推荐的开源软件。它是基于HTML/CSS/JavaScript开发，运行在native shell上的集成开发环境。该项目由Adobe创建和维护，并根据MIT许可证发布，同时提供Windows和OS X平台支持。
一、Brackets的特点
Brackets具有简约、快捷的特点，没有过多的视图或面板。其核心目标是减少开发过程中效率低下的重复性工作，例如浏览器刷新、修改元素样式、使用搜索功能等。
二、下载方式
可前往官网下载Brackets：http://brackets.io/
三、Extract for Brackets预览版介绍
新发布的Brackets 1.0版本包含Extract for Brackets预览版。Extract for Brackets是一个扩展，它能够自动从PSD文件（如颜色、字体、坡度和图像等）中抽取设计信息，并生成纯净的CSS。下面介绍新版新增功能，旧版功能后续会继续说明。
（一）PSD文件处理
Brackets 1.0（Extract for Brackets）预览版最大的特点是可以直接导入PSD文件，然后直接获取PSD中的元素，并将其转化为CSS，非常实用和方便。
（二）多窗口编辑
该版本最大支持2个窗口编辑，即左边可直接编写HTML，右边直接编写CSS，无需像旧版那样在文件中来回切换，加快了开发速度。
四、功能及使用介绍
（一）语言切换
官方提供简体中文语言包，在菜单栏处选择“debug -> language -> simple chinese”即可更换为简体中文版本。
（二）最近文档显示
左侧目录树顶部会显示最近打开且正在工作的几个文档，使用起来十分方便。
（三）代码规范检测
Brackets会检测文档是否符合HTML规范，并且具备JS错误提示功能。点击黄色三角感叹号会弹出错误提示。
（四）CSS快速编辑
将光标放在一个class或id属性的标签名称上，按下Ctrl/Cmd + E（“编辑”）可进入编辑状态，再次按下则退出编辑。Brackets会搜索项目下所有CSS文件，然后在HTML文件中嵌入一个编辑器，让用户能够迅速修改CSS代码。不过，目前搜索的是项目下所有的CSS文件，如果能修改为搜索当前文件使用的CSS文件会更好。
（五）JS快速预览和编辑
Brackets同样支持JS的快速预览和编辑。
（六）内建取色器
Brackets内建取色器，提供RGBa、HEX、HSLa的颜色编码形式。把光标放在一个颜色编码上，按下Ctrl/Cmd + E（“编辑”）可进入取色器，退出取色器窗口需要使用Esc键。
（七）网页即时预览功能
Brackets提供网页即时预览功能。使用该功能时，Brackets会调用Chrome浏览器打开当前页面。此后，修改HTML、CSS、JavaScript并保存后，所修改的内容会即时响应到浏览器中的页面，无需手动刷新页面。这是Brackets最大的亮点之一，对于拥有两个显示器的开发者来说，可以分屏显示Brackets和Chrome，实现即时修改即时预览，无需切换编辑器/浏览器和刷新页面。
即时预览功能的限制
- 仅适用于Chrome浏览器，必须安装Chrome。
- 依赖于Chrome浏览器中的远程调试功能，该功能通过命令行标志启用。在Mac上，如果已经在使用Chrome浏览器，启动“即时预览”时，Brackets会询问是否要重新启动Chrome浏览器以启用远程调试功能。
- 只能同时对一个HTML文件进行预览，若切换到另一个HTML文件，Brackets将关闭原来的预览。
五、部分快捷键
- Ctrl/Cmd + Shift + H：呼出与关闭文件树
- Ctrl/Cmd + E：快速预览/编辑CSS样式/JavaScript函数
- Ctrl/Cmd + +/-：放大缩小编辑区字体大小
- Ctrl/Cmd + 0：重置编辑区字体大小
- Ctrl/Cmd + Alt + P：打开即时预览功能
- Ctrl/Cmd + /：行注释
- Ctrl/Cmd + Alt + /：块注释
六、不足
Brackets不支持代码折叠，也没有代码格式化功能。
七、Brackets插件安装及推荐
（一）代码格式化插件 - beautify
1. 安装方法
- 直接打开Brackets插件管理器，搜索安装beautify。
- 若不能在线安装，可直接从https://github.com/drewhjava/brackets-beautify下载，解压后放到Brackets插件目录下（插件目录：Help帮助 > Show Extensions Folder显示扩展目录），需放在user目录里，然后重启Brackets即可看到beautify。
注：新版brackets用以上方法可能安装不了，必须从https://s3.amazonaws.com/extend.brackets/brackets-beautify/brackets-beautify-1.1.3.zip下载，安装方法同上，解压出来直接把brackets - beautify - 1.1.3文件夹放到扩展目录的user目录下，重启即可。
2. 使用方法
安装完毕后，选择菜单上的“编辑→beautify”（或使用快捷键ctrl + alt + L）可完成代码格式化，也可选择“beautify on load”实现保存时自动格式化。
（二）快速编写HTML和CSS插件 - Emmet
可从GITHUB手动下载：https://github.com/emmetio/brackets-emmet
（三）代码格式化插件 - jsbeautifier
这款插件支持更多的代码格式化，下载地址：https://s3.amazonaws.com/extend.brackets/brackets-jsbeautifier/brackets-jsbeautifier-0.0.2.zip，插件安装方法同beautify。
（四）代码折叠插件 - Code folding
- GITHUB地址：https://github.com/thehogfather/brackets-code-folding
- 也可点击直接下载。插件安装方法同上，安装完毕后按F5刷新Brackets或重启Brackets。