Type any Quick Shortcut or Prefix (e.g., al for Layout or agcss for Global CSS).
Press Tab or Enter to expand the snippet.
📖 Usage Guide
🎯 Basic Components
a-component: Component with TypeScript and prop interfaces
a-gsp: Static route generation with getStaticPaths
a-collection: Get content collection with Astro Content Collections
🏗️ Layouts and Structures
a-layout: Full layout component with SEO and dark mode support
a-import-layout: Import layout component with basic structure
a-import-layout-tailwind: Import layout with Tailwind CSS classes
a-main: Complete main page with layout, styles, and scripts
🎨 Styles
a-global-css: Global CSS with CSS variables, dark mode, and Tailwind import
a-style: Astro style tag
a-style-script: Combined style and script tags with markers
🔄 Dynamic Rendering
a-map: List rendering with .map()
a-ternary: Conditional rendering with ternary operator
🖼️ Images
a-img: Import Astro Image component
a-image: Optimized image tag with width and height
📝 Content Collections
a-page-collection: Dynamic page for content collections with rendering
🚀 Quick Start
Basic Component: Type a-component + Tab to create a component with props
Full Layout: Type a-layout + Tab for a complete layout with SEO
Main Page: Type a-main + Tab for a complete page structure
Global Styles: Type a-global-css + Tab for global CSS with dark mode
💡 Pro Tips
Always use TypeScript: Snippets automatically include prop interfaces
Dark Mode Ready: Use a-global-css for automatic dark mode support
Optimize Images: Use a-image instead of simple <img> tags
Content Collections: Use a-collection for type-safe content management
🧩 Extension Commands [ + ]
This extension includes several commands to help you manage your snippets efficiently. You can access these commands by pressing Ctrl+Shift+P (or Cmd+Shift+P on macOS).
Main Commands:
🛠️ Astrojs: Manage Snippets - Central hub to edit, delete, refresh, reset, and create snippets
✍️ Astrojs: Create New Snippet - Create a new custom snippet file for any language
A professional extension with six available themes: Dark, Light, Night, Ghibli, Coffee, and Kiro—with integrated icons. Each theme is optimized to offer a more pleasant visual experience.
Enhances the development experience by displaying a label next to each closing parenthesis, indicating the name of the corresponding block or function, along with the start and end line numbers.
Standardizes keyboard shortcuts across all code editors, allowing you to use key combinations to access any functionality. It improves workflow and development experience.
Ready! 🚀 Your (Snippets Astro) are configured. If you find any bugs or have feedback, you can open an issue.
Linux 
