Creating VS Code Snippets to Pace Up Workflow

Writing code will be repetitive, and lots of builders (myself included) decide to make our lives simpler by configuring our code editor of option to auto-complete frequent statements within the given coding language.

My very own most popular editor, VS Code, contains Intellisense out of the field, which supplies frequent code snippets for auto-completion as you sort. Urgent Enter or Tab inserts them into your code.

Maybe you want one thing extra customized? There are numerous extensions within the VS Code Market that present snippets in quite a lot of languages. Personally, I take advantage of Sarah Drasner’s Vue VS Code Snippets extension, which features a complete bunch of snippets for Vue.

Writing our personal snippets

However we are able to additionally create our personal snippets! To do this out, let’s create a snippet for a min-width media question — one thing I’ve to sort out pretty often.

Create a brand new snippets file

To entry the applying snippets information we are able to press Shift + Command + P to deliver up the command palette on a Mac (on Home windows it is likely to be a barely completely different mixture), then choose the choice Configure Consumer Snippets. Alternatively, we are able to go to Code > Settings > Configure Consumer Snippets. This brings up any current snippets information, and a menu of accessible languages for creating new snippets. We will choose one in every of these, or choose New International Snippets file if our snippet ought to be out there in all languages. We’ll choose “CSS”. This brings up a brand new JSON file, the place we are able to begin writing our snippet.

There’s additionally an choice to create project-specific snippets. I usually discover creating international ones most helpful, however there could possibly be events the place project-specific snippets is likely to be most popular. You may commit this to the repository to share it between all builders.

Outline the snippet

Let’s add some JSON for our new snippet, which we’re going to name “Breakpoint”. Our code wants to incorporate three issues:

1. A prefix — what we’ll sort as a way to set off the snippet to be inserted
2. The physique — the precise code to be inserted
3. An outline — this seems within the menu, and can assist us discover our snippet simply.

We’ll create a easy, single-line snippet first:

{
  "Breakpoint": {
    "prefix": "bp",
    "physique": ["@media screen and (min-width: )"],
    "description": "Create a brand new min-width media question"
  }
}

Now, if we open a CSS file in VS Code and sort bp then Enter, the physique of our snippet ought to be inserted into our file!

Multi-line snippets

If we wish to embody a number of traces of code, we have to write every line as a string within the physique array. We’ll make our snippet span three traces, including the curly parentheses:

{
  "Breakpoint": {
    "prefix": "bp",
    "physique": ["@media screen and (min-width: ) {", "", "}"],
    "description": "Create a brand new min-width media question"
  }
}

Cursor place and tab stops

We will management the place of the cursor when the snippet is expanded. Including $0 right into a string denotes the ultimate tab cease, whereas $1, $2, and so forth. are cursor positions that may be tabbed via so as.

As the very first thing we’ll most likely wish to do is decide the min-width for the media question, let’s set our first tab cease there. We’ll set our remaining cursor place contained in the media question parentheses, with a tab character earlier than it (t)

{
  "Breakpoint": {
    "prefix": "bp",
    "physique": ["@media screen and (min-width: $1) {", "t$0", "}"],
    "description": "Create a brand new min-width media question"
  }
}

Placeholder alternative

If we’ve got just a few breakpoint values we use pretty often, we might configure our snippet to permit us to pick from these predefined values. Let’s add three attainable values to select from for our media question:

{
  "Breakpoint": {
    "prefix": "bp",
    "physique": [
      "@media screen and (min-width: $) {",
      "t$0",
      "}"
    ],
    "description": "Create a brand new min-width media question"
  }
}

Utilizing our snippet

Now after we sort bp in a CSS file, it ought to develop our media question and provides us a alternative of values, which we are able to choose by urgent Enter. We will additionally decide to insert a snippet by citing the command palette (Shift + Command + P) and deciding on Snippets: Insert Snippet, which brings up related snippets for our file.

Additional studying

VS Code snippets are nice for dashing up your workflow. There’s much more you are able to do with them, together with utilizing variables and assigning key bindings. Try the documentation. Glad coding!