Mirror of
feat: new blog Starlight VSCode Snippets (#152)
authored by
Felix Schneider
and committed by
GitHub
492c52e9
17056603
+67
public/blog/starlight-vscode-snippets.jpg
public/blog/starlight-vscode-snippets.jpg
This is a binary file and will not be displayed.
src/assets/blog/starlight-vscode-snippets/screenshot-triggering-ffmt-snippet.png
src/assets/blog/starlight-vscode-snippets/screenshot-triggering-ffmt-snippet.png
This is a binary file and will not be displayed.
+58
src/content/docs/blog/starlight-vscode-snippets.mdx
+58
src/content/docs/blog/starlight-vscode-snippets.mdx
···
1
+
---
2
+
title: How VS Code Snippets can improve your workflow when working with Astro
3
+
description: Learn how to create and use VS Code snippets to quickly insert frontmatter for Astro content collections. This guide shows how snippets can automate repetitive tasks, speed up Markdown and MDX editing, and improve your Astro workflow.
4
+
date: 2025-10-28
5
+
tags:
6
+
- Automation
7
+
- Education
8
+
authors:
9
+
- trueberryless
10
+
cover:
11
+
alt: A collection of old newspaper sheets piled on a wooden table, displaying vintage articles and worn edges.
12
+
image: ../../../../public/blog/starlight-vscode-snippets.jpg
13
+
---
14
+
15
+
This article demonstrates how code snippets can be created in Visual Studio Code that can significantly boost your productivity when regularly working with [Astro's content collections](https://docs.astro.build/en/guides/content-collections).
16
+
17
+
:::note
18
+
This article arose from a suggestion by [Sarah Rainsberger](https://github.com/sarah11918) and highlights a feature contributed by [HiDeoo](https://github.com/HiDeoo) - all code examples are also by HiDeoo.
19
+
:::
20
+
21
+
## The need for snippets
22
+
23
+
Astro supports [schema validation](https://docs.astro.build/en/guides/content-collections/#defining-the-collection-schema) for your frontmatter fields in Markdown and MDX files. Therefore, many content files of your collections will have the same structure between the code fences (`---`). If you are tired of typing the same frontmatter fields over and over again, you can create a code snippet that will automatically generate the basic structure of the desired frontmatter while letting you conveniently edit the fields with `TAB ⇥` inputs.
24
+
25
+
## Creating a snippet
26
+
27
+
You can create global snippets which can be scoped to multiple languages or language-specific snippets. Since we want the frontmatter snippet in Markdown _and_ MDX files, we will create a global snippet under `Code/User/snippets/markdown.code-snippets` with the scope `markdown,mdx`. Follow the instructions in the [official documentation](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets) for the correct steps for your Operating System.
28
+
29
+
Here is an example of how your snippet could look like. You can freely adjust the `body` or `prefix` as you see fit:
30
+
31
+
```json title="Code/User/snippets/markdown.code-snippets"
32
+
{
33
+
"Add Markdown frontmatter": {
34
+
"scope": "markdown,mdx",
35
+
"prefix": "ffmt",
36
+
"body": [
37
+
"---",
38
+
"title: $TM_FILENAME_BASE",
39
+
"description: The description",
40
+
"---",
41
+
"",
42
+
"## ${1:Heading}",
43
+
"",
44
+
"$0"
45
+
],
46
+
}
47
+
}
48
+
```
49
+
50
+
The flexibility of snippets allows you to create powerful and bespoke productivity boosters. You can enhance the basic configuration from above with the specific frontmatter fields you need, change how the title gets generated, and more.
51
+
52
+
## Using the snippet
53
+
54
+
Create an empty Markdown (`.md`) or `.mdx` file. Start typing `ffmt` and press `TAB ⇥` to trigger the snippet. If you do not see any suggestions, you can manually trigger them with `Ctrl + Space` and select the `"Add Markdown frontmatter"` snippet. Depending on your exact configuration, you can now tab through the fields to edit them to your current use case. For example the snippet from above allows you to directly edit the heading and then jumps to the content. The title field of the frontmatter will be set to the file name without its extension.
55
+
56
+
57
+
58
+
Read more tips and tricks for working with Astro and Starlight on [HiDeoo's blog](https://hideoo.dev/notes).
+9
src/content/docs/credits.mdx
+9
src/content/docs/credits.mdx
···
262
262
usedOnUrl="/blog/starlight-sidebar-whitespace"
263
263
/>
264
264
<ImageCredit
265
+
image="/public/blog/starlight-vscode-snippets.jpg"
266
+
title="Brown and White Cardboard Box"
267
+
author="Evelyn Clement"
268
+
authorUrl="https://unsplash.com/@e_clement"
269
+
sourceUrl="https://unsplash.com/photos/brown-and-white-cardboard-box-TgUwEK-RNUQ"
270
+
usedOn="How VS Code Snippets can improve your workflow in Starlight"
271
+
usedOnUrl="/blog/starlight-vscode-snippets"
272
+
/>
273
+
<ImageCredit
265
274
image="/public/blog/tags/mindspace.jpg"
266
275
title="Brown and White Water Splash"
267
276
author="Pawel Czerwinski"