Using Git inside VS Code
Tags: git, vscode, productivity, tutorial
Published: 2020-10-19 20:00:00

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**
1. [VS Code](https://code.visualstudio.com/download) and [Git](https://git-scm.com/downloads) installed on your system.
2. Basic knowledge of **git** and **github**. (I would recommend this [crash course](https://youtu.be/SWYqp7iY_Tc))
3. 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.
![Source Control Icon](https://dev-to-uploads.s3.amazonaws.com/i/njx720mk8wjx2avn91dj.png "Source Control")
+ 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.
![File](https://dev-to-uploads.s3.amazonaws.com/i/w4l8lkz54zel29eln13o.png "File")
+ 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.
![Changes](https://dev-to-uploads.s3.amazonaws.com/i/1ea7n227itjwk8q9ggjx.png "Changes")

###**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
![Source Control Pane](https://dev-to-uploads.s3.amazonaws.com/i/aw302zw6o75qmc6xsxn5.png "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.
![Keyboard Shortcuts](https://dev-to-uploads.s3.amazonaws.com/i/omzrvu8q0lrah1mj7mqu.png "Keyboard Shortcuts")
+ Now search for 'git' in the search bar and you can choose any action and assign it to any unused key combination.
![Search](https://dev-to-uploads.s3.amazonaws.com/i/xa85zdv9fprqzej6mj28.png "Search")
+ For example, I have added the following combinations for staging all files, committing all files and pushing the changes.
![My Shortcuts](https://dev-to-uploads.s3.amazonaws.com/i/fvvhapvcc1otr2icu3bb.png "My Shortcuts")

###**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](https://twitter.com/arindamcodes). 
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. {% youtube 4dSA-NVP3e0 %}