Using Git inside VS Code

Arindam Lahiri — Mon, 19 Oct 2020 20:00:00 +0000

In this tutorial I will show you how you can use git inside VS Code.

If you are someone who is already comfortable with using git the traditional way from the terminal/git bash, stick around and you might find some tricks to save a lot of time in your workflow.

And if you are someone who does not like the terminal a lot and would just prefer a GUI flow, then this is definitely for you.

Prerequisites

VS Code and Git installed on your system.
Basic knowledge of git and github. (I would recommend this crash course)
Open up your project folder in VS Code.

Note: If you have done any step(like initialising the git repo) from outside of VS Code, you can just skip to the next step as VS Code keeps a track of your entire git history.

Additional Note: If you are like me and prefer keyboard shortcuts over clicking around with your mouse, do check out Step 6 👀

Step 1: Initialise a git repo

Look for the Source Control icon in your sidebar and click on it.
You should see some text that says something like this folder does not have a git repo. Click on the button that says "Initialise repository"

Step 2: Add files to staging area

Now you would see all your files listed down under a section titled Changes
When you hover over any file, you would see three options. Click the third one which is a plus(+) icon. This would add that particular file to the staging area.
To add all the files to the staging area, (similar to the command git add .) hover over the Changes title and click on the plus(+) icon there.

Step 3: Commit the changes

Your staged files would be now be in the appropriately named Staged Changes section
To commit your changes look for a ✔ in the Source Control pane
A prompt will ask you for a commit message, enter a relevant message and hit enter. Your changes are now committed.
If you only work in local repositories, then this is it. Head over to Step 6 for some time saving tricks.

Step 4: Add a remote

Head over to Github, create a new repository and get the url (ending with 'yourusername/repositoryname.git') that you would otherwise use in the git remote add command.
Now back in VS Code click the three dots for more options in the Source Control Pane (see image in Step 3) and then select Remote>Add Remote
Enter the url that you got earlier and after that enter a name for the remote repo.

Step 5: Push your code to Github

For your first push, open the options in the Source Control Pane and select Branch>Publish Branch.... You might be asked to login to github, do that.
In a few seconds, your code will be available in your Github repository.
For subsequent pushes, going to Options>Push will push your code to Github.

[Optional] Step 6: Add keyboard shortcuts

One under-rated feature of VS Code is the ability to add a keyboard shortcut for almost anything inside the editor. Personally I have used it to ease my workflow with git/github.

Open the command palette with Ctrl+Shift+P, search for 'Open keyboard shortcuts' and open it.
Now search for 'git' in the search bar and you can choose any action and assign it to any unused key combination.
For example, I have added the following combinations for staging all files, committing all files and pushing the changes.

Conclusion

There are a lot of git features baked into VS Code, these were basic actions to get you started. I hope you found this tutorial helpful. If you run into any issues, drop a comment down below or contact me on Twitter.
Also feel free to share any of your productivity tips. Would love to see what you all are using.

Update(14/01/2021) - If you need a visual guide for this, do checkout this video.

DEV Community: Arindam Lahiri