Custom snippets/code completion in VS Code

Become a Developer Wizard 🧙‍♂️ in no time with the use of snippets

Charis Theodoulou
Aug 1, 2019 · 4 min read

hile writing code you will soon notice that you write the same code over and over again, either some short one-line piece of code or a longer 5 lines of code that always looks the same. In this article I will be showing you how to save time while coding while you won’t have to remember everything that you type all too often. Get ready to unleash the power of snippets. Get ready to learn some Developer wizardry 🧙‍♂️.

Emmet 🙂

VS Code has built-in support for Emmet and does not require any external extension. However you may want to add support for languages that Emmet is not enabled by default.

In order to add your own snippets using Emmet you can create a snippets.json file that you later point to its directory in VS Code settings. Just type/choose “Preferences: Open Settings (UI)” and then in the search bar type “snippets”. You should then see an option “Emmet: Extensions Path” where you should type the directory path that the snippets.json file is inside (ex: /Users/username/dev/).

Emmet has a big HTML/CSS cheatsheet of snippets that you could use right now, however in this article I will be showing you a way to add custom multi-line snippets with a few commands, while each of the snippets for a specific language are stored in a different file. Because we do code wizardry isn’t that right?

Let’s get cracking!

The snippets JSON file 📂

  1. Open the command palette from within VS Code (⇧⌘P for mac, Ctrl+⇧+P for PC) and type/select “Preferences: Configure User Snippets”.
  2. Choose the snippets language of your choice.
  3. You should get an empty JSON file with some comments briefly explaining the syntax.
  4. To add a new snippet with your own abbreviation just use the following syntax:
{
"Position Absolute": {
"prefix": "posa",
"body": "position: absolute;",
"description": "Add a position CSS property to absolute"
},
...
}

Where:

  • Position Absolute” is the snippet name that you can give it any name you want
  • prefix” is the abbreviation you type in order to receive the snippet as a suggestion
  • body” is the snippet/code itself
  • description” an optional description of what the snippet does (if not present, the snippet name will be shown in the suggestions)

Multi-line Snippets 🔮

I have found out that to add multi-line snippets can be a pain in the neck sometimes so I am using this simple extension that divides the lines of the code and adds it to the appropriate JSON file. Let’s see how this works.

  1. Type and install the “Easy Snippet Maker” extension from within VS Code.
  2. Then just select some code that you would like to add as a custom snippet and use it later.
  3. Open the command palette (⇧⌘P for mac, Ctrl+⇧+P for PC) and type/choose “Create Code Snippet”.
  4. Choose the language of the snippet.
  5. Then the name of the snippet (like Position Absolute in the example above).
  6. Type the snippet prefix (abbreviation) by which you would like the snippet to appear as suggestion when you type it (like posa in the above example).
  7. Finally add an optional description or just press Enter.

Check out the full demo here.

Now if you would again go to your snippets JSON file for that specific language (Preferences: Configure User Snippets from the command palette) you should see your snippet properly configured with each line being an item inside of an array:

"Box Shadow": {
"prefix": "bsh",
"body": [
"-webkit-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.3);",
"-moz-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.3);",
"-ms-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.3);",
"-o-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.3);",
"box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.3);"
],
"description": "Creates a standard box shadow CSS property with all vendor prefixes"
},
...

NOTE: If you cannot test your snippet, check that you are editing a file with the appropriate extension for the snippet language, or you may need to restart VS Code in order for the changes to take effect.

Snippet Caret focus 🧝

You can use the following syntax ${n} in order to focus the caret in a specific place after you have entered your snippet. For example, in the following snippet we are able to insert a value to all the following CSS properties after we have chosen to use our snippet:

"Transform": {
"prefix": "trsf",
"body": [
"-webkit-transform: ${0};",
"-moz-transform: ${0};",
"-ms-transform: ${0};",
"-o-transform: ${0};",
"transform: ${0};"
],
"description": "Creates the transform property with input and all vendor prefixes"
}
Image for post
Image for post
The caret will focus on all 5 places that the ${0} appears at the same time.

If you would like to focus the caret in multiple places by order, you would instead type ${0}, ${1} and so on.

Hope you liked this small tip and that it was an easy read. I barely even touched the power of snippets so if there is something I have left behind that is worth mentioning or you have some inquiries please let us know in the commends below.

For more articles on Web & Mobile App Development make sure to follow me here on Medium and on Twitter where I write about currently popular tools, tips & tricks and more software development news.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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