Adobe Brackets官方版 v2.2.1

Adobe Brackets 是一款免费、开源、跨平台的 HTML/CSS/JavaScript 集成开发环境，由 Adobe 公司推出，可在 Windows、Linux 和 OS X 上运行。它的界面走简洁路线，没有太多花哨元素，左侧是项目文件树，右侧是编辑区，上手门槛不高。软件本身扩展性很强，用户能按自己的需求安装扩展来补充功能。从 1.0 版本开始，它还加入了 Extract for Brackets 预览版，可以直接导入 PSD 文件，把颜色、字体、坡度、图像等设计信息抽取出来并生成干净的 CSS，对前端开发来说相当省事。

界面布局与项目设置

1、 打开后界面很清爽，左侧是项目组织结构的文件树，右侧是编辑区，编辑区上部为工具栏、中部为文档区域、下部为提示区域

2、 用 Ctrl+Shift+H 可以呼出或关闭文件树，方便在写代码时腾出更多屏幕空间

3、 在【文件】菜单里可以打开或新建项目，同时要设置项目的 Web 地址，地址必须以 http:// 开头，之后的预览功能会用到它

4、 在文件树中点击 index.html，主区域就会打开该文档，开始编辑

代码编辑与实时检测

- 软件会自动检查文档是否符合 HTML 规范，出现 JS 错误时会自动提示

- 例如提示第 20 行有一个 style 样式块需要放到 head 节点里，就属于这类自动检测

- 把光标放在 class 或 id 属性的标签名称上，按 Ctrl+E 进入快速编辑，Brackets 会搜索项目下所有 CSS 文件，并在 HTML 文件中嵌入一个编辑器，直接修改 CSS 代码

- 对 JS 对象定义也支持快速预览和编辑，把光标放在 js 函数名称上，按 Ctrl+E 即可操作

- 软件内建取色器，支持 RGBa、HEX、HSLa 三种颜色编码形式，光标放在颜色编码上按 Ctrl+E 就能调出取色器，退出时按 Esc 键

即时预览功能

- Brackets 提供网页即时预览，调用 Chrome 浏览器打开当前页面

- 之后修改 html、css、javascript 并保存，改动会即时反映到浏览器页面里，不用手动刷新

- 这是 Brackets 最突出的亮点之一，有两个显示器的开发者可以把 Brackets 和 Chrome 分屏摆放，一边改一边看效果，不需要在编辑器和浏览器之间来回切换

常用快捷键一览

1、 Ctrl/Cmd+Shift+H：呼出或关闭文件树

2、 Ctrl/Cmd+E：快速预览或编辑 CSS 样式、JavaScript 函数

3、 Ctrl/Cmd+加号或减号：放大或缩小编辑区字体

4、 Ctrl/Cmd+0：把编辑区字体大小重置为默认值

5、 Ctrl/Cmd+Alt+P：打开即时预览功能

6、 Ctrl/Cmd+/：行注释

7、 Ctrl/Cmd+Alt+/：块注释

8、 注意：CSS 代码和 HTML 代码注释时只能使用块注释快捷键

中文界面设置方法

- 打开软件，选择“Debug”菜单下的“Switch Language”，进入语言设置界面

- 把语言改为“chinese,simplified”，即可切换为简体中文界面