Content, configuration, and refactoring

Edit configuration with context#

Open astro.config.mjs in the detected Astro project and invoke completion inside defineConfig:

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  output: 'static',
});

Choose properties supported by the installed Astro version. Documentation can describe a configuration property that is newer than your project dependency; checking package.json and the lockfile resolves that mismatch.

Navigate content and frontmatter#

Use the content/frontmatter editing support in Markdown/MDX-backed Astro projects. Inspect schema keys, referenced assets, and collection conventions in the actual project. Content can have build-time validation beyond what a single frontmatter field reveals.

For a reusable page element, review the component’s props, imports, slots, styles, and callers together. A visual selection may depend on frontmatter variables outside the selection.

Refactor and verify#

Use the plugin’s supported refactoring actions rather than moving text blindly. Preview resolved usages, inspect imports in the extracted component and its caller, and compare the rendered result. Names with identical spelling in scripts, CSS, and content are not always the same symbol.

After a rename or extraction, run the project’s check/build commands and inspect a page that exercises the changed props and slot content. The editor can validate references while a build reveals adapter or content-schema problems.

Keep tools aligned#

A project using an Astro preview release can expose newer properties than a stable project. Keep the plugin, project package version, and optional language-server setup in your bug report. This is more useful than reporting only that completion differs between two projects.

Astro configuration completion lists supported properties inside the project configuration. Select the image to view it at full size.

The editor supports content and frontmatter alongside Astro project files. Select the image to view it at full size.