Editing and navigation

Open an Astro component#

Open a .astro file in the project. A small page can start with:

---
const title = 'Documentation';
---
<html lang="en">
  <head><title>{title}</title></head>
  <body><h1>{title}</h1></body>
</html>

Frontmatter uses JavaScript/TypeScript support, while the template receives Astro-aware markup assistance. Use completion for Astro globals and directives such as client:load or class:list.

Follow components and imports#

Navigate from a PascalCase component tag to its import or declaration. Package exports and TypeScript aliases participate in path resolution. Use the official language-server integration for TypeScript-backed navigation, diagnostics, hover, auto-imports, and rename.

Review inspections#

Check warnings such as client:only without a framework value or set:html combined with child content. Use the intended Astro version as context when applying migration fixes. A native inspection and a language-server diagnostic can report different aspects of the same source.

After a refactor, run the project’s build. This validates integration behavior and generated output that an individual editor file cannot establish.