Editors: Visual Studio Code

One day, without recalling I had installed it, I saw I had Visual Studio Code on my box. It strikes me as a bit like Brackets, mentioned elsewhere in this blog.


and they also support Emmet:


My interest right now is in JavaScript, and while I’m at it snippets/templates to avoid typing more than I need to.

Some docs around this herehere and here.

Actually on snippets, it starts to get quite interesting – in Code, if you go File/Preferences/User Snippets, and then select HTML as the language, you get this:


So fairly self-documented. If I now remove the comments…


If in a piece of HTML, I now do ctrl-space to bring up the suggestions, this is what I see…


, and if I hit return I see this…


Hm, but in fact that is obviously JavaScript, so that is not a fat lot of help. But in fact it turns out that ALL the template files (e.g. for Docker as well, just as a random punt) have the same starting content.

So those templates anyway give us the principle, so let’s have a punt at that. I’ve hacked up this, which is the simplest possible HTML, but with a few variables thrown in, which get replaced at the point you use them (using ctrl-space to bring up the set):


If we now start out with a blank html page, thus…


, then do ctrl-space to get this…


, hit return to get this, with the cursor resting on ‘Title goes here’,


, start typing to replace that text, then hit tab to get to the next replacement (based on the $ variable you put in template), then you end up with this (but bear in mind because Emmet seems to be on by default, you can’t just press tab willy nilly)


These are the edits I used:


In Chrome with F12, you see this…


, which is fine in that a) the files don’t exist, but b) it has replaced the title with what I wanted. Also note that I have AutoSave on in Code, so upsides and downsides I guess, but it suits me.

And maybe finally, it is easy enough to escape double quotes: