Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:28Length:1.7 hours
Speedy workflows with atom.io
  • Overview
  • Transcript

4.2 Custom Snippets

We saw how convenient snippets can be, but right now the default ones are kind of just convenient rather than powerful. So let's make our own custom snippets. We'll open up the command palette. Command + Shift + P. And then we'll type in snippets. And the very last one says Open Your Snippets, and we'll hit Enter. And what this does is it pulls up our snippet.cson file. And for those of you who aren't familiar with cson it's just like json, but it's the CoffeeScript version. Most of Atom packages are all done in CoffeeScript. So you'll see this cson extension quite often. If we look at the comments for this file, it gives us a boilerplate of how to write a custom snippet. The example provided shows us how to do a console.log in CoffeeScript. The first thing that's provided is the source. That's where it says .source.coffee, and the source is what scope we are currently in. If this is JavaScript, it'll be .source.js. If it was Ruby, it'd be .source.rb. And in some cases it'll be .text for languages such as HTML. But don't worry about that too much right now. The next line that says console log is the description. This really can be anything we want it to be. It doesn't have much of an effect on the snippet. The next line, which is the prefix, that states what the snippet command will be. In this case it's log. And if we type log and tab, it's console.log. And we can see that in the next statement which is the body. What you may not recognize is the $1. And you can think of that as a templating variable. To understand this a bit more, let's create our own snippet, and we'll do one for JavaScript. So we'll create our source for JavaScript, and the snippet we'll be creating is for document .getElementById. For the prefix, we'll have that be ge, for get element. Now in the body, we'll type documents. Then we'll type getElementsById. Then inside the parenthesis, we'll say $1. We'll go and save, and now we'll go back to our JavaScript file. Now if we say ge and then tab, nothing really happened. So let's go back and take a look at our snippets.cson. So let's see what could be wrong. We have to remember that .cson is really json, except we're not gonna be dealing with brackets since it's CoffeeScript. So the first part is right, .source.js, and then I have my colon. And then down in my second line, I have my description, getElementById. And I can see right there that I don't have a colon, so I add a colon right there. And now that we have this colon it should work. So I'll save, and we'll try it again. For the ge, we'll back up to the e, and now I'll hit tab. And our snippet worked. So back in our snippet cson, let's take a look to see what we could do to prevent this from happening again. Well since we're not using brackets, we really need to pay attention when we go through each line. In this case we wanna make sure that we have everything properly indented, and we also want to use the colons where appropriate. In this case, this description is really just creating another object, so we have to make sure that we are using the colon right here. So let's look back at this $1. When we typed ge, we got document.getElementById, and our mouse cursor went immediately to the parenthesis. And this is because of the $1. We're saying that this is the first place we wanna focus on after we execute this snippet. Let's say we wanted to provide more than just one argument. Which in this case it would be invalid, but let's just humor ourselves. We'll have $1, and then we'll also have $2. So now we'll type ge again and hit tab. We have the cursor in the first place it was before. So we'll just type in an ID. Now we'll hit tab. And we can see that rather than creating a tab space inside of the string it actually jumped to the next template variable, and that's $2. So using these dollar sign templating variables we can change where the focus is after create a snippet. So where would this be useful? Well let's get rid of this since this is invalid. The place where we could see some use from this is by attaching an event listener. We can attach the event listener to the document or any individual element as well. So we'll create another snippet, and we'll call this addEventListener. The prefix for this will be ae, and we'll start off the body by typing $1. Then we'll say .addEventListener. Then we'll provide a $2 for the event. And then we'll provide a $3 for the body. So now let's save, and let's execute this snippet. We'll say ae and then tab. Right now it looks a little weird with everything on one line. And we'll fix that in a little bit. So we'll just focus on the templating variables for now. Right now we're focused on the element name. So we'll type in element just for now. Then we'll hit tab, and we'll say click. And inside of here we would execute our code, so I'll hit Enter. And then we'll type log. So we're able to use templating variables to control the flow of our snippet. By providing that $1, we know that's the first one, and then $2, that's the second one. And then dollar sign whatever number and so forth. However we still have some weird side effects. Everything was all in one line when we executed it. And then when we tried to break it out to a second line, we have this weird spacing to the left. In the next lesson, we'll take a look and see how we can provide better formatting for our snippets.

Back to the top