Astro JS Snippets - Visual Studio Marketplace

🚀 Basic Snippets

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
Astro Base Component	`a-base`	`ab`
Astro Component with Client	`a-cbase`	`abc`
Typed Astro Component	`a-component`	`acomp`
Component with Client Script	`a-component-client`	`accl`
Fragment Set HTML	`a-frag-html`	`afh`
Fragment Named Slot	`a-frag-slot`	`afs`

🎯 Layouts and Pages

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
Full HTML Layout	`a-layout-full`	`alf`
Layout Component	`a-layout`	`al`
Pre-rendered Page	`a-prerender`	`apr`
Dynamic Page	`a-dynamic-page`	`adp`
Static Paths	`a-static-paths`	`asp`

📝 Content Collections

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
Content Collection Page	`a-content-collection`	`acc`
Collection Schema	`a-collection-schema`	`acs`

🔀 Expressions and Logic

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
Map Expression	`a-map`	`amp`
Map with Block	`a-map-block`	`amb`
Conditional Rendering	`a-conditional`	`acond`
Conditional Block	`a-if`	`aif`
IIFE Expression	`a-iife`	`aiife`
Generator Expression	`a-iige`	`aig`

🎪 Slots and Advanced Components

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
Named Slot	`a-slot`	`asl`

🌐 API and Routes

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
API Route GET	`a-api`	`aapi`
API Route POST	`a-api-post`	`apost`
Middleware	`a-middleware`	`amw`

🖼️ Images and Assets

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
Image Component	`a-image`	`aimg`
Picture Component	`a-picture`	`apic`

✨ Transitions and Effects

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
View Transitions	`a-transitions`	`atrans`
Transition Name	`a-transition-name`	`atn`

🎨 SEO and Head

🧩 Snippet	🆎 Prefix	⚡ Quick Shortcut
Head Component	`a-head`	`ahead`

🚀 How to Use

Open a .tsx or .jsx file.
Type any Quick Shortcut (e.g., lv for View).
Press Tab or Enter to expand the snippet.

📖 Usage Guide

🎯 Basic Components

a-base: Basic scaffold for any Astro component
a-component: Component with TypeScript and prop interfaces
a-component-client: Component with client-side script

🏗️ Layouts and Structures

a-layout-full: Full layout with HTML5, meta tags, and slots
a-prerender: Page with static prerendering
a-static-paths: Static route generation with getStaticPaths

🗂️ Content Collections

a-content-collection: Dynamic page for content collections
a-collection-schema: Schema definition with Zod

🔄 Dynamic Rendering

a-map: List rendering with .map()
a-conditional: Conditional rendering with ternary operator
a-if: Conditional rendering with blocks

🌐 API and Backend

a-api: Basic GET endpoint
a-api-post: POST endpoint for forms
a-middleware: Middleware function to intercept requests

🎨 User Experience

a-transitions: Smooth transitions between pages
a-image: Optimized images with the native component
a-head: Optimized meta tags for SEO

🚀 Quick Start

Basic Component: Type ab + Tab to create a base component
Full Layout: Type alf + Tab for a complete HTML layout
API Endpoint: Type aapi + Tab to create an API route
Content Collection: Type acc + Tab for a content page

💡 Pro Tips

Always use TypeScript: Snippets automatically include prop interfaces
Leverage SSG: Use a-prerender for static pages
Optimize Images: Use a-image instead of simple <img> tags
SEO First: Include a-head in your layouts

🧩 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).

🛠️ Astro: Manage Snippets: Edit • Delete • Refresh • (Reset Snippet) & Create new snippet.
🔄 Astro: Refresh Snippets: Reloads your snippets to reflect recent changes — yaa!!"
✍️ Astro: Create New Snippet: Starts the process to create a new custom snippet.

Installation

Launch Quick Open

Linux Ctrl+P
macOS ⌘P
Windows Ctrl+P

Paste the following command and press Enter:

ext install bastndev.astro-js-snippets

Contributors

If you want to contribute, check the guidelines: [>_ᅠ] .


Gohit Bastian

About Me

🐦 X - For questions and discussions.
🔴 Youtube - Code, Software and development insights.
💼 Linkedin - Professional networking and career updates.

Icon	Name	Description
	Lynx Theme Pro	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.
	Bracket Lynx	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.
	Lynx Keymap Pro	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 are configured. If you find any bugs or have feedback, you can open an issue.