Atom was created by Github and was originally an internal project. Atom has some great built in features that integrate with Git/Github projects. This is meant only for folks who want to know how to use Atom with Git and Github, but this is not a Git course, so I'm not going to talk about how to create repos or manage them. I'm going to assume you already know how to do that. If you're already using Git to manage your projects, Atom gives you subtle visual cues are going to help you take less trips to the terminal.
- [Voiceover] Atom was created by Github and originally an internal project. Now, if I was creating a custom editor for myself, I would throw in some extra features that would work well for me and my company, and sure enough, Atom has some great built in features that integrate with both Git and Github. Now, before I go any further, let me just say that these next few videos are a little bit advanced, and meant only for people who want to know how to use Atom with Git and Github. But, this is not a Git course, so I'm not gonna talk about how to create repos or how to manage things.
I'm going to assume that you already know how to do that. So, if you haven't used Git or Github before, you can skip these next few videos. I would suggest that you watch Up and Running with Git and Github. Now, because the project that I've been working on is a Git project, the interface in Atom becomes a a little bit different. So, for example, if you look down at the status bar, you can see that we have some additional information, for example, the name of the current branch. To the right of that, if you've made any changes to the current branch, Apple will tell you how far away from that branch you are.
So, let's go ahead and delete a section in this document, I'm gonna take out this history section, and let's just cut that out and then I'm going to save the document. So, when I do that you can see that to the right of the branch name in the status bar, you can see a little icon as well as a minus 11. That means that I've taken 11 lines of text out of the flow of the document. Now, if I start adding some text somewhere and I save it, notice that it will have a plus one sign, because I've added a line of text.
Now, we also get some visual cues in the gutter. There is highlight that shows you that we've made a deletion, as well as a modification. And so for example, you can see that we have this little icon right here, indicating that we deleted some stuff and then this is a new line, so that becomes an addition and it's marked in green. If we make a modification and we have to save it, then the color for that is this sort of orange. Now, of course, you could just do a few undo commands to go back to the point of our original commit.
But what happens if we close this document right here? Now, you can also see that the tree view itself has changed with some color highlighting to indicate that there are some changes to some documents, so these become orange right here. Now, if I click this back up, I won't be able to undo anymore, because it's gone out of that buffer. However, I can notice that my changes are still there. Now, if I want to roll back to the original state of this file, what I would normally do is go into the terminal and do a Git checkout command to checkout the version of this file that was in my original commit.
Now, if you remember, there is a way to take a look at all the documents in Atom that are currently in your project. Let's go ahead and open up some other files. Now, I'm going to hit command + B, that would be control + B on a PC, and you notice that I have the list of all of my open files, and this one has a little bit of a slightly different icon next to it, and that's because this icon tells you that we've made some changes that are relevant to Git. Now, there's actually another way of doing this.
Let's go ahead and make a change to one of these other files as well. So, in my base CSS, I'm just gonna get rid of this body tag and save it, and now that becomes another change and there's two files now that have been modified from the last commit. So, I'm gonna hit command + B again, again control + B on a PC, and you can see that there are now two different icons. So, if you just want to see all of the files that have been changed in your project, you can actually hit command + shift + B, that's control + shift + B on a PC, and see only the files that have been changed and, of course, just like always, you can navigate to them by just switching to them or clicking on them.
Now, this list is the same you'd see if you ran a Git status command. It doesn't actually matter how many other tabs you have open or even if you have any tabs open at all. So what about taking things back to the way they used to be? Now, I could do that via the terminal using the git checkout command, but you can do that in a much easier way with a simple command key. So let's switch over to the index.html file and I'm gonna scroll down a little bit so we can see the area with the changes, and I'm going to hit command + option + Z, that would be control + alt + Z on a PC.
So command + option + Z, and it's gonna ask me do you want to Confirm Checkout HEAD Revision? I'm gonna say OK, and all my changes are going to be back to where they used to be in the previous commit. So that's pretty easy to remember, because it's just like an undo, except you add option to it, and it does always confirm, which is nice. So, that fixed this index.html file. Let me switch over to the base.css file and do the same thing. And that reinstates this body section.
So, that's actually super convenient when you're working on Git projects. So, if you didn't mean to roll this back into the original commit, you can actually hit command + Z, regular command + Z or control + Z on a PC, because the change that you just made is actually added onto the undo stack. So, it doesn't matter that you rolled things back, you can always hit command + Z and reset it to the way that it used to be. I'm gonna hit command + Z just to bring it back to the last commit, and everything's looking pretty clean right now.
So if you're already using Git to manage your projects, these very subtle visual cues are gonna help you take less trips to the terminal, and that is always a good thing.
- Downloading and installing Atom
- Managing tabs and panes
- Managing and folding content
- Changing text
- Working with selections and multiple cursors
- Customizing Atom packages
- Customizing theme styles
- Integrating Atom with Git and GitHub