Extensions

Extension

Snippets Astro

Prefix-triggered snippets for Astro layouts, pages, components, expressions, styles, and content collections.

Installation

Ready in one command

Open your editor's Quick Open command, paste this value, and press Enter. You can also use the Extensions view.

ext install bastndev.astro-js-snippets

Type al, hit Tab, and a full Astro layout appears — SEO tags, dark mode, the works. Snippets Astro does the same for pages, components, expressions, and content collections, so scaffolding a route never means typing the same structure from memory.

Works in any .astro file.


Prefix reference

Main snippets

Action Prefix
Main page amain
Layout component al
Import layout ail
Import layout (Tailwind) ailt
Page with getStaticPaths apgsp
Content collections page apc

Basic snippets

Action Prefix
Astro component acomp
Get static paths agsp
Astro glob aglob
Get collection acoll
Named slot asn
Astro style astyle
Astro script ascript
Style & script ass
Fragment named slot afs

Expressions & logic

Action Prefix
Map expression amap
Ternary expression aternary
Image import aimg
Image tag aimage

Styles

Action Prefix
Global CSS agcss

Snippet management runs deeper here than in most of these extensions: alongside the usual manage / create / refresh commands (Ctrl + Shift + P / ⌘ + Shift + P), there’s also Open Snippet File, Reset Snippet to Original, and Delete Custom Snippet for when you’ve customized one and want to back out cleanly.