Create Your Own Code Snippet in VS Code

In my docusaurus projct I knew that I wanted front matter

Custom snippets in Visual Studio Code (VS Code) are a powerful way to speed up your coding by allowing you to create your own templates for code that you frequently use. These snippets can be easily inserted into your files, saving you time and effort. Here's a brief guide on how to create and use custom snippets in VS Code:

Creating Custom Snippets

1. Open Command Palette: Use Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the Command Palette.
2. Configure User Snippets: Type snippets, then select Preferences: Configure User Snippets.
3. Select or Create Snippet File: You can choose an existing language snippet file or create a new global snippets file by selecting New Global Snippets file....

Snippet File Format

A snippet file is a JSON file that defines snippets. Here's a simple example of what this file might look like:

{
    "insert Text": {
        "prefix": "intxt",
        "body": [
            "this is some text. tab stop 1: $1;",
            "second line, ",
            "3rd line, tab stop 2: $2"
        ],
        "description": "Insert the body "
    }
}

• "Print to console": Snippet name, as it will appear in the snippets list.
• "prefix": The text you type to trigger the snippet.
• "body": The content of the snippet. It can span multiple lines and supports tab stops ($1, $2) for easy navigation.
• "description": A brief description of what the snippet does.

Inserting Snippets

To insert a snippet, start typing the snippet prefix (intxt in the example above) and press Tab (or Enter depending on your configuration) to insert the snippet into your file. You can also press Ctrl + . to "manually" pull up all code actions

Tips for Advanced Usage

• Placeholders: You can include placeholders in your snippet's body that will be selected upon insertion. Use ${1:placeholder} for placeholders with default text.
• Choices: Provide options in placeholders using ${1|option1,option2|}.
• Variables: Use predefined variables like $TM_FILENAME for dynamic content.
• Snippet Scope: You can limit the scope of your snippets to specific languages by creating or editing language-specific snippet files.

Encountering & Solving an issue

So I created my snippet but the intellisense wasn't working

Tip: Press ctrl + . to get the popup

First step restart VS Code.... and no.

So then I looked at my settings file...

...good luck sifting through all that. I asked chatGPT and although it didn't provide the solution, it did mention this:

• Quick Suggestions for Markdown ("[markdown]"): Sometimes, language-specific settings can override global settings. We should check if there are any specific configurations for Markdown that might be affecting snippet behavior.

So I clicked the language "Markdown" in the bottom right corner of vscode.

and found

{
    "git.openRepositoryInParentFolders": "never",
    "explorer.confirmDelete": false,
    "markdownShortcuts.languages": [
        "markdown"
    ],
    "[markdown]": {
        "editor.unicodeHighlight.ambiguousCharacters": false,
        "editor.unicodeHighlight.invisibleCharacters": false,
        "diffEditor.ignoreTrimWhitespace": false,
        "editor.wordWrap": "on",
        "editor.quickSuggestions": {
            "comments": "off",
            "strings": "off",
            "other": "off"
        }
    }
}

by changing [markdown]editor.quickSuggestions.other from off to on i was able to solve my issue!

For whatever reason this was turned off for markdown ¯_(ツ)_/¯

Final Tips:

The last things to remember are that:

1. Double quotes must be escaped
2. For new lines you either need a comma separated list of one-line strings, or include newline characters

so for

---
id: ""
---

you need a body of either:

[
   "--- \n id: \"abcd\" \n ---"
]

or:

[
    "---",
    "id: \"abcd\"",
    "---"
]