I’ll begin by giving an overview of 3 key tools we’ll be using. After I’ve defined them I’ll give you examples of how to use them together!
(BTW I’m a Mac OS user, so if some commands aren’t the same for your operating system, please give it a quick Google!)
1.1 Visual Studio Code
1.2 The Command Line Interface
1.3 Version Control
1.4 Putting this all together
1.1 Visual Studio Code (VS Code)
First things first, we need somewhere to write your code! Visual Studio Code is my favourite source code editor (or Integrated Development Environment if you want to use the fancy term) and it’s free 😍.
It provides various inbuilt tools that we’ll be needing, so go ahead and click here to find out how to install it.
1.2 The Command Line Interface (CLI)
Next, I’ll talk briefly about the CLI. At a simple level, it is a window where you can write commands that tell your computer to carry out some actions, for example, to create/modify some files or initiate some process. Each operating system has its own name for this (eg. for Mac OS it’s called Terminal) but don’t worry about this as VS code provides its own CLI and that’s what we’ll be using (we can begin to see why I’m a fan of VS code!).
1.3 Version Control (Git)
Developers need a way to track their code. Of course, you could save a new version of the same file every time you changed it juuust in case you wanted to go back to a previous version at some point in the future, but that’s just super inconvenient and you’d end up with hundreds of files! Not to mention if you’re working in a team. So that’s why version control was born, and in particular we’ll be talking about the most popular one called Git (interesting name right 😅?).
Install Git from here.
1. 4 Putting This All Together
Go ahead and open up VS code, then click Open Folder.
Make a new folder, call it something fun, select it and click Open.
You should now see on the left hand side the first icon is selected, with the file view open. There are no files in there at the moment so it’s empty.
Now let’s open the command line. Click the triangle in the left-hand corner, followed by the Terminal tab.
Now you have the command line open and it’s pointing to the folder you just made, great!
Let’s tell Git who we are. Paste these commands into your command line then set a username and email (choose your own here):
>> git config --global user.name "your_username"
>> git config --global user.email "your_email"
Now let’s initialise Git:
>> git init
We’ve now added version control tracking.
Add some files via the command line using the touch command.
>> touch file1.js file2.js
Hit enter and you should see your left hand file view with two empty JavaScript files!
Note, the U next to each file. This stands for Untracked. Git has recognised that we have added two new files, that we haven’t yet committed to track. If you click on the 2, we can see our version control in more detail!
So, how do we tell git to track these files? There are two steps to do this. First we must git add the files, so Git knows which files we want it to track. Then we git commit the files, along with a short message explaining what the changes for this commit are. We can add/commit either via the command line or with the help of VS code to do this for us under the hood. BTW we can’t commit without adding some file first!
1. Via the command line
>> git add .
>> git commit -m "Add my first javascript files"
Note: The . here means all!
2. Via the VS code version control tab
Whichever way you did, if you now check the git log via the command line, you should see your first commit has been logged and the files in the version control tab have been cleared!
Congratulations! You’ve completed your first git commit 🥳
Now, if you go back into file view and open up one of the files, type something in the file and hit Save.
You should see a little M which stands for Modified. Git has recognised something has changed in the file, so you’d have to commit again if you want to clear that notification!
Some Caveats
We’ve just been looking at Git locally. This means that only our computer currently knows about our Git tracking. We can use Git to track files remotely so other people can access our versioned code, via the wonderful GitHub for example. We would similarly use add/commit as we have done here, but we will also have to git push our changes to some repository (which is essentially a folder of all of our code) for other developers to see. We will have to git pull other people’s changes too if we want to see their changes locally. But don’t worry about this for now, we will return to these terms in some future articles!👾
Hope this helped some of you aspiring coders set a foundation for what’s to come! And of course, if you have any questions, please feel free to give me a message 😌
Top comments (0)