_
- 🇺🇸English
- 🇪🇸Spanish
- 🇨🇳Chinese
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
| Snippet | Shortcut |
|---|---|
| Main page | amain |
| Layout component | al |
| Import layout | ail |
| Import layout (Tailwind) | ailt |
Page with getStaticPaths |
apgsp |
| Content collections page | apc |
Basic snippets
| Snippet | Shortcut |
|---|---|
| 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
| Snippet | Shortcut |
|---|---|
| Map expression | amap |
| Ternary expression | aternary |
| Image import | aimg |
| Image tag | aimage |
Styles
| Snippet | Shortcut |
|---|---|
| Global CSS | agcss |
Snippet management runs deeper here than in most of these extensions: alongside the usual manage / create / refresh commands (Ctrl + Shift + P / Cmd + 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.
Installation
Press Ctrl + P, paste the following command, and press Enter:
ext install bastndev.astro-js-snippetsOr search Snippets Astro (publisher: bastndev) in the Extensions panel, or get it from open-vsx.org for Cursor, Windsurf, Trae.ai, Kiro, and Firebase Studio.
Bundled by default inside Lynxjs Pack. Building React or React Native instead? Lynx Snippets covers that stack the same way.