VSCode & Snippets

I did a poll recently during one of my sessions – and I was surprised that about half of the people don’t regularly use “snippets” in VSCode.. .

Well, some of you probably know that I’m a big fan of snippets.  Whoever has joined one of my sessions of the last couple of years where I was talking about VSCode, or was working with VSCode .. most probably, I was talking about, showing or using snippets.

Honestly, I can’t live my life in VSCode without snippets.  It would be so much less efficient .. .  VSCode wouldn’t be much more than a notepad that is hooked up with Source Control in that case.

Back in 2017, I even spent quite some time in my session on NAVTechDays about snippets.  I’ll share the session at the end of this post…

How to manually create snippets?

I would be able to explain you how to manually create snippets – but I won’t.  Because it is actually already beautifully explained on the documentation section of VSCode here: https://code.visualstudio.com/docs/editor/userdefinedsnippets

Basically, user defined snippets …:

  • … is a json-file somewhere on your roaming profile
  • … have a specific syntax, which makes you give a description, a prefix, a body, … and for defining placeholders, including multi-cursor placeholders
  • … can use variables, like the filename, date or your clipboard, which make it possible to create very “generic” snippets.

All you need to know is on the page mentioned above, and you’ll get going with snippets in no time, I promise you!

My snippets

There is more :-).  I have been creating lots of snippets in my extension.  I admit, I copied Microsoft’s snippets and improved them – but I also have created lots of new snippets.  Ones that I use a lot in terms of “design patterns”, but also for implementing code that I’m not used to, and don’t want to forget (like the assisted setup).  If you install my “CRS AL Language Extension”, you’ll recognise my snippets with “waldo” in the suffix:

And yes, if you don’t want to work with my snippets, you can disable them by a simple setting:

"CRS.DisableCRSSnippets": true

(if you might wonder, you can disable Microsoft’s snippets as well ;-)).

Tools that can help you to create snippets

I recently was pointed to this tool: https://snippet-generator.app/ .  When you are creating your VSCode snippets, simply paste the text that you want to convert to a snippet to this tool, and you immediately get it converted to a JSON representation for a VSCode snippet.  I tremendously speeds up the creating of a snippets from minutes to seconds ;-).

On the other hand, there is another tool that you can install in VSCode: the snippet-creator.  It basically gives you a command that will convert your selected text into a user-snippet of the language of your choice:

Whatever you prefer –  both work very nice :-).

Some questions I get a lot

Where are snippets stored?

The user-defined snippets that you create,  are stored here:

The snippets that come from an extension, are stored here:

Can I disable snippets?

Well, no.  You can’t in any decent way (that I know of) disable snippets.  I know I was talking about a setting in my extension, and yes, that’s a way, but it’s not a decent way ;-). 

In fact, what I do in that extension, is simply rename the “snippets” folder to “snippets-disabled”.  That way, the extension is not able to find the snippets, and won’t show them anymore.  The downside of this is that it will give errors in the background because it’s not able to find the snippets anymore, like:

It’s not really noticeable, but they are there… .

Can I change snippets?

Well, no again.  To be fair: you CAN change a snippet in the extension folder, but do know that when the extension is updated, it basically is going to overwrite the snippets … and you lost your modification.  So in my opinion, that’s not an option.

That was it!  Hope you’re into snippets and this blogpost was completely useless.  If not, at least I hope this got you triggered a bit ;-)!  The only thing left for me is to share the NAVTechDays session I was talking about earlier:

Comment List