> ## Documentation Index
> Fetch the complete documentation index at: https://aerojs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# VS Code Extension

> Get syntax highlighting, completions, hover info, and inline diagnostics for Aero templates in VS Code.

The Aero VS Code extension adds first-class editor support for `.html` template files. Install it to get feedback in your editor as you write — without running a build.

## The problem

Template files need Aero-aware component and directive feedback, but changing their language mode
can stop ordinary HTML tooling, formatters, and installed HTML extensions from recognizing them.

## How Aero helps

Aero keeps project templates in VS Code's native `html` language and adds only its framework-aware
features. HTML/CSS tooling and other extensions keep ownership of their normal behavior, while
Aero adds template diagnostics and TypeScript/JavaScript support for live script blocks. The
extension turns off built-in HTML script validation (`html.validate.scripts`) so TypeScript in
`<script is:build>` / `<script is:state>` is not flagged as invalid JavaScript; Aero's language
server provides the real checks.

## Install

Install from the VS Code Marketplace:

[Aero Extension](https://marketplace.visualstudio.com/items?itemName=aero-js.aero-vscode)

Or search for **Aero** in the VS Code Extensions panel.

## What you get

* **Syntax highlighting** — Aero expressions, `<script is:build>`, and component syntax are highlighted correctly inside `.html` files.
* **Completions** — Component names and attributes are suggested as you type.
* **Hover info** — Hover over components and expressions to see type information.
* **Go to definition** — Jump from a component reference in a template to its source `.html` file.
* **Diagnostics** — Template errors and configured TypeScript/JavaScript issues are underlined inline. `aero check --types` validates live build, state, bundled, inline, and blocking scripts plus expressions on the command line.
* **Formatting** — Recommends the Prettier extension for Aero HTML templates (see [Formatting](/tooling/formatting)). Also contributes Prettier config schema so `aero*` options autocomplete and show hover docs in `.prettierrc` / `.prettierrc.json`.

<Tip>
  If you see false positives or missing diagnostics, run `aero doctor` in your project root to
  confirm the extension can find a supported version of `@aero-js/core`.
</Tip>

## Formatting

Install [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and add `@aero-js/prettier-plugin-aero` to your project. See [Formatting](/tooling/formatting) for `.prettierrc` setup and Aero-specific options.

In `.prettierrc` / `.prettierrc.json`, typing `aero` under top-level options or `overrides[].options` should suggest `aeroAttributePrefix`, `aeroBracketSpacing`, and `aeroSelfClosingComponents`, with hover text describing each value.

## Comments and snippets

HTML comments are inactive template source: Aero does not create template diagnostics or TypeScript
fragments from commented components, directives, scripts, or expressions. Snippet modules under
`content/snippets/` are the exception: their raw `<!-- @snippet:name -->` markers are still read
by the snippet extractor.