This is not the official Visual Studio Code extension. This is a community-created extension that has collection of useful code snippets for Astro projects. This extension provides snippets for HTML, CSS, SCSS, JavaScript, TypeScript, JSON, Markdown, and MDX files in Astro projects.
Features
HTML Snippets
astro-html - Basic HTML template
astro-component - Component with TypeScript props
astro-fragment - Fragment component
astro-image - Optimized image component
astro-script - Client-side script
astro-link - Link component
astro-meta - Meta tag
astro-seo - SEO component
client - Client directive
slot - Slot component
CSS Snippets
astro-css - CSS module
astro-global - Global CSS
astro-css-import - CSS import
astro-css-vars - CSS variables
astro-media - Media query
astro-animation - Animation keyframes
astro-container - Container class
astro-grid - Grid layout
astro-flex - Flexbox layout
SCSS Snippets
astro-scss - SCSS module
astro-mixin - SCSS mixin
astro-include - Include mixin
astro-scss-import - SCSS import
TypeScript Snippets
astro-type - Type definition
astro-interface - Interface definition
astro-props - Component props interface
astro-ts-component - TypeScript component
astro-ts-api - TypeScript API route
astro-ts-collection - Collection handling
astro-ts-layout - Layout component
astro-ts-util - Utility types and functions
JavaScript Snippets
astro-fetch - Basic fetch
astro-import - Import statement
astro-export - Export constant
astro-js-component - JavaScript component
astro-js-api - JavaScript API route
astro-js-collection - Collection handling
astro-js-client - Client-side JavaScript
astro-js-util - Utility function
astro-js-fetch - Advanced fetch
astro-js-event - Event handling
JSON Snippets
astro-config - Astro configuration
astro-integration - Integration import
astro-adapter - Adapter import
Markdown Snippets
astro-md - Markdown frontmatter
astro-md-component - Markdown component
astro-md-import - Markdown import
MDX Snippets
astro-mdx - MDX component
astro-mdx-import - MDX import
astro-mdx-layout - MDX layout
Usage
Install the extension
Open any supported file type in your Astro project
Type the snippet prefix (e.g., astro-html) and press Tab or Enter
Fill in the placeholders using Tab to navigate
Requirements
VS Code 1.60.0 or higher
Astro project
Extension Settings
This extension contributes the following settings:
astro-snippets.enable: Enable/disable all snippets
astro-snippets.language: Set the default language for new components
