3.1 Your First Snippet

In this video, let's take a look at snippets, and this is something you'll definitely want to learn. So I'm gonna create a new file and I will call it index.html, and I'm going to paste in a snippet. So you have some snippets that are provided by default, but how do you know what they are? Well, if I go to Tools, Snippets. You'll see that we bring up this panel, and this is what you're going to find with a lot of the menu options. They're just redirecting you to that command pallet. So instead just bring up Shift+Cmd+P, snippet and now you can see all of the snippets that are associated with that file type. In this case we had the file type set to PHP, but if we were to change it to JavaScript. I'll type JavaScript. And now, I type snippet, now you'll see that we have a different set of snippets specifically for working with JavaScript such as creating a new function. So that's one way that you can bring in your snippets, and that's good for things that you can't remember or things you don't use too often. Snippet and, let's say. Object Value JS and that's in. But you also find with snippets that they show you what the shortcuts are to the right. So, in this case, rather than bringing up the if snippet, I can type if and then hit Tab. So if, now if this dropdown does pop up, then you're not hitting Tab, you're gonna hit Enter, if Enter. Or if else Enter, or for Enter, or function Enter. And that's what's nice is as you're typing, it's going to display any snippets that are associated with that. So in this way, you really don't have to waste time memorizing what these snippets are. As long as you've had the first couple letters. Well I wanna do an if statement. But I also want an ifelse. I can't remember it's said ifelse or ife or ie. Well I'll just type if and we see there it is, and now we have that setup. Now Sublime Text also offers Tab insertion. So I can say if, false then hit Tab and that brings me to the next section. We'll say, alert do something. Now I hit Tab again, and now this brings me to the next section. Like so. Or for a function, fun Enter myfunc Tab, add the argument Tab and now I'm into my body and that will save you a lot of time. But clearly, you're going to find that there are times when you want your own custom snippets and Sublime allows for this. If I go to Tools, New Snippet. You'll see we that we have just some XML here that we can add. So the only thing that you need to edit is this area right here. And if you come from TextMate, this syntax should look very familiar to you. So let's keep it like it is for now. And you'll see there are these optional sections right here, where you can set a tabTrigger. Well, let's set the tabTrigger and I'm gonna hit Cmd+forward slash to toggle commenting, and this is something you can do site-wide. Within index.html, let's add an HTML tag. And now, if I hit Cmd+forward slash, that will comment that out. And, in this case, take a look. Because we set the syntax to JavaScript. It's going to comment according to Java script's language which is two forward slashes, but if I bring that back to the syntax of HTML one more time, command forward slash, now it's using HTML comments. So that's a little tip for you. Anyway, so now we have attached the tabtrigger of Hello. But we haven't saved it so I will hit command s. And it will automatically open a folder within you're packages directory called user, and this is where all of your user specific snippets and settings are going to be stored. So I create a lot of snippets, so it's important that I personally organize them as well as I can and I recommend that you do that to. So let's create a new folder specifically for JavaScript. Now within this folder, we're going to save it as a snippet. In this case, this one is rubbish but we'll say hello. And you need to make sure that your snippets have this extension sublime-snippet. Otherwise, it's not going to register. So now I've saved it and we've created a new snippet with this sequence, and when I type hello, and click Tab, that will expand. Let's try it out. And now, when I type hello. Notice that it's not showing up and that doesn't make sense. We know we set the tab trigger. Well because I created that JavaScript folder. Sublime now knows that it should only be activated even though we haven't set a scope, it knows that it should only be activated for JavaScript files. So if I update this to JavaScript and now I type hello, that will show up. So now let's analyze this snippet. I can say, here and if I hit Tab again, it selects the next one that we've specified, a line of code. And then I hit Tab again and that goes to the end. So this is the way snippets work. Dollar sign, curly brace. And now you're going to specify your first stop point, and then, this is the second stop point. And a stop point, of course, is when you hit tab. Where does the tab take you to next? After the colon, you can specify the default value. So, let's say this is some text. And I want to give the user the ability to expand this but also change some if they want. Well, curlybrace one. I'm gonna set the default value to some, but they can change that if they'd like. So now I save it. I type hello, Enter, and now it automatically selects the first stop point that we specified. I hit changed, hit Tab again, and now I'm at the end of the line. So let's do a real world one. Let's say, we're going to do a self-invoking anonymous function, or you've probably heard multiple ways to say that, self-executing anonymous function, maybe self-invoking function expression, there's lots of different ones. But anyways, this is how you do it and it's essentially a JavaScript function that calls itself. And this is a good way to keep from creating lots of global variables to, to function scope. So now that looks good. I'm gonna change the tab trigger to something I can remember which is siaf. And that stands for self-invoking anonymous function. So now, because it's within that JavaScript folder. I'm gonna type siaf and notice that it brings up the shortcut. So now I hit Enter, and that goes ahead and expands it. But the problem is the cursor is set to the int. What I really want is the cursor to be right here. So I'm going to set the cursor like so. I don't need a default value. So I just want to place the cursor right there. I'll hit save again, and now one more time siaf, Enter, and now I'm ready to begin. So the basic rule of thumb is if you type something multiple times throughout the day create a snippet for it. So to give you an example, I frequently use Backbone. And Backbone has a way to extend its models. Which would be something like Backbone.Model.extend. Something like that. And I do this all the time. So why don't we save that to a snippet? I'm gonna create a new snippet. I'm gonna paste it in like so. I'll place the cursor right here. And I'm gonna set a tab trigger to backbone model. I'll click Save. Within the JavaScript directory a new folder called Backbone for my backbone snippets. And I'm gonna call this model-extend.sublime-snippet. All right. So let's try it now. We'll say, var Item equals backbone model, and that immediately pops up. And it looks like the cursor is incorrect. Let's go back and whoops, I need to update that. So one more time, var Task equals a new backbone model. And now I can begin. And let's go ahead and indent the cursor as well. So this is something I would do for lots of things in Backbone. I'm going to create another one, paste this in, and I'm going to create a new view, so Backbone.View.extend. A tabbed trigger will be set for bv and within Java script's Backbone view-extend.sublime-snippet. So I could do it like this. I could say var TaskView equals b view, and by the way, notice here that it will display the filename. So that means pay attention to how you name these files because the more clear you write them, the easier it is to remember what they are. But anyways, now that's working. Another way we could tackle this would be to say var, and we'll set that to Task, but, of course, that will rarely be the right name. So we'll say, one, like that, and then we'll set that to the second star point. And now I can change this entirely to backbone view. This will be the AppView. Hit Tab again, and now I don't have to manually type that, which takes a long time. And okay. So get started creating your snippets. You don't have to do them all at once, but as you find yourself typing the same thing over and over, create a snippet for it. For example, I'll give you one to start with. What about when you need to add a script source? You probably do this all of the time, and then you paste in your link. Well, why don't you create a snippet called scriptsrc, and that's going to expand to this, but it's also going to make this a stop point right here. So that's essentially what your snippet is going to end up looking like. All right, when you're ready to move on, watch the next video.