Coding for Beginners: VS Code, CLI & Version Control
Tags: vscode, git
Published: 2020-09-17 21:37:06

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](#chapter-1)
[1.2 The Command Line Interface](#chapter-2)
[1.3 Version Control](#chapter-3)
[1.4 Putting this all together](#chapter-4)

### **1.1 Visual Studio Code (VS Code)** <a name="chapter-1"></a>

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](https://code.visualstudio.com/download) to find out how to install it.

### **1.2 The Command Line Interface (CLI)**<a name="chapter-2"></a>

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)**<a name="chapter-3"></a>

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](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).

### **1. 4 Putting This All Together**<a name="chapter-4"></a>

Go ahead and open up VS code, then click *Open Folder*.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/zy6wkp77ke42qdq5a6ub.png" width="100">

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. 

<img src="https://dev-to-uploads.s3.amazonaws.com/i/o6z1474jv62oa6mqi64t.png" width="370">

Now let’s open the command line. Click the triangle in the left-hand corner, followed by the *Terminal* tab.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/p78f01a34any98pxhigx.png" width="270">

<img src="https://dev-to-uploads.s3.amazonaws.com/i/9kuonb211h7ze97yzvfi.png" width="630">

Now you have the command line open and it’s pointing to the folder you just made, great!

<img src="https://dev-to-uploads.s3.amazonaws.com/i/keluzk3tejx9t60ez5vt.png" width="630">

Let’s tell Git who we are. Paste these commands into your command line then set a username and email (choose your own here):

```javascript
>> git config --global user.name "your_username"
>> git config --global user.email "your_email"
```

Now let’s initialise Git:

```javascript
>> git init
```

We’ve now added version control tracking. 

Add some files via the command line using the `touch` command.

```javascript
>> touch file1.js file2.js
```

Hit enter and you should see your left hand file view with two empty JavaScript files!

<img src="https://dev-to-uploads.s3.amazonaws.com/i/yodz1fz124p6m1divt2a.png" width="300">

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!

<img src="https://dev-to-uploads.s3.amazonaws.com/i/6x3b3cavnaiy453q5fke.png" width="300">


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 
```javascript
>> git add .
>> git commit -m "Add my first javascript files"
```

*Note:* The **.** here means all!

#### 2. Via the VS code version control tab

<img src="https://dev-to-uploads.s3.amazonaws.com/i/f4huv8844ct0bzhgsh2c.png" width="300">

<img src="https://dev-to-uploads.s3.amazonaws.com/i/7k19oto6t862m6wfh65r.png" width="300">

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](https://github.com/) 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 😌

[Twitter](https://twitter.com/cerdfied) || [GitHub](https://github.com/cerdfied)