How To Add Custom Code Snippets in VS Code

Those who know me and my articles know that I am a fan of VS Code. The editor supports me in my work on several levels. It is therefore all the more important for me to understand the features of the editor. I read through every changelog and test new features. On Twitter, I follow Matt Bierner who always publishes new tips and tricks. I have already learned a lot from him.

For some features in the VS code, you need extensions. VS Code does not provide everything out of the box. And yet there are features for which you don't need another battery-crushing extension. For example, for code snippets.

There are some extensions in the VS Code Marketplace that offer you hundreds of code snippets. I have already tried some of them. I currently have Snip Snap installed. Although I'm happy with it, there are always use-cases I want to have as a snippet independent of extensions. Because extensions come and go.

Do you remember my last VS Code Tip about console logging with Turbo Console Log? This extension can also be mapped as a snippet to a certain extent. Let's see how that works.

Setup

First of all, open the Snippet Manager in the Command Palette. To do this, type CMD + Shift + P (CTRL on Windows) and select "Preferences: Configure User Snippets". Now you have to choose a language for which you want to create the snippet, or you create a global one. In our example, I choose javascript.json.

It should look something like this if you have not set up any snippets yet:

{
  // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //    "prefix": "log",
  //    "body": [
  //        "console.log('$1');",
  //        "$2"
  //    ],
  //    "description": "Log output to console"
  // }
}

Let's now look at a common use case. You want to quickly create a console.log for a variable. This is a common scenario for me. Initially, the Turbo Console Log extension did not exist, so I resorted to code snippets.

And so I created a snippet with the prefix logvar. This creates a new line with console.log('\\n>> ', { }); // eslint-disable-line. This is the corresponding snippet in my javascript.json file:

{
 "Print to console": {
    "prefix": "logvar",
    "body": ["console.log('\\n>> $2', { $1 }); // eslint-disable-line", "$3"],
    "description": "Log variable to console"
  }
}

Let's take a quick look at the snippet itself. The $n placeholders stand for the tab Index of the cursor. First, my cursor lands at $1 when the snippet is inserted, then the next tab lands at $2 and so on. You can use this to make it easier for you to insert values in your snippet.

Okay, let's take a look at the snippet in action.

Snippets can help you to support your workflow and relieve you of certain tasks. Use them to have frequently entered code snippets available as shortcuts. You can also enter more complex ones, you just have to pay attention to the formatting of the output.

As a final case, here is a more comprehensive example that creates ready-to-go code for a test with React, Jest, and Enzyme.

{
  "Jest test": {
    "prefix": "jd",
    "body": "import React from 'react'\nimport { mount } from 'enzyme'\n\nimport Component from './component'\n\ndescribe('Component', () => {\n\tit('renders', () => {\n\t\tconst wrapper = mount(<Component />)\n\t\texpect(wrapper.html()).toBeTruthy()\n\t})\n})",
    "description": "Inserts a dummy and example jest test code."
  }
}

The final result looks like this:

I hope I could show you that you can also create code snippets without extensions and thus make your daily work easier.

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below or on Twitter, please.