AEM Brackets扩展 aem-brackets-extension

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
Developing

创建对象：

Developer

CAUTION

AEM 6.4已结束扩展支持，本文档将不再更新。有关更多详细信息，请参阅技术支助期. 查找支持的版本此处.

概述 overview

AEM Brackets扩展提供了一个顺畅的工作流，用于编辑AEM组件和客户端库，并利用括号代码编辑器，用于从代码编辑器中访问Photoshop文件和层。扩展提供的轻松同步（不需要Maven或File Vault）提高了开发人员的效率，并且还帮助了解有限AEM的前端开发人员参与项目。此扩展还为 HTML模板语言(HTL)，这消除了JSP的复杂性，使组件开发更简单、更安全。

chlimage_1-53

功能 features

AEM Brackets扩展的主要功能包括：

将更改的文件自动同步到AEM开发实例。
文件和文件夹的手动双向同步。
项目的完整内容包同步。
表达式和的HTL代码完成 data-sly-* 块语句。

此外，Brackets还为AEM字体端开发人员提供了许多有用功能：

Photoshop文件支持从PSD文件提取信息，如图层、测量、颜色、字体、文本等。
来自PSD的代码提示，以便在代码中轻松重复使用此提取的信息。
CSS预处理器支持，如LESS和SCSS。
另外还有数百个扩展，可满足更具体的需求。

安装 installation

括号 brackets

AEM Brackets扩展支持Brackets版本1.0或更高版本。

从下载最新的Brackets版本 brackets.io.

扩展 the-extension

要安装扩展，请按如下步骤继续操作：

打开括号。在菜单中文件，选择 Extension Manager…
输入 AEM ，然后查找 AEM Brackets扩展.
单击安装.
安装完成后，关闭对话框和Extension Manager。

快速入门 getting-started

内容包项目 the-content-package-project

安装扩展后，您可以通过从文件系统中使用Brackets打开内容包文件夹来开始开发AEM组件。

项目必须至少包含：

a jcr_root 文件夹(例如 myproject/jcr_root)
a filter.xml 文件(例如， myproject/META-INF/vault/filter.xml);有关 filter.xml 请参阅文件工作区过滤器定义.

在括号中文件菜单，选择 打开文件夹…… 然后选择 jcr_root 文件夹，或父项目文件夹。

NOTE

如果您自己没有包含内容包的项目，则可以尝试 HTL TodoMVC示例. 在GitHub上，单击 下载ZIP，从本地解压文件，并按照上面的说明，打开 jcr_root 文件夹。然后，按照以下步骤设置 项目设置，然后通过执行以下操作将整个包上传到AEM开发实例 导出内容包 如完整内容包同步部分中进一步说明。

在执行这些步骤后，您应该能够 /content/todo.html 在您的AEM开发实例上的URL中，您可以开始对Brackets中的代码进行修改，并查看在Web浏览器中进行刷新后，更改如何立即同步到AEM服务器。