How VS Code Snippets can improve your workflow when working with Astro
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.
Astro supports schema validation 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.
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 for the correct steps for your Operating System.
Here is an example of how your snippet could look like. You can freely adjust the body or prefix as you see fit:
{ "Add Markdown frontmatter": { "scope": "markdown,mdx", "prefix": "ffmt", "body": [ "---", "title: $TM_FILENAME_BASE", "description: The description", "---", "", "## ${1:Heading}", "", "$0" ], }}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.
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.
If you find snippets useful and want to explore a VS Code extension which includes a decent set of preconfigured snippets, check out Astro Snippets by Shelton Louis.
Read more tips and tricks for working with Astro and Starlight on HiDeoo’s blog.
