Lessons: 34Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Adding Snippets Through Package Control

The key with snippets is to use them religiously. Force yourself to memorize these or force yourself to name these snippets in a manner in which you don't have to memorize them, because they will naturally occur to you. Now that doesn't mean you have to do all of these snippets by yourself. Maybe we're working on a jQuery project. Well, I can bring up Package Control and Install. And let's look for something jQuery here. JQuery snippets packet. If we want to take a look at what we have available I can bring up the palette again Shift+Cmd+P. I'll type in jQuery and now here's all of the jQuery specific snippets that I have. So let's take a look at the on handler and we can see that it has a tab trigger of .on. So if I expand that, now we get that syntax. So then we could say, grab all anchor tags and now I type .on. And this is fairly clever, because it's part of your process, .on Tab and now we have two different options. We'll do the second one or if we try it one more time, .on and we'll do that first one. That one will be slightly different. So one cool thing about using these community developed snippets is they've really thought about every possible use. So maybe I want to filter through on array, but I can't remember the order of the parameters. Well, I just jquery.each, Tab. We want this second option there. I'll choose that and now we can see I provide my array as the first one. And then we can console.log(num), which will log one, then two. So for the frameworks and libraries that you use most often, make sure that you find some snippets. For example, I use a framework called Laravel and its templating engine is called Blade. So, I will install and I'm gonna look for Blade. Here we go. Here's some Blade snippets that I can use. Next, I will create a view, index.blade.php. You'll see that it has automatically set this syntax to Blade. So now as always, I can bring up the command palette. Take a look at all of the blade options that are available to me. Now if I wanna setup the layout, I type at and then the first three letters. @lay, Tab and now we have that. If I need to do a quick test, @if, Tab and we can say, name equals Jeffrey. Tab again, now we proceed accordingly. Or as a final example, maybe to create a section and yield it at the same time. There we go. So have a play around with this. Download your favorite snippets and when you're ready, move on to the next lesson.

Back to the top