Adobe Brackets WEB前端开发工具 V1.9

Brackets中文版支持Windows，Mac以及Linux操作系统，内置HTML、CSS、以及JavaScript编码，可以用于编写HTML，CSS以及JavaScript。Brackets中文版为网页设计师和开发人员，其中的Live Preview功能可以在浏览器预览和源代码之间轻松切换，可有效提高网页编辑速度。

Adobe Brackets软件简介

Brackets是由Adobe公司推出的一款免费、开源且跨平台的HTML/CSS/JavaScript集成开发环境 (web前端开发工具)。Brackets官方版当前为Mac, Windows以及Linux (Debian/Ubuntu)提供最新稳定版的二进制发布, 源代码托管在GitHub上，Adobe Brackets的联机编辑器无需弹出窗口或辅助标签就可以在一些特定的代码上运行。

用户还可以下载、并使用扩展插件(比如Git整合，JSHint支持，等)添加功能，以支持自己的工作流程。

Brackets中文版没有很多的视图或者面板，也没太多花哨的功能，Brackets中文版的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等，Brackets中文版是专门针对 WEB 前端开发而生，这一点和其他通用代码编辑器不一样，同样优秀的还有HBuilder哦。

Adobe Brackets软件功能

最初，Brackets打开默认的“入门”项目。按照HTML代码中的说明快速了解Brackets功能。

您可以使用“ 文件”>“打开文件夹”在左侧的文件树中打开另一个文件夹。Brackets认为此文件夹是您的“项目”：它充当各种搜索操作的范围，并且某些设置与您打开的文件夹相关联。您可以通过单击文件树中的根文件夹名称轻松切换回以前的项目。您还可以将操作系统中的文件夹拖到“括号”窗口中以在文件树中将其打开，然后将文件拖到“括号”窗口中以打开它们。

与在选项卡中显示打开文件的其他编辑器不同，Brackets具有“工作文件”列表，该列表显示在文件树上方。单击文件树中的文件只是查看它，但不会将其添加到“工作文件”列表中 - 因此您可以快速浏览不同的文件而不会使列表混乱。如果进行编辑，该文件将自动添加到工作文件中。要在不编辑文件的情况下添加文件，请在文件树中双击它。

拆分视图

Brackets将记住每个项目的视图布局，因此切换到另一个项目将显示项目关闭时选择的布局。而且，如果您希望返回到单个视图，则可以选择“ 视图”>“无拆分”以返回单个视图。这样做不会关闭当前打开的文件。Brackets将合并两个“工作文件”列表并保留您在内存中的更改，直到您准备好保存它们为止。

Brackets不支持在两个窗格中打开文件，但我们计划在将来的版本中发布该文件。

扩展

除了Brackets内置的核心功能之外，还有一个庞大且不断增长的开发人员社区构建扩展，可添加各种有用的功能。您可以使用文件>扩展管理器...（或单击工具栏上的“插件块”图标）搜索和安装/卸载扩展。您甚至可以暂时禁用扩展，并稍后从Extension Manager重新启用它们。

您还可以在线浏览可用的扩展，而无需先安装Brackets。

主题

您可以通过Extension Manager下载主题来更改编辑器的配色方案（在Extension Manager中搜索“theme”以查找它们）。您甚至可以创建自己的自定义主题，以获得适合您个人品味的编辑器颜色。

括号亮点

快速编辑

Brackets中的Quick Edit UI将内容特定的代码和工具内联，而不是使用大量面板和图标来混乱您的编码环境。

当光标位于某些代码段上时，按Ctrl / Cmd-E打开Quick Edit的内联编辑器。例如：

在光标位于class或id属性（名称或值）或标记名称的HTML文件中- “快速编辑”将显示项目中匹配的所有CSS，SCSS和LESS规则。您可以直接在线编辑这些规则，而无需离开HTML文件的上下文。

当多个规则匹配时，使用右侧的列表在其中导航（或使用Alt-Up / Down）。

要直接从内联编辑器创建新的CSS规则，请单击“ 新建规则”按钮（或按Ctrl-Alt-N / Cmd-Opt-N）。

在任何具有十六进制颜色或rgb / rgba / hsl / hsla颜色的文件中 - “快速编辑”会打开一个内联颜色选择器，用于预览和调整颜色。颜色选择器还列出了文件其他部分中使用最多的颜色，以便快速访问。

在光标位于函数名称的JavaScript文件中 - “快速编辑”将显示函数的正文（即使它位于不同的文件中）。

在用光标上的一个CSS / LESS / SCSS文件cubic-bezier()或steps()转变定时功能-快速编辑打开的图形过渡曲线编辑器。预先定义的定时功能ease，ease-in，ease-out，ease-in-out，step-start，和step-end也是有效的起点。

Quick Docs是一个相关功能，可以内联显示相关文档。使用Ctrl / Cmd-K打开快速文档：

在CSS / LESS / SCSS文件中，光标位于CSS属性/值上 - Quick Docs打开Web Platform Docs项目中的文档。

您可以同时打开多个内联编辑器和文档查看器。要关闭单个内联编辑器或文档查看器，请单击左上角的“X”或在其具有焦点时按Escape键。要立即关闭所有内联编辑器和文档，请将光标放回主要的封闭代码编辑器中，然后按Escape键。

实时预览

Brackets直接与您的浏览器配合使用，可以立即推送代码编辑，因此您在编码时始终保持最新的浏览器预览 - 无需重新加载页面。为了保持您当前的网络浏览不受影响，Brackets Live Preview会使用单独的Chrome个人资料打开Chrome的其他副本。

使用实时预览有两种不同的方法：

没有后端（即服务器端）逻辑 - 打开HTML文件并选择“ 文件”>“实时预览”（或单击“闪电”图标）。Brackets将启动Chrome并在新标签中打开您的文件。内容是从Brackets运行的内置服务器静态提供的 - 它不包含任何应用程序的后端逻辑。

此模式提供全方位的实时预览功能：

键入HTML 和 CSS文件时，浏览器预览会实时更新（无需重新加载）

为HTML文件识别的文件扩展名为：htm，html和xhtml。

如果您编辑任何其他类型的文件，则在保存时会自动重新加载页面

将光标移动到HTML文件周围时，相应的元素将在浏览器中突出显示

当您将光标移动到CSS / LESS / SCSS文件周围时，所有与当前规则匹配的元素都会在浏览器中突出显示

（通过取消选中“ 视图”>“实时预览”突出显示，可以禁用所有光标驱动的突出显示）

当您使用内联Quick Edit CSS编辑器时，上述所有CSS功能也可以使用。

使用自己的后端 - 确保您的本地服务器已在运行，提供Brackets正在编辑的同一文件夹中的文件。选择“ 文件”>“项目设置”，然后输入与在Brackets中打开的根文件夹对应的任何URL （通常是localhost URL）。然后打开一个网页的文件（例如HTML，PHP或ASP文件）并启动实时预览。Brackets将使用正确的URL启动Chrome，以从本地服务器加载该页面。

但是，使用自己的后端时，实时预览具有以下限制：

当您键入服务器处理的文件（例如HTML或PHP）时，浏览器不会立即更新 - 只有对CSS文件的更改才会实时反映。对于服务器处理的文件，Brackets将在保存时自动重新加载页面以更新浏览器预览。

服务器处理的文件禁用“实时突出显示”。但是，当光标位于CSS文件中时，它仍然有效。

为什么存在这些限制？要启用HTML实时编辑，Brackets需要在浏览器加载HTML代码之前为其注入一些注释。通常，内置的Brackets服务器执行此操作。当使用您自己的服务器时，Brackets无法注入这些注释。如果没有注释，Brackets就无法将源文件中的编辑和光标位置映射到浏览器中的相应DOM节点。

注意： “实验实时预览”模式（也称为多浏览器实时预览）不支持使用自定义服务器。原因类似于上面的解释（这里有更多细节）。

使用SCSS / LESS进行实时预览

当您键入LESS / SCSS文件时，实时预览不会实时更新。但是，如果您使用第三方“文件观察程序”在保存时自动重新编译CSS，则实时预览将在保存时自动更新以反映更改的CSS文件（无需重新加载）。您也可以使用Brackets扩展，例如Brackets SASS或LESS AutoCompile。但是 - 如果您在运行时使用less.js动态编译LESS，则实时预览将无法更新页面; 你需要重新加载以查看更改。

其他限制

实时预览目前还有一些其他重要的限制：

它仅适用于桌面Chrome作为目标浏览器。

在Chrome中打开开发人员工具将关闭实时开发连接。

文件必须位于“项目”（您当前在Brackets中打开的根文件夹）中。

一次只能预览一个HTML文件。如果您在Brackets中切换到其他HTML文件，浏览器预览也将切换到该新页面。

当HTML在语法上无效时更新暂停（例如，在为新标记键入'<'之后但在键入结束'>'之前）。在这种情况下，行号和实时预览图标变为红色。当语法再次生效时，括号将继续将更改推送到浏览器。

有关其他帮助，请参阅实时预览故

实验实时预览

可以启用/禁用实验性多浏览器实时预览在文件>启用实验实时预览菜单下。这解决了当前实时预览的一些限制。

定位多个浏览器并同时预览它们。

可以打开chrome中的开发人员工具，而不会中断实时预览工作流程。

快速浏览

快速查看可以轻松地在代码中可视化资产和颜色。只需将鼠标悬停在颜色，渐变或图像参考上，就会出现一个显示预览的弹出窗口。您可以在“视图”菜单中禁用此功能。

Adobe Brackets安装步骤

1、下载并打开安装数据包，双击应用程序，进入安装界面

2、点击浏览按钮，选择安装应用程序文件夹，选择安装路径，然后点击下一步

3、阅读安装信息，核对安装路径是否无误，然后点击下一步安钮

4、等待安装进度条加载完成

5、弹出完成安装界面，点击“完成”按钮即可