Create a VSCode Snippet with Tab Stops and Named Variables

[00:01] Using snippets in VS Code allows for quick reuse of code. To check out what snippets are currently in existence, you can go to the code preferences. Click on user snippets. Then we'll select the language of the snippets that you want. We'll type JavaScript. Then we'll have this JavaScript.json file that's open.

[00:21] We can see which snippets that we have that were already created. There is some complexity in creating snippets. Because of the structure of the body of the snippet, it is an array of strings. This can be complex to create by hand.

[00:38] There are helpers, like snippets.now.sh, where you can paste in the code, the description, the tab trigger and the scope. However, there are also plugins inside of VS Code, one such called snippet creator, that allows you to create snippets from code that is currently in your IDE.

[00:59] First, we'll install this. I already have it installed. You simply click the install button and then reload your IDE. The first kind of snippet we'll create is one that utilizes tab stops. This one is great for functions that take multiple arguments and don't have any defaults.

[01:18] For example is the animated.spring command from React Native. Type animated.spring. The first is an animated instance, so we'll place a tab stop here with a $1. The one indicates that this is the first place that, when the snippet is created, the cursor will be put there.

[01:36] Then it takes a configuration. We'll say $2 and then we'll just put a semi-colon. To create the snippet, we will use the snippet creator extension that we've installed. We'll highlight this code. Press cmd-shift-p on the Mac. Type snippet and say create snippet. It will then ask us for the type. We'll say it's JavaScript.

[01:59] Then it'll ask us for a name. We'll say animated.spring. Then the shortcut. This is the command that you typed to create the snippet. We'll type spring, then a general description, React Native animated.spring. Now, we delete this and type spring, as that was our command. We can see that our user snippet is brought up.

[02:22] When we press enter, it places the cursor at our first tab stop. We can say this.animated. Then when we press tab again, it will move to the next cursor, where we can then add our configuration object. To get out of this tab stop and to start writing code, you can press escape. Now we are in there and we can start typing our code quickly.

[02:46] The second kind of snippet that we want to create is one that uses named variables and defaults. We'll first create a snippet that generates a React Native component. We'll say import React and Component from React. Then we will import view from React Native. Then we will say class.

[03:11] Here is where we will add our names. We'll say $name and then give it a default MyComponent extends component the render, which will return empty view. Additionally, with the export, we'll say export default, then use this same configuration here.

[03:36] Now, whenever we save this and create our snippet, it will default to the name MyComponent. Let's create our snippet. Cmd-shift-p, again. Create snippet. JavaScript. Say create React Native component. We'll say create RNC, and another description create React native component.

[04:07] Now, when we type create RNC, we have our snippet that comes up, and we have our defaults and our cursors are here. If I type my other component, press escape, and now we've quickly created a class component that has names as well as a default.