Use Sublime Text Snippets to Avoid Repetitive Typing

Yoni Weisbrod
InstructorYoni Weisbrod
Share this video with your friends

Social Share Links

Send Tweet

Speed up your Sublime Text workflow by creating snippets out of boilerplate code. Sublime Text snippets are smart, configurable, and prevent repetitive typing.

When I type two brackets and press tab, this snippet that I've already defined creates a fat arrow function and allows me to quickly supply the function argument and then the body. I've also defined a snippet to generative React native components that I can quickly name and populate.

To create a new snippet, create an XML skeleton with the snippet tag. You can also use the built-in skeleton by going to tools, developer, new snippet. Then this shows you some of the properties that you can define. To find the directory to save it in, browser packages, click user, and use the Sublime snippet extension.

Our snippet is triggered by typing two brackets and then pressing tab, so that'll be our tab trigger. Next, we'll add our content denoted by the seed data syntax. Our snippet now works, but it doesn't allow us to pre-fill the argument or the body.

Let's add that functionality by putting in a placeholder, a dollar sign and a number. First, the user will fill out the function argument, and then we'll add another placeholder for the function body. Now, let's make it even easier for the user by adding a default argument X and a default body so that the function isn't empty.

When we test it out, we can see that we can automatically pre-fill the first argument and then cycle right to the body using the tab key.

The last thing for us to do is to prevent our snippet from running on non-JavaScript files by scoping it to source JS. You can find the scope in any file by running ctrl+shift+P on Mac or ctrl+shift+alt+P on Windows.