Locked learning resources

You must own this product to watch this lesson.

Locked learning resources

You must own this product to watch this lesson.

Setting Up Git

00:00 In this lesson, we’re going to install the Git version control system and then integrate it with Sublime Text in a really lightweight and smooth fashion so that you can, for example, create your Git commit messages directly in Sublime Text.

00:13 And you’re also going to get feedback as you’re editing a file on how it differs with the latest version in Git. This is the setup that I use in my own Git development workflow and that I’ve tuned and built up over the years, and it’s served me really well, so I hope you’ll enjoy it too. Of course, if you’re not using Git at all and you don’t really have an interest in using Sublime Text from the command line—which is also something that I’m going to show you in this lesson—then feel free to skip ahead.

00:39 So if you don’t think you’re ever going to need Git and Git integration with Sublime Text, then it might make sense for you to just skip this lesson. But if you’re interested and you want to find out more and maybe learn a little bit more about Git, then let’s dive right in and I’m going to show you how to set everything up.

00:55 The first thing we need to do is to install Git on Windows. We’re going to do that by opening our browser and then going to git-for-windows.github.io. That’s where we can download an installer for Git for Windows. Again, here, you just want to click the Download button and that will download the latest version for us. Once that file downloaded, we’re going to run it.

01:26 Okay, so here’s a quick word of warning. This Git setup can seem a little bit overwhelming because there are a lot of options and this installer wizard is just a little bit crazy, but we’re going to work through this together and in the end, everything will be fine. Okay, so let’s do this now and click on Next here.

01:43 First of all, we need to pick a install folder. And generally, I would recommend you go with the default here and just continue on. In this next screen, in the Components screen, I would just go with the defaults. Of course, you could de-select some of these items, for example, if you don’t want the Windows Explorer integration, but generally I would just leave that as is and continue on. Also, we want a start menu folder. So here on this Adjusting your PATH environment screen, you want to make sure the Use Git from the Windows Command Prompt option is selected, because then it’s going to add the git command to our PATH variable, and that will ensure that we can actually use Git from the Windows command prompt.

02:22 So please make sure that this option is selected and then click on to Next. Again, here’s a choice to be made on how we want to configure the line ending conversions, because line endings are represented differently in Windows-based systems compared to Unix-based systems like Linux or macOS as well.

02:39 In this case, it makes sense to go with the default, which basically means that every time you commit something into a Git repository or you check out something from a Git repository, it’s going to convert these Unix-style line endings to Windows-style line endings, which is generally the recommendation for the Git setup on Windows.

02:59 And then here in the next setting where it asks us about the terminal emulator to use with Git Bash, I would change that and select Use Windows’ default console window because if we don’t do that, then the Git stuff will throw us into a different command prompt environment or into a different terminal emulator, and generally, I think it’s best for the purposes of this tutorial to go on and just use the Windows command prompt for everything, because then it’s just a little bit easier to deal with the setup steps and we’re in a familiar environment.

03:29 So I would change this setting to the Use Windows’ default console window. All right, so for the last couple of options here, the extra options, I would just leave that at the defaults because they seem like sensible choices, and then we can click Install. And we’ve made it through!

03:45 We’re just going to wait for this to install completely.

03:50 Before we move on and integrate Git with your Sublime Text setup, we need to configure some basic Git settings to complete the installation. You’ll want to open another command prompt window,

04:01 and then we’re just going to try and run the git command. This should give us some output now. Previously this didn’t work and now we’ve got the git command installed here.

04:11 We’re now going to adjust a few basic Git settings so you can start committing files. And this is something that we need for our Git integration with Sublime Text.

04:21 Just enter the following here at the command prompt with the git config command and then --global

04:30 and now we’re going to set your email address. I’m just going to go with a generic fake one here,

04:39 but of course you want to pass your own email address here, and ideally, the one you’re using in GitHub as well. If you’re using a site like GitHub or GitLab, you want to make sure they match up. So, you can add that.

04:51 And then we need to make another setting, again in a similar fashion,

04:56 and that is the user.name setting. So again, you want to put in your first and last name here and then just set those two variables.

05:07 And you can verify that these were set correctly by typing in git config --global --list and hitting Return, and then it should print out your user.email and user.name setting again.

05:19 All right, that was it, so we can close that terminal window here. And next up, we’re going to integrate our Git install with Sublime Text. And while there are plugins that will turn Sublime Text into a full-featured Git client, my own approach for integrating Git and Sublime is a little bit more low-key.

05:37 I really like using the Git command line tools—because they’re awesome, they’re powerful, they’re fast—but at the same time, there’s some really valuable information in Git that I want to see while I’m editing my code. So for example, I want to know which lines I modified, and I also want to be able to create and write my commit messages inside Sublime Text.

05:58 So I’m going to walk you through a couple of plugins and config settings that will allow us to do that. The first tool that we’re going to install here is called GitGutter, and it’s going to highlight the lines that were modified in a file compared to the latest version of that file inside the Git repository.

06:15 This is great for making sure we don’t accidentally commit stuff like a debug statement or an accidental print statement that we didn’t want to insert into the code, or at least not want to commit into the repository.

06:28 And before we jump in, I want to make sure that we have an example Git repository we can test out some of this stuff with. So, you might already have one on your computer and you can just go ahead and use your own repository. But if you’re looking for an example Git repository to play with, then we’re just going to clone one of my open-source repositories.

06:48 We’re going to go to the command prompt and just type in git clone https://github.com/dbader/schedule.git. And that’s one of my open-source repositories, one of my Python open-source modules.

07:02 That will make a good example for us just to kind of play with some code and so we can make sure the integration works properly inside Sublime Text. So now we’ve got all the code locally here and we can close that command prompt.

07:14 Now we’re going to open up Sublime Text so we can install the GitGutter package. So again, we’re going to open up the Command Palette, find the Install Package command, and then once it opens up, we’re going to search for GitGutter, and then we’re going to install this plugin. Okay, and so you might or you might not see an error message here. And again, that’s because we need to restart Sublime Text first, so we’re just going to close that window, make sure Sublime Text quit, and then restart it again.

07:42 And then we can also close this README message here. Okay, so now I want to show you the Git integration with Sublime Text. What we did previously was we cloned an example Git repository.

07:54 And now we’re going to open this repository inside Sublime Text. You just want to select the folder and then open the whole folder. This will pop up the sidebar here, which is kind of a file browser built into Sublime Text, and we can open files in this folder directly and we can kind of expand the folder structure here and then browse it as well.

08:14 We’re just going to open a Python file in here, and then we have some code to play with so I can show you some of the cool features inside GitGutter. So far, this doesn’t look any different, but let’s make some edit to the file here.

08:27 I’m just going to delete some lines here and I’m going to go ahead and add a couple of lines, let’s say down here. And then maybe here, we’re going to make a modification to this line and just update it.

08:44 Okay, let’s make a modification to this line here.

08:48 And then down here, let’s just add a couple more lines as well.

08:54 All right! And as I’m making these modifications, you can see that here on the left side, we’re getting these little icons to pop up on the lines that I modified.

09:03 And what’s great about these little icons that GitGutter added is that when I hover over them, I can see a diff or a Git diff for the lines that I deleted here.

09:13 And with this icon all the way on the right, usually this should look like a undo kind of icon. I’m not sure why it’s not rendering right now, but when you click on this icon, you could restore the modified lines here.

09:26 This would just undo this edit here in these lines, and it would leave the other edits alone. And of course, because I’m working inside Sublime Text, I can just use Sublime Text’s undo command to reapply this modification and then undo it again.

09:41 This is a really flexible way to modify and work with your code, compared to the latest kind of stable version or snapshot that’s committed in Git. And it works the same for these other types.

09:52 Here we modified this line, and again, it shows up here as the modified line, and it could also roll that back of course. And then here I added a bunch of newlines and it would also be represented and I could undo that or reapply those modifications.

10:06 So, this is a really lightweight way to integrate the key feedback you’re getting from Git inside your editor. And again, it does that without getting into your way or just overloading you with information.

10:17 It’s a very low-key way to still have access to this functionality. And that’s why I really like GitGutter. Let’s move on, and we’re going to configure Sublime Text as your Git editor now. So like I said, I’m a really big fan of the Git command line tools to create new commits and to kind of manage my Git repositories, but every time you actually create a Git commit from the command line with the git commit command, you will find that it launches you into another editor called VI. And VI can be a quite foreign environment for editing and preparing your commit messages if you’re used to an editor like Sublime Text or other graphical editors.

10:54 So, wouldn’t it be really nice if you could use Sublime Text as your editor to write Git commit messages? And this is what we’re going to set up now. At this command prompt, we’re just going to create a test repository for us.

11:06 I’m just going to create a new blank repository.

11:12 And we’re going to switch to that folder,

11:15 and now I’m also going to create a simple text file here just from the command line. We’re going to add that file to the Git staging area.

11:27 And then when I do a git status, you will see that Git picked up this file as a new file, and now when we trigger a Git commit, now when I run the git commit command, you can see that the VI editor opens up and it asks me to enter a commit message. And of course VI is a great editor, but this is a setup guide for Sublime Text, so let’s make sure we can use our favorite editor to write our Git commit messages. So let’s exit VI here, and you can do that by hitting Escape key and then pressing the : (colon) key and typing q and hitting Return. All right, you see how much nicer Sublime Text is? Ha, just kidding.

12:05 What we need to do to configure Sublime Text as our Git editor is the following. Again, we’re going to use the git config command. And this time we’re going to change the core.editor setting.

12:16 And for this to work, we need to pass it the path to the Sublime or subl.exe command. If you used the default install location for Sublime Text earlier on, it will just be the one that I’m typing out here. But if you didn’t, then you’ve got to make sure the path is actually correct. So with this, another tricky bit is that we need to place the quotes correctly, because we need to make sure that we’re having these double quotes (") here at the start for the whole thing, and then we need to wrap this path in single quotes (') as well, but I’ll show you how that works in a minute.

12:52 So, the path for this is Program Files/Sublime Text 3/subl.exe. And you want to terminate that with a single quote, so we’ve got this part here in single quotes.

13:07 And then there’s going to be a space character and then --wait --new-window, and that’s the magic incantation that’s going to make this work from the command line. And again, you want to close this with the final double quote here.

13:27 Okay, so let’s hit Return. And then to make sure this actually worked, we’re going to trigger our commit again with the git commit command.

13:36 And now this bounces us directly into Sublime Text, and we can write our Git commit message directly inside Sublime Text. How this works is that you would just type out your Git commit message and then hit Control + S, or basically save the file, and then close the window.

13:52 As soon as you do that, you would return to the command line. So, this is still waiting for us to complete the commit message, and you would return to the command line and this would finalize the git commit command.

14:03 If you want to cancel a commit, you can just close that window and say we don’t want to save it. And again, this will take you back to the command line and it will abort the commit because it will be an empty commit message. So, let’s trigger the commit again, because there’s a couple more changes we can make here.

14:20 The first thing we’re going to fix is that this doesn’t do any kind of syntax highlighting for now. And to bring that back, we need to install another package, again with the Install Package command, and this package is called Git Commit Message Syntax, so we’re just going to install that now. Once that’s completed, we’re going to trigger another commit and now you can already see that we’re getting the syntax highlighting for the changes in this commit and for the active branch, which just makes this whole experience a lot nicer.

14:53 And then for our commit message, we’re getting different syntax highlighting as well. So, Git has some best practices for writing commit messages. For example, they recommend that you limit the first line in your commit to 50 characters or less, and then the remaining lines should go up to 72 characters or less. So, 50 characters isn’t a lot of space, so it’s good to know where you’re at.

15:15 And it’s kind of challenging to find that out as you’re typing the text, right? Of course you could highlight that and then see how many characters you’ve selected or move the cursor all the way to the right and then look down here and it would say Column 37, but there’s actually a much better way to handle this in Sublime Text.

15:32 So let’s change that. You want to go to Preferences > Settings - Syntax Specific, and this will open a new window with the settings that are specific for when you’re editing a commit message in Sublime Text.

15:45 And here, we’re going to add a new option and that is the "rulers" option. The value for that option is a list of [50, 72]. We’re just going to save that and we can close this window again.

15:58 And as we’re coming back to the Git commit message, you can see here that it’s added these two vertical lines at the 50 and 72 character mark. So now when we’re writing our Git commit message, this will make sure that we’re never crossing this line—or at least, you know, we could cross the line but of course we’re seeing it now right here as we’re typing our text, and this is just a soft hint for us, “Maybe I should write a shorter Git commit message.” And then for subsequent lines, this would not apply. All right, so let’s actually complete this commit.

16:32 And the way I’m going to do that is by just saving the file and then closing the window. And now it bounces me back to the command line window and it says, “Hey, I created this commit for you.” And then when I do a git status, you can see here that it committed my changes and with a git log, again, I can see that it created a new commit for me with my commit message and with the right author and email configured here.

16:56 In case you want to learn a little bit more about these Git commit message best practices, there’s a really good tutorial that I would recommend, and you can find that at chris.beams.io/posts/git-commit/.

17:14 Chris wrote a fantastic tutorial on all of these best practices for Git commit messages, and he kind of has this super short summary here that gives you an example of what to watch out for.

17:25 I highly recommend Chris’s tutorial at chris.beams.io/posts/git-commit/, so you may want to check that out. The next thing I want to show you is how you can work with Sublime Text from the command line. And like I said earlier, my development workflow really centers around command line tools, and I find it really handy to be able to open Sublime Text directly from a terminal.

17:45 And that’s possible with the subl command we previously used for setting up the Git commit integration.

17:53 The subl command can do things, like it can open a new Sublime Text window for you, or you can use it to open a whole folder or to even create new files directly from the command line using Sublime Text. So now when I try to run this command, it will fail with a unknown command error.

18:11 And so now I’m going to show you how to set this up. The first thing we need to do to enable the subl command is adding a new environment variable to your system.

18:22 You want to go and open the search box and then search for environment, because this will take us directly to the Edit the system environment variables setting in the system control panel.

18:34 And once that opens up, you want to click on Environment Variables,

18:38 and then here under System variables, we’re going to create a new system variable. And we’re going to call that SUBLIME in uppercase. And then here, for the value, you want to browse to the directory where we installed Sublime Text 3, so we’re just going to select this folder.

18:56 Alternatively, you could enter the path, but it might be easier just to select it through the dialog box. Okay, so we’re going to add this here, and this will have added a new system variable that points to the Sublime Text folder.

19:10 And now what we’re going to do is go up here in your user variables and we’re going to edit your PATH variable. So, the PATH controls where the command prompt looks for available external commands. So in this case, we just need to add our Sublime Text variable here

19:31 and then update our path and hit OK, and then close that window. And actually, we start our command prompt window so that it reloads the path, and now when we’re back in the restarted command prompt, we can try the subl command again.

19:46 And this time it’s going to open Sublime Text for us, kind of where we were before. All right, so now I’m going to show you some of the really useful things you can do with the subl command.

19:55 You’ve already seen how you can just open a blank Sublime Text window with this, but you can also open an existing file. For example, when I go to this test-repo/ and I have this myfile.txt here, I can go subl myfile.txt, hit Return, and this will open this file directly inside Sublime Text and I can start editing and modifying it. Of course, I can also create a new file

20:26 just by giving the subl command the name of a new file. And then when I hit Return, it creates a new blank file for me.

20:35 And when I save that file,

20:39 then you can see that it was created here in this directory with the name I gave it. You can even open a whole folder using the subl commands.

20:48 This is really helpful if you’re working with a project, for example, directly here in the command line. You can just go subl and then pass it the name of a whole folder, and this will open up a new window and then start everything up so that you can access your files here with the file browser directly.

21:06 And then there’s one more useful thing. So, you can actually open the current folder that you’re working in from the command line by using subl and then putting a dot (.) behind it, and this will just open the current folder for you.

21:19 Right now I’m in my user folder here, and this can be a really handy shortcut if you’re working with a project and you don’t want to type out that whole path to the project, you can just go subl . and it’s going to jump you directly into that project folder. All right! This concludes the lesson.

21:37 What we did here was we installed Git from scratch using the Git installer, and then we started integrating Git with Sublime Text in a really lightweight and command line driven way. We installed the GitGutter plugin so you can see the modifications you made to your files compared to the latest version that is in the Git repository.

21:55 I also showed you how to set up Sublime Text as your Git editor so you can write commit messages directly in Sublime Text with your favorite editor. And lastly, I showed you how to set up the subl command so you can work with Sublime Text directly from the command line, and that could potentially save you a lot of time because you don’t have to click around with the mouse to do everything. All right, let’s move on to the next lesson.

Avatar image for Mark Edgeller

Mark Edgeller on April 19, 2020

Hello,

I’m struggling a little with getting GitGutter to display as it does in the video here. I’m unsure whether there is another addon interfering with the gutter icons, because they do not display correctly. I just get a line in the sidebar thats either green or yellow depending on whether I’ve added in a new line or deleted something.

I’ve tried changing the GitGutter theme in the GitGutter settings but this does not appear to do anything. Is the video still good for a modern install of git? This video is a few years old now and possibly out of date?

Avatar image for Charlie Clemmer

Charlie Clemmer on May 16, 2020

Running the git installer, I had two options pop up that were not related in the video: Git editor, and openssl library. Running on two different windows systems, one system prompted to use vim as the default editor, while the other recognized Sublime Text was installed and prompted that. For the openssl library, the text suggests this determines which certificate store (git’s or the windows system’s) is used to validate certs for remote repositories. I opted to use the windows system certificate store, but curious if there’s a preference one way or the other.

Avatar image for konstantinsm

konstantinsm on May 26, 2020

Git installer now allows integration with SublimeText. Also some new installation options appeared in it.

Avatar image for Michael Brausen

Michael Brausen on June 8, 2020

1) Like for Mark Edgeller GitGutter is not working as expected here as well. I can’t get much use out of how it works - that way I’d rather stick with my TortoiseGit installation and manage Git from the Windows Explorer. Would perhaps Sublime Merge be a better choice by now?

2) What’s the reason to define %SUBLIME% as a system variable and then add it to the user’s PATH? Too many steps and tinkering with system space where only user space should be involved. The same can be achieved by adding the Sublime path to the user’s PATH directly. Unless there is some other use for %SUBLIME% in system space I couldn’t find in the documentation or with Google.

You must own this product to join the conversation.