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.
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.
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.
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.
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.
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.
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.
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.
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.