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:

Door computer gegenereerde alternatieve tekst:
twaldol 
You, a few seconds ago • Uncommitted changes 
n tqueryapi(waldo) 
n ttableext(waldo) 
n tcaptionml(waldo) 
n tcodeunit ( 
waldo: 
Method 
n tcodeunit ( 
Method) 
waldo: 
n tenumvalue(waldo) 
n tfieldcode(waldo) 
n tfieldtext(waldo) 
n tflowfield(waldo) 
n tpagefield(waldo) 
n tpagesetup(waldo) 
tprocedure( 
waldo 
- No UI) 
Snippet (wald„.

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:

Door computer gegenereerde alternatieve tekst:
{ } settings.json 
AL 
ItemsPerJo >creatsnip 
src > codeunit > AL ItemsPerJob.C0( create Snippet 
1 
2 
3 
4 
5 
6 
7 
0 references I You, a few secu„u, 
codeunit 50101 " ItemsPerJob" 
[EventSubscriber(ObjectType: :Codeunit, Codeunit: : "Reporting Tr 
O references 
local procedure MyProcedure(ReportId: 
Integer; var NewReportIt 
begin 
if Report Id = 
report: : "Items per Job" then 
NewReportId 
report: : "Items per Job BOOK" ;

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:
%USERPROFILE%\AppData\Roaming\Code\User\snippets.

The snippets that come from an extension, are stored here:
%USERPROFILE%\.vscode\extensions\<extensionname>\snippets

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:

Door computer gegenereerde alternatieve tekst:
[2020-01-19 16:36:43.414 
] [renderer3] [error] Error: Unable to read file (EntryNotFound (FileSystemError): Error: ENOENT: no such file or directory, open 
' c : \Users\ericw\. vscode\extensions \waldo. crs-al- language-extension-l .1.22\snippets j son ' ) 
at .doReadAsFiLeStream (fiLe:///C:/Program FiLes/Microsoft VS Code/resources/app/out/vs/workbench/workbench.desktop.main.js:1591 :434) fiLe:///c%3A/Users/ericw/. vscode/ 
extensions/waLdo. crs -a L - Language- extension -1.1.22/ snippets/fromALExtension/tab e. j son 
[2020-01-19 16:36:43.414 
] [renderer3] [error] Error: Unable to read file (EntryNotFound (FileSystemError): Error: ENOENT: no such file or directory, open 
' c : \Users\ericw\. vscode\extensions \waldo. crs -al - language-extension-l .1.22\snippets . j son ' ) 
at .doReadAsFiLeStream (fiLe:///C:/Program FiLes/Microsoft VS Code/resources/app/out/vs/workbench/workbench.desktop.main.js:1591 :434) fiLe:///c%3A/Users/ericw/. vscode/ 
extensions/waLdo. crs -a L - Language- extension-l . 1 .22/ snippets/fromALExtension/xmLport. j son 
2020-01-19 16:36:43.414] [renderer3] [error] Error: Unable to read file (EntryNotFound (FileSystemError): Error: ENOENT: no such file or directory, open 
' c : \Users\ericw\. vscode\extensions\waldo. crs-al- language-extension-l. 1.22\snippets\appjson . j son ' ) 
at .doReadAsFiLeStream (fiLe:///C:/Program FiLes/Microsoft VS Code/resources/app/out/vs/workbench/workbench.desktop.main.js:1591 :434) fiLe:///c%3A/Users/ericw/. vscode/ 
extensions/waLdo. crs -a L - Language- extension-l . 1 .22/ snippets/appjson. j son

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:

5.00 avg. rating (97% score) - 2 votes

Permanent link to this article: https://www.waldo.be/2020/01/20/vscode-snippets/

12 comments

1 ping

Skip to comment form

    • ajkauffmann on January 20, 2020 at 10:45 am
    • Reply

    You can fully disable snippets with this setting

    “editor.snippetSuggestions”: “none”

    Other options are to place them at the top, bottom or inline.

      • waldo on January 20, 2020 at 7:25 pm
        Author

      Removing all snippets are a little bit drastic, don’t you think? 😉

      • ajkauffmann on January 20, 2020 at 8:21 pm

      Sure, and I have that setting because I hate the myriad of snippets that are filling up my head dropdown because som many people think I’m waiting for their snippets…
      But actually I was replying to your comment:

      Can I disable snippets?

      Well, no.  You can’t in any decent way (that I know of) disable snippets.

      • waldo on January 20, 2020 at 8:22 pm
        Author

      Still not a decent way in my opinion ;-).

      • ajkauffmann on January 20, 2020 at 8:29 pm

      I can’t think of any more decent way then just disable it in the settings. But I think we are talking about different things here. I guess you are talking about disabling the snippets from one particular extension. And I hate it to install an extension for a certain purpose and get some snippets for free which I don’t need.
      Well… live and let live I would say. And I can definitely live without those snippets. 😊

      • waldo on January 20, 2020 at 8:32 pm
        Author

      Well, aren’t you disabling all snippets, including your own?
      Indeed, I’d like to disable snippets per Extension – same reason as you.. 😉

      • ajkauffmann on January 20, 2020 at 8:36 pm

      Yes, I have al snippets disabled and you might think I’m crazy 🤪 because of that. But I prefer that above the crowded list of unnecessary snippets. Most of my time goes into thinking and rethinking the solution anyway, not into write the code itself.

      • waldo on January 21, 2020 at 12:20 am
        Author

      You are right … I think you are crazy … lol :-).
      (Kissing, of course …)

      • ajkauffmann on January 20, 2020 at 8:46 pm

      Maybe I will give this one a try: https://marketplace.visualstudio.com/items?itemName=svipas.control-snippets

      • waldo on January 21, 2020 at 12:19 am
        Author

      Me too :-). Never heard of it!

    • A Random Passer-by on January 21, 2020 at 12:16 am
    • Reply

    I agree that you can save lots of time using snippets. Would not want to work without them. (And you can easily create them yourself)

    You can even go completely nuts with them. Working on a generic interface platform in which an interface consist of several different objects. (for instance some default fields on the exported entity (table extension + page extension))
    When finished there will also be a snippet to generate the basic object set from scratch with a snippet. (So generating multiple files with one snippet and thus reusing the entered data)

    I also included things like selecting a Table to extend (as you would in VS Code) a Page to extend (as you would in VS Code) a few sample fields from that table to export (also just as you would in VS Code, you can even select the fields added in the table extension 🙂 ).

    I agree that’s not your average snippet and it doesn’t look like a regular snippet, but with an own “basic” split file function (sadly not yet part of CRS 😉 ) and the auto file rename of CRS I have – by only filling the fields in the snippet – a first working version of an export of any table and any fields ready to deploy. The developer only has to add some extra fields and presto..

    P.s.: All “snippet code” ends up in a separate file which can be removed after splitting. The entered data is only used to create the real objects.

      • waldo on January 21, 2020 at 12:18 am
        Author

      Ok… I’m intrigued ;-).

  1. […] VSCode & Snippets […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: