Visual Studio Code (VS Code) is a popular, lightweight code editor that comes with built-in Git integration, making version control seamless for developers. Whether you’re new to Git or want to streamline your workflow, VS Code offers an intuitive interface to manage your repositories.
In this post, you’ll learn how to use Git inside Visual Studio Code — from cloning a repo to committing and pushing your changes.
✅ Prerequisites
- Git installed on your system (Download Git)
- Visual Studio Code installed (Download VS Code)
- A Git repository (local or remote on GitHub, GitLab, etc.)
🔹 Step 1: Open Your Project or Clone a Repository
Option A: Open an Existing Git Repo
- Open VS Code.
- Click File > Open Folder and select your project folder.
- VS Code will detect the Git repository automatically.
Option B: Clone a Remote Repository
- Open VS Code.
- Press
Ctrl+Shift+P(orCmd+Shift+Pon macOS) to open the Command Palette. - Type Git: Clone and select it.
- Paste the repo URL (HTTPS or SSH).
- Choose a local folder to clone the repo into.
- Once cloned, VS Code will prompt you to open the new folder.
🔹 Step 2: View Git Changes
- Click the Source Control icon on the left sidebar (or press
Ctrl+Shift+G). - The Source Control panel shows:
- Modified files
- Staged files
- Untracked files
Files with changes will be listed here, color-coded to indicate added, modified, or deleted files.
🔹 Step 3: Stage and Commit Changes
- Stage a file:
Hover over the changed file and click the + icon, or right-click the file and choose Stage Changes. - Stage all changes:
Click the + icon next to Changes header. - Commit your changes:
- Enter a meaningful commit message in the message box at the top.
- Press
Ctrl+Enteror click the ✔️ checkmark icon to commit.
🔹 Step 4: Push and Pull Changes
- Push commits to remote:
Click the “…” menu in the Source Control panel and select Push, or use the status bar button. - Pull latest changes from remote:
Select Pull from the same menu to sync your local copy.
🔹 Step 5: Branching and Merging
- Click the current branch name in the bottom-left corner to:
- Switch branches
- Create new branches
- Manage branch merges
VS Code shows branch names and offers easy commands to manage your workflow.
🔹 Step 6: Resolve Conflicts
If you encounter conflicts when pulling or merging:
- VS Code highlights conflicting sections in files.
- Use inline buttons like Accept Current Change or Accept Incoming Change.
- After resolving, stage the file and commit.
🧠 Bonus Tips
- Install the GitLens extension for enhanced Git insights and history browsing.
- Use the Terminal inside VS Code (`Ctrl+“) to run any Git commands directly.
- Customize Git settings in VS Code via
File > Preferences > Settingsand search for “Git”.
✅ Summary of Key Actions
| Task | How to Do It in VS Code |
|---|---|
| Clone a repo | Command Palette → Git: Clone |
| View changes | Source Control panel (Ctrl+Shift+G) |
| Stage changes | Click + icon next to files |
| Commit changes | Enter message + click ✔️ or Ctrl+Enter |
| Push/Pull | Use Source Control menu or status bar buttons |
| Switch/create branches | Click branch name bottom-left |
| Resolve merge conflicts | Use inline buttons in editor |
🏁 Conclusion
Using Git inside Visual Studio Code makes version control simple and visual. Whether you prefer GUI operations or the terminal, VS Code provides powerful Git features that boost productivity and streamline collaboration.
