Visual Studio Code is fast becoming my favourite code editor. After trying Sublime, Atom and WebStorm, I began using it after a bunch of my developer friends started raving about it. While there are a few features from each of the other editors that I still miss, IMO for a free, speedy and nice-looking editor VSC is hard to beat.

I’ll share some of my favourite extensions and add-ons over time, but for now I want to share a really quick way to speed up your workflow with the handy snippets editor.

Anyone who codes for a living (or even just for fun) in JS probably types ‘console.log’ a few hundred to a few thousand times a year. I know I do :) With VSC code snippets, you can reduce the amount of typing you do for repetitive tasks with code snippets.

Here’s how making a VSC code snippet for console.log works.

) Go to File > Preferences > User Snippets:

2.) You’ll be prompted to choose a language (in this case JS)

3.) There is an example at the top of the file (also for a console.log). However, I wanted to customize mine. The settings file is JSON. Here’s how I built my console.log snippet:

There are some variables that you can add in to the snippet for tab stops, cursor positions and placeholders. In this case I’m using the string ‘clg’ to create a console.log statement and place the cursor between the brackets.

And that’s it! Now I go from typing ~10 characters for a console.log statement to just 3. Of course you can play around with what suits you, and there are many more code snippets to be added to suit your workflow.

To go further into depth creating your own code snippets (and finding comprehensive language-based snippets in the marketplace), check out the VSC docs on snippets here: https://code.visualstudio.com/docs/customization/userdefinedsnippets

Happy coding!