Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:28Length:1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Installation and Setup

To get started with Atom, go to Atom.io and from there we can click on the download for Mac button. If you want to use Windows, there's an alpha release for Windows that supports Windows 7 and 8. We'll primarily be focusing on the Mac version in this course, but you should still be able to follow along. Since I already have Atom downloaded, I'll go and open it up. Now we see this blank editor and Atom is good for viewing files on a one off basis, but most of the time you're gonna be in the context of a project. To see things from a project view we'll hit Cmd+O or we can go up into the menu and hit File > Open. But throughout this course, I'm gonna be strongly discouraging you to use any menu options or any right clicks. We're gonna try as hard as we can to do everything from a key binding. So we'll type Cmd+O, and within my desktop I have a folder called Speedy and we use that to house our project. And what this did was, is it opened two separate instances of Atom. If pulled this down here we can see that there are two windows open. So I'll just close the original one that was open. Now to see this in a full screen view we can hit Cmd+Ctrl+F. So let's stop and let's look at the basics. To the left we have the treeview and this is where all of our project organization is going to live. And to the right we have the buffer. And the buffer is all the currently opened files. So right now our buffer is empty. Add a file to our buffer we'll hit Cmd+N and this creates a new file. If we started to write code into the file, we could see that we don't have any syntax highlighting. If we save the file with Cmd+S, and if we save it as test.js we get syntax highlighting for JavaScript. Now we'll go in and create another file and we'll save this and call it another.js. And we had two files in our buffer. If we want to close out of this file, we can hit Cmd+W. And if suddenly we realized that was a mistake and we wanted to open it back up, rather than going over to the treeview and selecting the file, we can hit Cmd+Shift+T, and now we have another.js pulled back up. And if we want to switch between all of the files that we have open up in the buffer, we can hit Cmd+Ctrl and then left or right. And this will cycle through all of our open files in the buffer. Another thing we can do to provide more space is to hit Cmd+backslash. And this collapses out the treeview. So remember, when we want to create a new file, we hit Cmd+N. And when we want to close out of a file, we hit Cmd+W. If we want to open that back up, we hit Cmd+Shift+T. Really try to remember these commands, because they'll save you a lot of time from having to go through the treeview and the file menu. Now that we have some of the basics done for the Atom editor, we can go through and tweak the settings. You may not be the biggest fan of the default syntax highlighting. And fortunately this is extremely easy to change. In the next lesson we'll go through the settings and learn how to customize Atom.

Back to the top