AEM Tools is a lightweight, feature-rich Visual Studio Code extension designed to streamline Adobe Experience Manager (AEM) development. It provides support for HTL/Sightly, OSGi configurations, ClientLibs, FileVault JCR XML files, and native JCR synchronization.
This extension is inspired by the original AEM Tools plugin for IntelliJ IDEA.
Features
- 📝 HTL (Sightly) Support: Native syntax highlighting, real-time code validation (via
@adobe/htlengine), autocomplete for global & local variables, Sling Model getters, hover documentation, and template navigation (Go to Definition for template includes & calls).
- ⚙️ OSGi Configuration Support: Workspace indexing of metatypes (
OSGI-INF/metatype/*.xml), offering autocomplete, hover descriptions, and type/required attribute validation for .cfg.json and .config files.
- 📦 JCR XML (FileVault) Support: Autocomplete, template snippets, and quick documentation for Touch UI Granite forms (
_cq_dialog), Classic UI widgets (dialog.xml with full xtype list and property suggestions), cq:Component, and cq:editConfig.
- 📁 Client Library (ClientLibs) Support: Workspace category indexing, autocompletion of categories in HTL/XML, and asset autocomplete and Go to Definition inside
js.txt and css.txt files.
- 🔄 JCR Synchronization: Context menu commands to sync (push/pull) files to/from local workspace and target AEM instance, plus a quick connection test helper.
- ⚡ FE Dev Mode: An opt-in, save-to-sync workflow for files under
ui.apps/**/jcr_root, with a per-file debounce to prevent duplicate uploads.
Configuration
AEM Tools can be configured in your VS Code workspace settings:
| Setting |
Type |
Default |
Description |
aemTools.host |
string |
http://localhost:4502 |
The URL of the target AEM instance. |
aemTools.username |
string |
admin |
AEM Username. |
aemTools.password |
string |
admin |
AEM Password. |
aemTools.feDevMode |
boolean |
false |
Automatically sync changed or newly created files under ui.apps/**/jcr_root. |
Commands
Access the following commands via the context menu (right-click on a file) or the VS Code Command Palette (Cmd+Shift+P on macOS / Ctrl+Shift+P on Windows):
- AEM: Sync to Server (
aem-tools.syncToAEM): Pushes the selected file/folder under jcr_root to AEM.
- AEM: Sync from Server (
aem-tools.syncFromAEM): Pulls the selected file's content from AEM JCR to the workspace.
- AEM: Test Connection (
aem-tools.testConnection): Tests connectivity and credentials with the AEM instance.
- AEM: Toggle FE Dev Mode (
aem-tools.toggleFeDevMode): Enables or disables automatic sync for changed files under ui.apps/**/jcr_root.
Installation
You can install AEM Tools from the official marketplace registries:
Latest Release VSIX
Alternatively, download the latest compiled .vsix file directly from the GitHub Releases Page and install it manually in VS Code via Extensions: Install from VSIX....
Build from Source
If you prefer to build the extension manually from source, follow these steps:
- Clone this repository:
git clone https://github.com/akio333/vscode-aem-tools.git
cd vscode-aem-tools
- Install the dependencies:
npm install
- Compile and bundle the project:
npm run compile
- Package the extension into a
.vsix file:
npm run package
- Install the generated
vscode-aem-tools-<version>.vsix file in VS Code.
License
This project is licensed under the GPLv3 License.
