> For AI agents: the complete documentation index is available at https://nhanbe.id.vn/llms.txt, the full documentation bundle is available at https://nhanbe.id.vn/llms-full.txt.

# VS Code

## 1. Multi-Cursor Editing

### Adding Cursors Across Multiple Locations

| Shortcut       | Description                                         |
| -------------- | --------------------------------------------------- |
| `Alt+Click`    | Insert additional cursor at click position          |
| `Ctrl+Alt+↑/↓` | Add cursor directly above or below current position |
| `Ctrl+D`       | Select next matching instance of target word        |
| `Ctrl+Shift+L` | Select all matching instances across file           |

**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

| Command                   | Shortcut       |
| ------------------------- | -------------- |
| Go to Symbol in File      | `Ctrl+Shift+O` |
| Go to Symbol in Workspace | `Ctrl+T`       |

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:

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

Press `Tab` to expand into:

```xml
<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:

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

Replace:

```java
@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":

```json
{
  "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`:

```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`:

```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:**

```java
//#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:

```http
### 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.