Published on

Using Visual Studio Code to quickly write frontmatter

Authors
  • avatar
    Name
    Jonathan Branan
    Twitter
  1. Paste the following into your md or mdx snippet file.In Visual Studio Code, go to File --> Preferences --> Configure Snippets.

  2. To use a snippet, type the prefix and you will get snippet suggestions.

{
	"Blog Frontmatter": {
		"prefix": "f",
		"scope":"markdown",
		"body": [
			"---",
			"title: '${1:title}'",
			"date: '202${2:year}-${3:month}-${4:day}'",
			"#lastmod: '202${12:year}-${13:month}-${14:day}'",
			"tags: ['${5:tag1}', '${6:tag2}', '${7:tag3}']",
			"draft: ${8:true}",
			"summary: '${9:summary}'", 
			"#images: ['/static/images/${10:image.jpg}',]",
			"#authors: ['default',]",
			"#layout: PostLayout # PostLayout, PostSimple and PostBanner",
			"#canonicalUrl: https://jonb.io/blog/${11:the-url-here}",
			"---$0"
		],
		"description": "Write a template for blog frontmatter."
	},
	"Blog Frontmatter Title": {
		"prefix": "f:title",
		"body": [
			"title: '${1:title}'$0",
		],
		"description": "Shortcode for blog frontmatter title."
	},
	"Blog Frontmatter Date": {
		"prefix": "f:date",
		"body": [
			"date: '202${1:year}-${2:month}-${3:day}'$0"
		],
		"description": "Shortcode for blog frontmatter date."
	},
	"Blog Frontmatter lastmod": {
		"prefix": "f:lastmod",
		"body": [
			"lastmod: '202${1:year}-${2:month}-${3:day}'$0",
		],
		"description": "Shortcode for blog frontmatter lastmod."
	},
	"Blog Frontmatter tags": {
		"prefix": "f:tags",
		"body": [
			"tags: ['${1:tag1}', '${2:tag2}', '${3:tag3}']$0",
		],
		"description": "Shortcode for blog frontmatter tags."
	},
	"Blog Frontmatter draft": {
		"prefix": "f:draft",
		"body": [
			"draft: ${1:true}$0",
		],
		"description": "Shortcode for blog frontmatter draft."
	},
	"Blog Frontmatter summary": {
		"prefix": "f:summary",
		"body": [
			"summary: '${1:summary}'$0", 
		],
		"description": "Shortcode for blog frontmatter summary."
	},
	"Blog Frontmatter images": {
		"prefix": "f:images",
		"body": [
			"images: ['/static/images/${1:image.jpg}',]$0",
		],
		"description": "Shortcode for blog frontmatter images."
	},
	"Blog Frontmatter authors": {
		"prefix": "f:authors",
		"body": [
			"authors: ['default',]$0",
		],
		"description": "Shortcode for blog frontmatter authors."
	},
	"Blog Frontmatter layout": {
		"prefix": "f:layout",
		"body": [
			"layout: PostLayout # PostLayout, PostSimple and PostBanner$0",
		],
		"description": "Shortcode for blog frontmatter layout."
	},
	"Blog Frontmatter canonicalUrl": {
		"prefix": "f:canonicalUrl",
		"body": [
			"canonicalUrl: https://jonb.io/blog/${1:the-url-here}$0",
		],
		"description": "Shortcode for blog frontmatter canonicalUrl."
	},
	"Blog Link": {
		"prefix": "blog:link",
		"body": [
			"[${1:Name}](${2:Link})$0"
		],
		"description": "Shortcode for markdown link"
	},
	"Blog Image": {
		"prefix": "blog:image",
		"body": [
			"![${1:Name}](${2:Link})$0"
		],
		"description": "Shortcode for markdown image"
	},
	"Blog Table of Contents": {
		"prefix": "blog:toc",
		"body": [
			"<TOCInline toc={props.toc} asDisclosure toHeading={3} />$0"
		],
		"description": "Shortcode for markdown table of contents"
	},
	"Blog Video": {
		"prefix": "blog:video",
		"body": [
			"<video controls>",
  			"<source",
    		"src=\"${1:src}\"",
    		"type=\"video/mp4\"",
  			"/>",
			"</video>$0"
		],
		"description": "Shortcode for markdown video"
	},
}