Snippets allow you to automate repetitive coding tasks with just a few keystrokes. In this video I demonstrate how to automate the creation of React Native components, something I find myself doing fairly often. https://youtu.be/ShhRYKdfzDQ
Transcript
In my Sublime Text, I’ve defined a snippet that automates the creation of a new empty React Native component because it’s something I find myself doing fairly often. It trigger it by typing ‘rnc’, or React Native Component, and then the tab key.
Notice that once my snippet is inserted, the component name is automatically highlighted, allowing me to rename it. When I change the field text, it also changes the name of the component in the export line at the bottom. And if I press tab again, it cycles to the next field that I’ve defined, allowing me to leave in some default text or delete my placeholder entirely.
Let’s learn how to build this.
To create a new snippet, create a new XML skeleton with this snippet tag and save the file as rncomponent.sublime-snippet. You need to use this file extension if you want Sublime to understand it.
Incidentally, you can also use a built-in shortcut to produce a similar skeleton snippet by going to Tools->Developer->New snippet.
A snippet contains four elements. First we define the TabTrigger that Sublime will use to detect our snippet. In our case, it’s just rnc.
Then we can define a description, which will be used by Sublime in our list of snippets under Tools=>Snippets.
Now let’s add in the contents of our snippet.
We use the CDATA syntax to denote the contents, so I’ll add a content tag, then the CDATA syntax, and then I’ll copy in the React Native component that I already have as our initial snippet.
Let’s test it out. We’ll create a new file, type rnc tab, and we have our generic component. But it can’t yet do any of the fancy tricks that we showed at the beginning. So let’s add the ability to define the component’s name right when the snippet is inserted.
To do this, we’ll swap the component name with a placeholder, which in Sublime is a dollar sign and a number corresponding to the order in which the field will be filled in. So we’ll call our component name $1 and place it in the class definition and in the export line.
What if we want to define a default component name? Sublime lets us provide a default value for each placeholder, and if we define our component name as MyComponent, this value (or whatever value we later replace it with) will automatically be mirrored in the export line. Let’s try this out.
Now we’ll do the same for our default contents, but this time we’ll use $2, so that the user can use the tab key to fill this in next.
To complete our snippet and make it more usable we’ll restrict its scope to Javascript files. We can check Sublime’s cope definition at any point by typing ctrl+shift+p on a Mac (or ctrl shit alt p on windows), and if we do that inside a javascript file, it tells us that it’s source.js so we’ll use that syntax to restrict our scope. Now if we create a new xml file, the snippet will not work there, but it will work on our Javascript file.
And that’s all you really need to create snippets. As a practice exercise, try recreating a snippet that I made for ES6 fat arrow functions. The snippet is triggered by typing two brackets and pressing tab, and then it allows you to define a single argument and a return value.