The Startup
Published in

The Startup

Intro to Custom Snippets in VS Code

Eyeglasses in front of several screens covered with computer code
Photo by Kevin Ku on Unsplash

Custom snippets can add some key functionality to your code editor that some extensions may miss.

Extensions with tab completion and code snippet libraries are awesome and help speed up our progress as developers while delivering the same chunk of code every time. Reliable and fast. Not much is better than that.

Occasionally during development you wish you had just one more snippet.. something that would help you with a piece of syntax you are always struggling with, or even a snippet with comments to remind yourself what each line is doing. This is where custom snippets can really do wonders.

What is a snippet, anyway?

Snippets are small chunks of re-usable code, or code that you may see several times in a program with difference circumstances. Some commonly used examples: the forEach loop, add_column etc in a rails migration, and html boilerplate.

How do snippet extensions work in my text editor?

Snippet extensions or libraries give us a large group of snippets built by the developer of the extension. As we are typing into our code editor the extension starts trying to match our live typing with something from the snippet library to give us the option of using the pre-made chunk of code. Most quality extensions do this really well and provide a lot of usability. Below are a few extension examples.

Ruby on Rails
JavaScript Basics Snippet

If we have these great extensions why do we need custom snippets?

Some times extensions just don’t give you what you want. Take the example below. I’m hoping to get a basic fetch request block from a js library I have installed and all I get is … ‘ fetch’

Well. That’s not helpful ¯\_(ツ)_/¯

How about if we make a custom snippet for fetch and add all the information we want ?

Making a Custom Snippet

The VS code documentation ( here ) provides a very good explanation of how snippets interact with intellisense, VS Code’s delivery service for your extensions commands, snippets and other helpful tooltips you might want to check out during the developing process. Custom snippets are also shown here when you start typing their key word. Let’s make a custom fetch snippet because we know we’re going to use that a lot in our MOD 3 project.

Useful Fetch

User create snippets are in Code > Preferences > User Snippets

When you navigate this menu for the first time you will see a long list of programming languages. Each of the .json files can house language specific snippets. For example, we wouldn’t want a JS forEach statement to show up when we are working on our Ruby code.

Snippet files are written in JSON, support C-style comments and a user can define an unlimited number of snippets in VS Code.

Syntax of a snippet

A snippet is made of 4 parts:

Snippet Name: this is what is displayed via Itellisense

Prefix: the trigger word for intellisense recognizing that you want this snippet.

Body: the content of the snippet. i.e. how you want the code to look when you tab complete.

Description: An optional description of the snippet you would like to display in the tool tip of intellisense.

I’ll come clean the above is an over simplification of what the snippet entails. Here are other pieces of a snippet that you are surely going to be looking for.

Indents: Indenting is done with \t . The \ allows you to escape the general conventions of the Json file and add the white formatting you might be looking for.

Tabstops: predefined stops in your snippets body that can be traversed with tab. Very useful when your snippet has other data ( variables, table names ) that you are going to have to fill in after entering the snippet into your code. They are written as a number after a $ sign ($1) if you have more than one you will visit them in ascending order.

Placeholders: tabstops with values. The placeholder text is inserted so it can be easily changed. They simply surround the tabstop in {} and add a colon. Like this, ${2:foo}

Choice: Place holders can have several choices as values. They are chosen from a drop down -ish menu right in the code editor. They look like this, ${1|one, two, three|}

Comments: Whats great code with out comments helping you understand what the heck it does. Comments are divided into two syntaxes: block and line. Block level uses BLOCK_LINE_COMMENT START and BLOCK_LINE COMMENT_END as opening and closing tags for the comment you write inside of it. Line comment simply has LINE_COMMENT at the beginning of the line and will comment the entire thing.

In addition to the above, there are ways to add variables, key bindings and additional formatting to the snippet, but I will leave you to explore those in the VS Code docs.

Put it all together

After some fiddling and testing ( after you save the file you can immediately see if the snippet works in your JS file. I ended up with the below JSON

This give you the below in your JS file

I hope this intro gives you more idea how DIY snippets can give you a leg up when working on your code.

More Information:

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Some Interview questions of JavaScript

Running CPU Intensive task in Nodejs

Building a Recipe Book app in Angular-4

Salesforce & Git Hooks

My Development Toolset for React Native iOS Development

Setting Up Navigation for React Native App

Opinionated Redux, A Refactor Story

How to Add a sitemap for Static Site Generation (SSG) in the next.js app?

How to Add a sitemap for Static Site Generation (SSG) in the nextjs app?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Robert K.

Robert K.

Full- Stack Software Engineer with a former life in high-end restaurant management. Currently working in React JS and Ruby on Rails.

More from Medium

What is Code::Blocks? And How to Use it?

How to optimize Sieve of Eratosthenes in JS

How to Manage Fragile Legacy Code?

How to Build an RSS Feed