VS Code#

#1. Multi-Cursor Editing

#Adding Cursors Across Multiple Locations

AEM Use Case: Rename all occurrences of a sling:resourceType in a .content.xml file simultaneously:

1. Select mysite/components/old
2. Press Ctrl+Shift+L
3. Type replacement: mysite/components/new

#2. Column (Box) Selection

Press Shift+Alt+Drag to select text in a rectangular column mode.

AEM Use Case: Copy column data from formatted logs or align XML attributes vertically.

#3. Breadcrumb Navigation

Press Ctrl+Shift+. to open the breadcrumb bar at the top of the editor.

Click any breadcrumb segment to view file outline structures and jump directly to methods or classes.

AEM Use Case: Navigate large Sling Model classes containing numerous annotated methods.

#4. Go to Symbol

Type a class or method name to jump directly to its definition.

AEM Use Case: Locate @Model or @SlingServlet declarations across a large multi-module codebase.

#5. Peek Definition

Press Alt+F12 over any symbol to inspect its definition within an inline popup window without switching files.

AEM Use Case: Preview Java Sling Model code while editing HTL templates.

#6. Timeline View

Click the Timeline panel in the Explorer sidebar to inspect:

• Git commit history for the file.
• Local file history (automatically saved state versions).

AEM Use Case: Compare historic versions of component dialog XML files when troubleshooting regressions.

#7. Sticky Scroll

Navigate to Settings → search Sticky Scroll → enable feature.

When scrolling down, outer class/method headers remain pinned at the top margin to preserve context.

AEM Use Case: Maintain visibility of parent XML node tags while navigating large .content.xml structures.

#8. Emmet Shortcuts in XML

Emmet shortcuts can expand structures within .content.xml files:

dialog>items>tabs>items>tab[jcr:title="Properties"]>items

Press Tab to expand into:

<dialog>
    <items>
        <tabs>
            <items>
                <tab jcr:title="Properties">
                    <items></items>
                </tab>
            </items>
        </tabs>
    </items>
</dialog>

#9. Regular Expression Find & Replace

Press Ctrl+H → toggle regular expression mode (.* icon).

AEM Use Case: Convert @ValueMapValue annotations to @Inject:

Find:

@ValueMapValue\s+private\s+(\w+)\s+(\w+);

Replace:

@Inject\nprivate $1 $2;

#10. Workspace Trust

When opening an AEM repository, VS Code prompts for Workspace Trust.

Note: Untrusted workspaces disable:

• Automatic task execution.
• Extension host operations.
• Java language server debugging.

#11. Problems Panel Filtering

Press Ctrl+Shift+M to display the Problems panel.

Click the filter icon to filter items by:

• Severity (Error / Warning / Info).
• File extension type.
• Custom text query.

AEM Use Case: Filter to display only Java compiler errors while suppressing XML schema warnings.

#12. Refactor Preview

When renaming a symbol (F2), VS Code presents a refactor preview panel showing all affected occurrences before applying changes.

AEM Use Case: Rename a field in a Sling Model and verify all impacted HTL templates before confirming.

#13. Source Control Graph

Install the Git Graph extension to inspect repository history in a visual tree view.

Click any commit to review diffs, checkout branches, or cherry-pick commits.

AEM Use Case: Trace historic commits modifying component dialog definitions.

#14. Snippets with Placeholders

Configure custom user snippets via Ctrl+Shift+P → "Configure User Snippets":

{
  "Sling Model": {
    "prefix": "aem-model",
    "body": [
      "@Model(adaptables = ${1|SlingHttpServletRequest,Resource|}.class,",
      "       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)",
      "public class ${2:ModelName} {",
      "    ",
      "    @ValueMapValue",
      "    private String ${3:fieldName};",
      "    ",
      "    public String get${3/(.*)/${1:/capitalize}/}() {",
      "        return ${3};",
      "    }",
      "}"
    ]
  }
}

Type aem-model + Tab to expand template placeholders.

#15. Splitting Terminals

Press Ctrl+Shift+5 to split terminal viewports.

AEM Use Case:

• Terminal 1: mvn clean install -PautoInstallBundle
• Terminal 2: tail -f crx-quickstart/logs/error.log
• Terminal 3: npm run dev (ui.frontend watcher)

#16. Workspace Recommended Extensions

Create .vscode/extensions.json:

{
  "recommendations": [
    "redhat.java",
    "vscjava.vscode-java-pack",
    "vscjava.vscode-maven",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

Prompts team members to install recommended extensions upon cloning the repository.

#17. Tasks with Problem Matchers

Configure .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Deploy Core Bundle",
      "type": "shell",
      "command": "mvn clean install -PautoInstallBundle",
      "options": { "cwd": "${workspaceFolder}/core" },
      "group": "build",
      "problemMatcher": "$maven-compiler"
    }
  ]
}

Press Ctrl+Shift+B to trigger the build task; compilation errors auto-populate the Problems panel.

#18. Code Folding Regions

• Ctrl+K Ctrl+0 — fold all regions.
• Ctrl+K Ctrl+J — unfold all regions.

Custom Java Regions:

//#region Getters
public String getTitle() { return title; }
public String getDescription() { return description; }
//#endregion

#19. Comparing Files

Right-click File 1 → Select for Compare. Right-click File 2 → Compare with Selected.

AEM Use Case: Compare two component dialog definitions or .content.xml package files.

#20. Zen Mode

Press Ctrl+K Z to enter full-screen distraction-free editing mode. Press Esc Esc to exit.

#21. Auto Save with Delay

Configure settings:

• Files: Auto Save → afterDelay.
• Files: Auto Save Delay → 1000 (ms).

AEM Use Case: Editing HTL auto-saves files → triggers Maven watch deployment tasks automatically.

#22. REST Client Extension for AEM APIs

Create an aem-api.http file to execute REST calls directly within VS Code:

### Get Page JSON
GET http://localhost:4502/content/mysite/en/home.infinity.json
Authorization: Basic admin:admin

### Create Page Node
POST http://localhost:4502/content/mysite/en
Authorization: Basic admin:admin
Content-Type: application/x-www-form-urlencoded

./jcr:primaryType=cq:Page
./jcr:content/jcr:primaryType=cq:PageContent
./jcr:content/jcr:title=New Page
./jcr:content/sling:resourceType=mysite/components/page/content-page

### QueryBuilder Search
GET http://localhost:4502/bin/querybuilder.json?path=/content/mysite&type=cq:Page&p.limit=5
Authorization: Basic admin:admin

Click Send Request to view responses inline.