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

6.5 Basic Necessities

This lesson covers some of the essential packages needed for development. We cover Autocomplete+ to fix Atom’s lacking autocomplete functionality. Then we explore Emmet for HTML structuring. Lastly, we go over Minimap, which allows us to see our code at a high level.

Related Links

6.5 Basic Necessities

In this video, we're gonna go over some of these basic necessity packages. These are the packages that are highly used in the Atom community, and they can make our lives a lot easier. For this lesson, I'm gonna use a project I made called fireDeck. And this is because it has a ton of files, and it'll really easily show some of the abilities of these packages we're going to install. The first package we're gonna take a look at is called Autocomplete+. You might have noticed that auto-complete has been missing so far throughout this course. And it's not necessarily missing its just not that great. Inside of this app.run function, if I start typing in some code I'm not getting any auto-completion. And to get auto-completion I have to hit control and then space bar. From here we get all of our auto-completion suggestions, but this isn't really that helpful. The whole point of auto-completion is that it's supposed to read your mind. So the default add implementation really isn't that good, but Autocomplete+ will fix this. So let's open up the terminal, and we'll type apm install Autocomplete+. Once it's done, installing, and we'll close out, and then we also need to close out of any files we had open before too. Open up back app.js, and now down in app.run we'll start typing in some code. And we can see that were not getting any auto-completion, and that's because we have to go and restart our application. This is something that's a little frustrating with Atom Editor, we either can close out of the project and open it back up, or we can hit Ctrl+Alt+Cmd+L. After the screen has flashed, we'll have a completely reloaded Atom Editor, and now as we start typing, we can see auto-completes. So now as I type in F-I-R I get all of the selections for fire and firebase, and if I hit Enter, it just brings me down to another line. And that's how I want it, so let's type fire again, and there's firebase. So maybe if I hit Spacebar, and that just gave me a space. So what we need to know, is you actually need to hit tab. Autocomplete+ will give you sublime users the functionality that you're used to seeing. Another essential package that we need to use is called emmet. Emmet is a package that a lot of Sublime users will be very familiar with. We'll go open up a terminal pane, and we'll type apm install emmet, and that's E-M-M-E-T. Now that's done we'll close out, and now we'll hit Ctrl+Alt+Cmd+L. We can not save those. And you might see this little box come up in here, and if you do, just hit Cmd+Option+I. So we'll open up back index.html, and what emmet will allow us to do is easily structure out HTML. So if I want an unordered list with five list items, I could go and create a UL, and I can creat some LIs, but this could be kind of slow. So a better way of doing this is I can say UL, and then I can create LI's underneath, and I can use the asterisk to say I want five of them. Now when I hit tab I get an unordered list with five list items, and we can do more than just basic HTML elements. We can say a div, and we can prodive a pound sign to specify the ID. We can say the greater than sign to say underneath, or we can say plus and that will be a sibling. And what you're probably realizing is that these are all CSS selectors. We can have another div, and we can give that div a class. And then now underneath here, we can specify other elements. Now we hit Tab, we had all this HTML structured out for us. And last but not least, we're gonna go over minimap. So again, we'll go and we'll open up a terminal, and we'll type apm install minimap. That's done installing so we'll close out, and then we'll go hit Ctrl+Option+Cmd+L. Currently, we don't see anything enabled. So we need to hit Ctrl+K, and then Ctrl+M. And now to the top right, we see the minimap of our project. As we scroll down, the minimap will scroll with us as well. We can even hover over the minimap, and then we can click on certain points to get to that area. And this provides us with a nice high level view for really big files. So in this lesson we went over Autocomplete+, which enhances the current auto-complete functionality within Atom. We then took a look at Emmet which allowed us to do HTML structuring using CSS selectors. And we also installed minimap, which gave us a nice little high-level view of our code file. These packages obviously aren't mandatory, but they're extremely useful for helping us have a faster work flow.

Back to the top