Source Control 101
If you were to ask my what my favourite dev tool is, my answer is 100% Source Control. If you are someone that I have mentored, you know that I take time at the beginning of most calls to show you the awesome power of VSCode’s Source Control.
Dev’s make a lot of cool tools that do a lot of things. We automate processes and build complicated apps to manage the little things that we just don’t have time for. Source Control is not one of those things. It is a very simple, very straight forward tool that I think every junior developer who is starting out should utilise to its full extent.
I am definitely not an expert, and I am certain that some of you who are reading this probably know more about Source Control than I do. As the title states, this is Source Control 101. Just an introduction to how I believe new developers should be using the tool to speed up their development process.
To understand source control you must first understand Git.
What is Git?
Git is version control, or as I like to explain it: a really sophisticated save button. Imagine the save button on your MS Word Doc that gives you detailed changes of every time you hit save and all of the changes you made between each version. That is (a very simplified) explanation of Git. For the record, Git does way more than just fancy-save, but this is the aspect that we are going to focus on for the sake of Source Control. My VC of choice is Github, so I will be drawing from that in this article.
What is Source Control?
Source Control is a way to manage and track code changes in development. you will be able to see all of the changes you have made since your last commit and you can review them and/or erase them with the click of a button. This is really important when you are first starting out because small code changes can make big impact. Being able to spot a bug quickly is going to speed your development cycle up a lot.
Step 1: Setup Git and Source Control
To start, you need to setup Git and Source Control:
- Install Git
- Add Source Control to your VSCode left panel (it is default there most of the time, so check to see if you already have the little circuit-looking icon)
Step 2: Open the root directory of your repo in VSCode
Create a repo/fork a repo/create a branch using Github or the command line.
When working in a repo, you want to only see the changes that are relevant to your work. Instead of opening up every file that lives on your computer in VSCode, you want to limit it to just the files that are included in the repo you are working on. VSCode will do the magic and understand that the base directory is associated with a given repo in Github. Open the folder that is also the base directory for your repo to exclude everything else.
Step 3: Make changes
Now is your time to code! Just by coding, source control should be updating with all of the changes that I make. I want to highlight how important it is to commit when things are in a clean, functioning state. That way if everything goes terribly, you can revert your work back to a place that was clean and functional. Commits are free and unlimited. Do not hesitate to commit all the time.
Step 4: Profit
If you are looking at the little circuit icon that I showed you earlier, it updates with a tiny number every time you save a file with changes (or add a new one entirely).
This blue number 3 indicates that I have updated 3 files since my last commit. You can click into any of these files and see a detailed markdown of all of the differences between you your remote version in Github(left) VS the changes on your local branch:
This is the feature that I really want to highlight. When I started coding I has trouble being consistent with naming. I still joke that I have an illness where sometimes I write a name in singular and sometimes in plural. link vs links is going to cause you a big headache if you aren’t aware that you made that change. Using Source Control gives you the power to view all of your code changes easily so you can spot potential bugs in your code.
If you have one of these Working Tree files open (or if you hover over the file name in the left panel), you will see 3 icons appear:
I want to draw attention to that swoopy arrow. Simply by clicking that, you can discard all local changes to a single file and revert it to the state it was in on your remote version. Alternatively, if you hover over Changes, you will see the same icons appear and you can apply those options to all files in Source Control. Click that button if you are having a bad time and it will bring you back to a clean version of your code so you can start fresh if needed.
The next time I make a commit, it will automatically update Source Control to be clean (aka that little 3 and those files will vanish), because your local version is now current with your remote origin. ✨MAGIC✨
Fin
Source Control is an incredibly useful tool in development. Although it might seem painfully simple, I’ve noticed that a lot of bootcamps and even some university programs don’t teach it. Understanding this will speed up your development process significantly in your early coding days and hopefully save you from a lot of the pitfalls that I endured during my first few months as a developer.
