Start a free Courses trial
to watch this video
In this video we explore how to create your own Textmate snippets to speed up your development.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?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 download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up