Why not just ask ChatGPT

I tried, and ChatGPT 3.5 failed me by:

1. Type "front" and press Tab.

   • This doesn't work
   • When I ask why this doesn't work it suggested to check if the syntax is correct, or try to restart VS Code

2. Type "Preferences: Configure User Snippets" and select it from the list

   • The name is incorrect, it should be "Snippets: Configure User Snippets", but this is likely due to the well-known constraint of ChatGPT (not up to date)
3. When I asked it how to automatically add the date in UTC format, it adds an non-existent ${CURRENT_UTC_DATE} variable.

Despite these hiccups, ChatGPT 3.5 did provide me with some helpful advice on adding snippets and the proper syntax for the JSON file.

Now, I didn't try GPT 4 because I was able to quickly figure out the solution to my problem. However, if you decide to give it a try, feel free to share your experiences in the comments!

Full Steps

1. Open VSCode.
2. Open the Command Palette by pressing Ctrl+Shift+P (Windows, Linux) or Cmd+Shift+P (macOS).
3. Type "snippets" and choose "Snippets: Configure User Snippets" from the list.
4. Type "markdown" and choose "markdown.json" from the list of languages to create a snippet for.
5. Replace the content with the following code:

// markdown.json
{
  "Front Matter": {
    "prefix": "front",
    "body": [
      "---",
      "title: \"${TM_FILENAME_BASE}\"",
      "excerpt: \"\"",
      "date: \"${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}Z\"",
      // this won't give you the correct UTC date time, you need to manually calculate for the time being. However time zone feature will be available soon: https://github.com/microsoft/vscode/issues/151220
      "img: \"\"",
      "alt: \"\"",
      "---",
      "$0"
    ],
    "description": "Adds front matter to a markdown file"
  }
}

6. Save the file.

Now, to use the snippet

1. Open a markdown file.
2. Type "front" and press "Ctrl+Space".
3. Press "Enter"
4. The front matter should be added to your markdown file, and your cursor should be placed in the next line.

More on the snippet syntax if you want to customise it

Snippets in Visual Studio Code

This article is co-authored with ChatGPT