VSCode Snippets

Following on from a previous post where I briefly went through introducing Yeoman I thought I would do a quick post on Visual Studio Code snippets.

If you’re a .NET developer then you will probably be used to Resharper, this makes Visual Studio just about usable. If you don’t have Resharper then shame on you! Resharper has a template facility which is much like the VSCode snippet feature I’m about to describe. I will post on Resharper later too.

Visual Studio Code

I’m reasonably new to using this IDE but I have grown to love it, since I started using it a few months ago I haven’t had any crashes or slowdowns which is a big step forward from when I was previously using Visual Studio 2015.

By the way VSCode is not a fork of Atom and is actually based on the Visual Studio Online editor named Monaco

Productivity

The name of the game here is productivity. Although you obviously code with SOLID principles in mind and you’re following the DRY (Dont Repeat Yourself) principles you will inevitably get pieces of code that you have to write over and over again, for example test setup, class definitions ect.

The snippets feature of VSCode allows us to enter a template of code and assign a keyword that allows us to type the keyword in the IDE, then enter or tab to insert the piece (snippet) of code into the IDE. You can also add placeholders so that you can table through entering values as you go.

Jasmine describe block snippet

I’m doing a lot of Angular development at the moment so am constantly writing Jasmine tests with describe blocks and it statements. Here is how to add two snippets to do this with a keyword.

Open VSCode and navigate through the menus

File > Preferences > User Snippets

vscode-snippet-menu

This will open a dropdown where you need to specify the language to apply the snippet. Select JavaScript for this demo. You can add snippets for all the supported language and by doing so this means that the snippets appear for their corresponding language.

You should have the snippet file open called javascript.json and you should notice that commented out is an example snippet to show you the pattern you need to follow to add your own snippets:

vscode-snippet-sample

The sample gives a good explanation of how to add a snippet so lets go ahead and add one for a Jasmine describe block, here is how that could look:

vscode-snippet-describe-block

"Jasmine describe block": {
 "prefix": "jasdesc",
 "body": [
 "describe('$1', function() {",
 " $2",
 "});"
 ],
 "description": "A Jasmine test describe block"
 }

You can see from here that its all json and we start with a name for the snippet. Next the prefix is added and this is where you specify a keyword to use in the IDE to apply the snippet. Body is the actual code and here I have used some tab stops notated with a $1. The tab stops allow the cursor to start in the snippet and tab to the next one so you can add the snippet then tab through entering custom values

Lets see it in action:

Create a javascript file and the type jasdesc. You will see VSCode recognise this keyword and display whatever you entered for the description in the snippet json file earlier:

vscode-snippet-in-action

Enter or tab when you see this and notice that the cursor starts where we put the $1. Enter some text and then press tab. Notice now that we move through to the next tab stop which in our case is where we put $2. You can put any number of these tab stops in place so you can see how powerful this can be.

Connected variables snippet

Another powerful feature other than the tab stops is the variables and how they’re connected if you place them in the snippets. Lets give that a try with a more complete block of code for an Angular Jasmine unit test.

I want a snippet to write out a describe block specifying a function name and a test to test that the function is defined on the sut (system under test). The result will look something like this:

describe('service definition tests', function(){
 it('should define function save', function(){
 expect(sut.save).toBeDefined();
 });
});

Here is a snippet to do that, notice the use of ${funcname}. This will allow us to type in the function name once and it will use it in the it statement and also append it to sut.

"Jasmine describe and it block to test function definition": {
	"prefix": "jasdeftest",
	"body": [
		"describe('service definiction tests', function(){",
		"	it('should define function ${funcname}', function(){",
		"		expect(sut.${funcname}).toBeDefined();",
		"	});",
		"});"
	],
	"description": "A Jasmine describe with it block that tests the function specified is defined"
}

Lets try the snippet out, goto the javascript file and start typing jas notice that we now have both our snippets appear in the intellisense

vscode-snippet-intellisense:

Hit tab and now notice we can add a name for the funcname placeholder we added in the snippet. The name will persist onto both lines completing the snippet.

vscode-snippet-intellisense-complete

Things to try

So I hope this gets you started with snippets. If you’re in a team make sure you all use the same snippets file and you will have a nice consistent codebase. Here are some time saving Angular snippets you should write and fit in with your code guidelines:

  • controller
  • service
  • directive (with link)
  • directive (with compile)
  • directive (with controller)
  • route entry

Remember you can create them for all supported languages in VSCode so go and create some time saving html snippets too

Summary

Don’t waste time writing code that you can create a snippet for, especially useful for test code. You could create a whole stub for a test that sets up a test for a service, injects dependencies and adds a test to check the service is defined. Get creative with it, detailed above should be everything you need to know to create some really useful snippets.

Let me know if you found this post useful and if you’d like to see a Resharper template version of the post too.

Also share some of your snippets if you are proud of the ones you create!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s