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.3 Formatting Snippets

Right now we know how to create our own custom snippets. But getting them to a correct format is a bit of a problem. Using these templating variables, we can control the flow. So let's look and see how we can make the format work for us as well. The first thing we want to take note of is the strings that we're using. We're using the single quote strings. And there is a debate always in JavaScript whether it should be single quotes or double quotes. And for the most part, it really doesn't matter which one you use, but if you want to use double quotes rather than single quotes, there's actually a really easy way to switch over, and that's using incremental search. To use the double quotes, we'll highlight each single quote with incremental search. And remember, that's Command Control G. Now type the double quotes, and we can see this wrap the single quotes. To fix this, we'll hit backspace twice. And now using this incremental search, we've replaced all of the single quotes very quickly. So now we'll go back to the body for an add event listener. And the first thing we'll take a look at is making sure that our code is on multiple lines. And we can use new line characters such as backslash n. The one thing we can do that makes it a bit easier is by using triple quotes. So we have three double quotes to start and three double quotes to end. And this will signify Adam to allow us to format the code the way it's specified below. So what I'd like to do is get this all spaced out the way we would see it in the code editor. So now let's save and try it again. AE tab. Now this is looking a lot better. So if we type in document, then we hit tab. We can type in click. And then tabbing in again gets us into our callback function. So our format is a lot better now that we're using these triple quotes. But there's still a couple things we can do to make this code snippet a bit better. First thing that we can change is where we are assigning the R-Vent in the dollar sign two template variable. Every time we're going to specify event, it's going to be inside of a string. So rather than having to type that in every single time, let's just wrap it in quotes. So to quickly wrap it in quotes we'll highlight dollar sign two, and then we'll hit the single quote. And what this did was, is it just took everything we have highlighted and wrapped it inside the quote. Another thing to think about is what we're attaching the event to. Right now when we execute the snippet, the very first part is blank. It's just .addEventListener. It might be convenient to set the focus in the beginning, but to also provide a default. So the provided default will open up brackets right here, and then will close them after the one. And now we have one. We can hit colon and then we'll write document. And what this will do is it'll still have the focus be here first. So if the person wants to add it to the document, they can just continue tabbing. Let's save it and check it out. We'll type AE, then tab. We see that we have document. And since we want to use it in this case, we'll hit tab again. And now we have our string where we can type click. Then we can hit tab again. And this is definitely a lot more convenient of a snippet. So just by providing a default for the document, and then wrapping our event type in a string, we've made this more of a complete snippet. And by specifying these triple quotes, it makes our formatting explicit. So all these snippets we created are really cool and they're convenient. Let's go through and create something really powerful. In the next lesson, we'll take a look at some coding snippets that are really powerful and can help us speed up our workflow.

Back to the top