Visual Studio Code - How to use Git and GitHub | Page 3 of 4

How do you know which line has been deleted and which line has been added to code base? Visual Studio Code (VS Code) has the answer of it by “Gutter Indicators” and “Diff tool”.

Let’s delete our <h1> tag which says: “This is a demo JavaScript project”. Replace <h1> with <h2> tag and adds a new line within: “This is a demo JavaScript project”. Finally, modifies <p> tag with “Hello Sunil!!”. Here is how it looks on VS Code.

You can clearly see some colorful skinny area to the right of the line number. It is called “Gutter” in Visual Studio Code (VS Code).

Visual Studio Code (VS Code) uses 3 kinds of gutter indicators:

Red: The vertical red mark signifies a line or group of lines that has been deleted
Green: The vertical green bar signifies a line of code that has been added
Blue: The vertical blue mark signifies that the corresponding line of code has been changed

If you think gutter indicators are not enough then you can try diff tool. To view a diff, open up the “Source Control” panel (CTRL + Shift + G) and double-click a changed file. In this case, double-click the “index.html” file.

You will be brought to a typical diff view with the current version of the file on the right and the previously commited version of the file on the left.

How to work with branches in Visual Studio Code (VS Code)

Git allows you to work on different branches at the same time. This is not only good for experimenting with new solutions, but can also significantly facilitate teamwork where developers can work on different branches.

Moving to the bottom bar, you have the ability to create and switch branches in Visual Studio Code (VS Code). If you take a look at the very bottom left of the VS Code, you should see the “source control” icon followed most likely by “master” or the name of the current working branch.

To create a branch, click on the “master” branch. A menu should popup giving you the ability to create a new branch. Go ahead and create a new branch called “test-branch”.

Now, remove <p> tag which says – “Hello Sunil!!” in the “test-branch”.

Remove p tag from test-branch on vs code

Go ahead and commit those changes to the “test-branch”. Then, click the branch name in the bottom left again to switch back to the “master” branch.

Switch back from test-branch to master branch on vs code

After switching back to the “master” branch, you should notice that the change commited to the “test-branch” is no longer present.

This is how you can create multiple branches to test your code in Visual Studio Code (VS Code).

How to use Git commands from the command palette in Visual Studio Code (VS Code)

You can access Git commands from the “Command Palette” by pressing “CTRL+Shift+P” key combination. You don’t have to do anything else, just type the command Git inside the “Command Palette”, and you get a dropdown list of the available commands you can quickly choose from.

Press F1 key to get command palette in Visual Studio Code

Let’s merge “test-branch” to “master” branch by using command palette in Visual Studio Code (VS Code) as follows:

Git merge in Visual Studio Code (VS Code)

You have now successfully merge “test-branch” to “master” by using command palette in Visual Studio Code (VS Code).

How to clone an existing repository from GitHub to Visual Studio Code (VS Code)

Let your development team has mailed you a GitHub repository link and guided you to clone it under Visual Studio Code (VS Code) and start working on. How can you do it? Its actually easy, follow these steps to clone an existing repository from GitHub to Visual Studio Code (VS Code).

1 2 3 4