Custom snippets in VS Code

While 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-line snippet of code that always looks the same.

Now isn't that boring? 😩

Well, in this article I will be showing you one way of how to configure VS Code and summon your custom snippets by the press of 3 buttons so you can have 5x productivity and happiness. Oh yeah, and saving you some time. You're welcome.

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 has 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 in VS Code: ⇧ + ⌘ + P for mac, ctrl + ⇧ + P for PC
2. Type/select “Preferences: Configure User Snippets”
3. Choose the snippets language of your choice i.e. css
4. You should get an empty JSON file with comments briefly explaining the syntax
5. 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": the snippet name that you can give it any name you want
• "prefix": the abbreviation you type in order to receive the snippet as a suggestion
• "body": 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. 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)
4. Type/choose “Create Code Snippet”
5. Choose the language of the snippet
6. Give a name to the snippet (like "Position Absolute" in the example above).
7. 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).
8. 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"
}

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.

If you would like to try out more ways to speed up your development, have a look at my other lazy hack about 'Loading...'.