astro-vscode

Astro support for Visual Studio Code

🧑‍🚀 Not sure what Astro is? See our website at astro.build!

Provides language support for .astro files. This extension is powered by the Astro language server.

Features

• Syntax & semantic highlighting
• Diagnostic messages
• IntelliSense completions (w/ auto-imports)
• Emmet completions in HTML & CSS
• Props completions for JSX/TSX, Vue (Composition API only) and Svelte components
• Code actions (quick fixes, sort imports etc)
• Formatting (powered by Prettier and prettier-plugin-astro)
• Symbols (outline view, breadcrumb navigation, Go to Symbol etc)
• Hover information
• Go to Definition, Go to Type Definition, Go to Implementation etc
• Inlay hints
• Code folding
• Snippets & File Templates
• and more!

A TypeScript plugin adding support for importing and exporting Astro components inside JavaScript and TypeScript files is also included.

Configuration

HTML, CSS and TypeScript settings can be configured through the html, css and typescript namespaces respectively. For example, HTML documentation on hover can be disabled using 'html.hover.documentation': false. Formatting can be configured through Prettier's different configuration methods.

Troubleshooting

Inlay Hints don't work

Currently, only inlay hints provided by TypeScript are supported. TypeScript inlay hints are disabled by default and needs to be enabled using the settings under the typescript.inlayHints namespace, for example, to enable inlay hints for parameter names, you would do the following:

{
  "typescript.inlayHints.parameterNames.enabled": "all"
}

Alternatively, in the GUI this would be in TypeScript > Inlay Hints > Parameter Names. Make sure to update the TypeScript settings and not the JavaScript ones, as Astro is TypeScript-only

See this page for more information on the different settings available for inlay hints