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

Next lesson playing in 5 seconds


Free Preview: Speedy Workflows With Atom


  • Overview
  • Transcript

Atom is the latest feature-packed text editor created by GitHub. If you're already a fan of Sublime Text but love the convenience of a fully integrated development environment, just wait until you see what Atom can do! We'll take a look at everything from themes, tweaking settings and file navigation, right through to custom snippets, command line and GitHub integration. We'll even show you how to automate your workflow to set up a complete project with just one command. If you're a fan of working fast, then this is the course for you.

1. Introduction

1.1 Introduction

Hey guys, my name is David East, and welcome to Speedy Workflows with Atom. In this course, we're gonna see how GitHub's new editor, Atom, can help us optimize our daily workflows. Throughout this course, we're gonna be challenging ourselves to break free from our old and slower methods, to adopt new and more efficient ones. We'll start with the basics, we'll take a look at setting up new themes, as well as tweaking a few important settings. Then we are going to focus on finding files as fast as we can. A lot of time and development can go wasted on finding files in your project. After that we are going to dive into snippets. We'll take a look at some of the useful ones that come out of the box. And then we'll go about making some powerful ones of our own. The next thing we'll take a look at is the GitHub integration. Since Adam was made by GitHub, there's a lot of cool features here. We're gonna to see how we can switch back and forth between Adam and GitHub with just a couple key presses. Even though Atom is a young editor, it has a very good package library. In this section we're gonna take a look at some of the essential packages that we need to use to help us in our daily tasks. Lastly, we're gonna focus on automating our workflows. We're going to write a boilerplate project, and then use GitHub and bash scripts to automate a setup. Once we get this set up, we'll be able to set up a new project with just one command. So if you're a fan of working fast, then this is the course for you.

2. The Basics

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.