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.
Top comments (0)