AEM Brackets扩展 aem-brackets-extension

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

开发人员

概述 overview

AEM Brackets扩展提供了用于编辑AEM组件和客户端库的流畅工作流程，并且使用了Brackets代码编辑器的强大功能，该编辑器提供了从代码编辑器访问Photoshop文件和图层的权限。扩展提供的轻松同步（不需要Maven或File Vault）提高了开发人员效率，并且还有助于掌握有限AEM知识的前端开发人员参与项目。此扩展还为HTML模板语言(HTL)提供了一些支持，这消除了JSP的复杂性，使组件开发更容易、更安全。

chlimage_1-53

功能 features

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

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

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

Photoshop文件支持从PSD文件中提取信息，如图层、测量、颜色、字体、文本等。
来自PSD的代码提示，可轻松地在代码中重用此提取的信息。
CSS预处理程序支持，如LESS和SCSS。
以及数百种其他扩展，可满足更具体的需求。

安装 installation

括号 brackets

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

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

扩展 the-extension

要安装扩展，请按照以下步骤操作：

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

快速入门 getting-started

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

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

项目必须至少包含：

jcr_root文件夹（例如，myproject/jcr_root）
filter.xml文件（例如，myproject/META-INF/vault/filter.xml）；有关filter.xml文件结构的更多详细信息，请参阅Workspace筛选器定义。

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

NOTE

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

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