• Home
  • About
  • Contact
Brandon Tillman

How to: Create custom code snippets in Visual Studio Code

June 16, 2016 by Brandon Leave a Comment

Custom Snippets

In Visual Studio Code, you have the ability to create custom code snippets that are available via Intellisense. This is really useful when you want to get things done quickly, as there is no limit to how complicated the code in the snippet can be!

If you haven’t tried Visual Studio Code yet, you’re missing out on one great, open source, cross platform code editor. If you have, you’ll know it has a modern UI that is really quite simple, leaving a lot of the options to be configured in JSON files. Custom snippets are handled the same way, you create a JSON file (it will be generated for you) and add your template; let me show you how.

New Snippet

To create a new code snippet, simply go to File > Preferences > User Snippets in Visual Studio Code’s main menu. After that, you will be prompted to select a language for the snippet. Snippets are created by editing a <language>.json file, inside you will find that the file contains an example for us already.

Lets go ahead and make a new JavaScript template, that helps us add some comment blocks to help facilitate better code documentation. Inside the template, I’ve added the following JSON object for my snippet:

{
	"Comment Block": {
		"prefix": "cblock",
		"body": [
			"/*",
				"|--------------------------------------------------------------------------",
				"| ${1:Title}",
				"|--------------------------------------------------------------------------",
				"|",
				"| ${2:Description}",
				"|",
				"*/"
		],
		"description": "Creates a comment block for well documented code."
	}
}

The above JSON object defines our new snippet. The object key itself is just a name, prefix is the actual intellisense command, the body is the output, and the description shows up under the command in intellisense.

Lets see our new cblock snippet in action!

cblock_example

As you can see, the Title and Description are selected via the Tab key, as you would expect the included snippets to work. How did we do that? Using the simple variable syntax, like ${1: Title} or ${2:Description}.

Variable Syntax

You can create variables in your snippets quite easily. Using the variable syntax of ${foo:bar} we can do some really useful things that will speed your development time. Every time you define a variable, you will be able to press Tab and jump to its location in your snippet. There are a few things to note however, using nothing but a number ($1) will provide a blank place for the cursor to land, but if you use a value (${1:Foo}, you get a placeholder of “Foo.” Variables are also connected to each other, if you define $1 two places in your code, both will get updated with the same value!

Another example

Lets apply what we know now and take this a step further. Lets say you’re an Angular 1.5 developer, and you find yourself creating a lot of factories that need the same structure each time. You could always copy and paste from the last factory you made, or you could make a code snippet that will help you generate this quickly… lets do that instead!

"Angular Factory": {
	"prefix": "angularFactory",
	"body": [
		"function ${1:Name}(${2}) {",
		"\tvar service = service || {};\n",
		"\t${3}",
		"};\n",
		"${1}.$inject = ['${2}'];\n",
		"angular",
		"\t.module('${4:Name})'",
		"\t.factory(${1})"
	],
	"description": "Barebone Angular 1.5 factory."
}

Have a look at the snippet above, you’ll notice we have a ${1} in there three times. That is because we want to use that value multiple places, when the user enters ${1:Name} the function before “$inject” and the one we pass into “.factory()” is populated.

Lets go ahead and use this snippet to create a UserService for our Angular app:

angularService_example

Wrapping up

Hopefully this demonstrates the effectiveness of creating custom snippets! Take this one back to work and impress your boss with your new and improved speed!

The official documentation on snippets can be found here.

  • Author
  • Recent Posts
Brandon
Sr. Software Engineer at Undisclosed Investment firm/Brokerage
Latest posts by Brandon (see all)
  • RadListView | Using the Telerik UI for Xamarin.Forms - August 6, 2019
  • Clean Architecture | Creating Maintainable Software using .NET Core - May 2, 2019
  • Xamarin Forms How-to: Navigation with slide out menu - August 15, 2017

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to email a link to a friend (Opens in new window)
  • Click to print (Opens in new window)

Like this:

Like Loading...

Related

Posted in: Tutorial Tagged: Template, VSCode
← ASP.NET Core Identity | Change default password restrictions
Xamarin Forms How-to: Navigation with slide out menu →

  • Popular
  • Latest
  • Today Week Month All
  • Xamarin Forms How-to: Navigation with slide out menu Xamarin Forms How-to: Navigation with slide out menu (14,759 views)
  • Clean Architecture | Creating Maintainable Software using .NET Core Clean Architecture | Creating Maintainable Software using .NET Core (4,810 views)
  • How to: Create custom code snippets in Visual Studio Code How to: Create custom code snippets in Visual Studio Code (2,123 views)
  • AngularJs Tutorial: WoW Realm Status AngularJs Tutorial: WoW Realm Status (1,374 view)
  • Entity Framework Code-First tutorial | C# .NET MVC 5 Entity Framework Code-First tutorial | C# .NET MVC 5 (1,032 view)
  • RadListView | Using the Telerik UI for Xamarin.Forms RadListView | Using the Telerik UI for Xamarin.Forms
  • Clean Architecture | Creating Maintainable Software using .NET Core Clean Architecture | Creating Maintainable Software using .NET Core
  • Xamarin Forms How-to: Navigation with slide out menu Xamarin Forms How-to: Navigation with slide out menu
  • How to: Create custom code snippets in Visual Studio Code How to: Create custom code snippets in Visual Studio Code
  • password ASP.NET Core Identity | Change default password restrictions
Ajax spinner

Beer me!

Did one of my posts help you out? I'm glad! If you'd like to help supply my fuel for more posts - please consider donating to the cause!

10-Day Free Trial

Tags

.net .Net Core AngularJS API Architecture Authentication Blizzard API Callbacks CentOS code first commanline entity framework HTML5 http JavaScript linux minecraft Networking restful srv Telerik Template Tutorial UI vm VSCode Web web api web development Webservice wordpress Xamarin XAML

Recent Comments

  • Tillman32 on Xamarin Forms How-to: Navigation with slide out menu
  • hartman on Xamarin Forms How-to: Navigation with slide out menu
  • Tillman32 on Xamarin Forms How-to: Navigation with slide out menu
  • hartman on Xamarin Forms How-to: Navigation with slide out menu

Categories

  • .Net
  • AngularJs
  • Entity Framework
  • Featured
  • Javascript
  • Linux
  • Minecraft
  • Projects
  • Tutorial
  • Videos
  • Wordpress
  • Xamarin

Follow me on Twitter

My Tweets

Copyright © 2023 Brandon Tillman.

Omega WordPress Theme by ThemeHall

%d bloggers like this: