The Localhost

Modern web development guides hints and tips.

VS Code Tips and Snippets

🤫This is a private post👀

Use the same frontmatter block all the time for your blog posts?

I do, so I’ve created a VS Code snippet to pre-populate the block with some default tags and today’s date.

To create it I opened my global VS Code snippets file, Ctrl+Shift+p then search snippets and select “Preferences: Configure User Snippets” I have all my snippets in a global file.

1"frontmatterBlock": {
2 "prefix": "fmb",
3 "body": [
4 "---",
5 "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
6 "title: $1",
7 "tags: ['information', 'learning', 'guide']",
8 "private: true",
9 "---"
10 ],
11 "description": "frontmatter block for frontmattering"
12},

I’ve named the property frontmatterBlock with the prefix of “fmb” this is what I’ll type into VS Code to activate the VS Code intellisense then tab to complete the operation.

The $1 is where the cursor goes to when the snippet is added, you can place these where you want to tab to once the snippet has been added.

So, if I wanted to not have the default tags that are currently there I can replace them like this:

1"frontmatterBlock": {
2 "prefix": "fmb",
3 "body": [
4 "---",
5 "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
6 "title: $1",
7 "tags: ['$2', '$3', '$4']",
8 "private: true",
9 "---"
10 ],
11 "description": "frontmatter block for frontmattering"
12},

Now after tab completing the snippet I can tab through those sections in the snippet to add the details.


Patching Packages with patch-package...
CSS Resources From Around the Web... →