TextMate Snippets: Part 1

[?mellow guitar music?] 0:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 0:03 [Mac OS X Tools - TextMate Snippets: Part 1 with Jim Hoskins] 0:07 If you've worked with TextMate, you've probably encountered snippets, 0:13 which allow you to add chunks of code to your document. 0:16 In this video, we'll see the basics of creating your own snippets. 0:18 Now, one of the most useful features in TextMate is the ability to add snippets. 0:22 If you've never used snippets before, this is sort of how they work-- 0:28 they're just basic pieces of text that you can insert into a document 0:31 that you would use very often. 0:35 So for example, I'm in an HTML document, and we can see that our mode here is HTML 0:37 and the built-in HTML bundle that TextMate comes with 0:42 comes with a few snippets already built in. 0:45 And one way that we can activate and paste these snippets into our document 0:48 is to use what we call a Tab trigger 0:52 and this is done by typing in a keyword that's associated with a snippet 0:54 and then immediately hitting the Tab key. 0:58 Then, the snippet associated with that keyword will replace it 1:01 and there are different variables that you can tab through. 1:04 So if I were to type right now, I could overwrite this id inside of my div tag, 1:07 or if I hit Tab I could move into this name here and give it a name, 1:11 and I keep hitting Tab and it will move me different places around the snippet 1:15 that I might want to be in. 1:18 Well, these are really cool--there's a lot of different ones built in, like forms 1:20 and things that you would use very often 1:23 but we can even build our own. 1:26 So let's take a look at how we can do that. 1:28 To get started, we want to open up the bundles menu and click on Bundle Editor 1:30 and Show Bundle Editor. 1:35 Now, this shows you all the bundles that are installed 1:37 and all the bundles will contain things that look like snippets 1:40 and snippets here are the purple ones with the "s." 1:43 We can even take a look at some of them that are already built in. 1:46 For me, I want to make some HTML snippets, so I'm actually going to dig in 1:49 to this HTML bundle to keep it organized 1:53 and we can see there's a lot of different commands and stuff in here, 1:56 and we can see all the snippets that we had before. 1:58 We can even take a look at the div one and see how it's formulated. 2:01 Now, to build our own, all we need to do 2:05 is click on + down here and click on New Snippet. 2:07 Now, this will create a new snippet in whatever bundle you're currently focused in 2:12 and you want to give that snippet a name. 2:16 Now, I'm going to call it li with the child selector "a" because basically what I want to do 2:18 is create an li tag with an <a tag inside of it--something that I would do often 2:25 for, for instance, a menu on a website. 2:29 So I'm going to give it that name and by default, it gives us this syntax summary, 2:32 which is really nice because it's a good reference when you're starting to build it up. 2:36 We're going to go over quite a few of these concepts when we build our own snippet. 2:40 So right now I'm going to clear it out and let's go back to our document. 2:43 So I've created my first basic snippet--this is the most basic that I could do. 2:48 I want an li tag with an <a tag in it, and basically, I want to be able to trigger it 2:53 by typing lia--that's the trigger that I would like to use--and hit Tab. 2:57 So right now, we don't have anything set up, 3:03 so what I'm going to do is I'm going to copy this text snippet 3:05 and go over to my Bundle Editor, and I have lia selected, 3:07 and I'm just going to paste it in. 3:10 The next thing we need to do is decide how it's going to be activated. 3:12 There's two things we could do--we could create a keyboard shortcut 3:15 using the key equivalent, or a Tab trigger. 3:18 I like Tab triggers better because they allow me to sort of see what I'm typing, 3:21 and they're easier to remember than figuring out certain key equivalents, 3:25 but you can use key equivalents and just assign it a shortcut key 3:28 if that's what you'd like to do. 3:31 So now I decided I want to use the Tab trigger and so I just need to give it the trigger keyword 3:33 that I want to use. 3:38 In my case, I want lia. 3:39 Now, the last thing I'm going to do is I'm going to add a scope selector 3:41 and this says when in a document that this particular snippet-- 3:45 it makes sense to put it in. 3:48 For instance, if I was in a JavaScript document, 3:50 this wouldn't make a whole lot of sense, 3:52 but in an HTML document, it does. 3:54 Now, one way to figure this out is to look at a similar snippet 3:56 and see what scope selector it's using--text.html-- 3:59 and that's what I'm going to go ahead and use. 4:03 So now we're saying inside of HTML text, we're going to be able to use lia 4:05 as a Tab trigger for this snippet. 4:10 Now, there's no real save dialogue, but if you just defocus 4:12 and maybe click on this list over here, it will activate the snippet 4:16 and that's what we're going to do, so it's now active in my TextMate. 4:19 So if I come down here--and remember, I am in the HTML mode, in the HTML scope-- 4:23 I type in lia and I hit the Tab key, 4:28 and we have now replaced the lia with the actual li tags and <a tags, 4:32 and I can use the arrow keys to move around and fill in stuff as I need. 4:36 Now, you'll notice when I typed it in, my cursor went to the end of the snippet. 4:40 It would be nice if it placed it in here so I could start typing the content inside of the a tag, 4:44 and that's what our next snippet will do. 4:49 So we can set the final cursor position by using a variable called $0. 4:51 When we place $0 into our snippet code, that tells TextMate I want my final cursor position 4:57 to be at this point. 5:02 Now, it won't print out the $0 in the final template, but it's just a little placeholder 5:04 that TextMate used to denote where we want to end our snippet. 5:08 So if I copy this and I'm going to go back to my editor, 5:12 and I'm just going to replace the text with this new one with the $ in it 5:15 and I'll just sort of commit it there. 5:20 And so now, if I type in lia, 5:22 we can see now my cursor is inside of the <a tag and I can type in whatever I want. 5:26 If I hit Tab, well, it's just going to do a normal Tab key, 5:31 so I'm sort of out of the snippet mode at this point. 5:34 So this is a good first step, but what if I want to have multiple Tab stops 5:37 for different variables in my <a tag? 5:43 For instance, an <a tag is really no good without an href attribute, 5:46 but the value of an href really is going to be different for each time we put it in. 5:49 So there are other variables: $1, $2, and so on that allow us to have Tab stops 5:54 where our cursor will be placed momentarily for us to fill in different parts of our snippets 6:00 that are dynamic. 6:06 So let's pull this out, copy it, and we'll paste it into our snippet. 6:07 We'll commit it, and now we'll go back. 6:12 So now, if we type lia to trigger it--now, my cursor immediately starts inside of this href 6:14 where it saw the $1. 6:19 So I could type in something like index.html, and so now if I hit Tab, 6:21 I'm in sort of the snippet-editing mode, so I hit Tab and it takes you to the next cursor stop, 6:27 which is $0, being the final cursor position. 6:31 In part 2, we'll see some more advanced techniques you can use 6:35 when creating your own snippets. 6:38 [?mellow guitar music?] 6:40 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 6:42

You need to sign up for Treehouse in order to set up Workspace

Sign up