Tired of messy commits, lost code, or not knowing where to start?
This step-by-step guide walks you through setting up a reliable development workflow using Visual Studio Code (your editor) and Git (the tool that tracks changes).
You’ll install both, configure Git inside VS Code, create a local repository, use branches and merges, connect to a remote like GitHub, and add a few helpful extensions.
Follow these concrete steps and you’ll have a workflow that saves time and avoids common mistakes.
Install Visual Studio Code and Git (Step‑by‑Step)
You need two things before you can start building: Visual Studio Code and Git. Both are free, work on any platform, and take maybe five minutes total to get running.
Go to code.visualstudio.com and grab the download for your OS. It’s about 80 MB. Run it, click through the license stuff, and decide if you want shortcuts and file associations. Not sure? Just leave the defaults checked. VS Code installs fast and opens on its own when it’s done.
Now get Git. Head to git-scm.com and download the installer. On Windows, you’ll click through a bunch of configuration screens. Most of the defaults are fine, but there are a few things worth noticing.
Git’s going to ask which text editor you want. If you’ve already installed VS Code, pick “Use Visual Studio Code as Git’s default editor.” For line endings, go with “Checkout Windows-style, commit Unix-style” on Windows or “Checkout as-is, commit Unix-style” on macOS and Linux. When it asks about PATH, choose “Git from the command line and also from 3rd-party software.”
Once it’s installed, open your terminal or command prompt and type git --version. You should see something like “git version 2.40.0.” That means it worked. Open VS Code, hit Ctrl+Shift+P (Shift-Command-P on Mac), type “Git: Version,” and press Enter. If VS Code found Git automatically, you’ll see that same version number.
Common installation settings for new users:
- Default editor: Visual Studio Code
- PATH environment: Git from command line and 3rd-party software
- Line ending conversion: platform-appropriate defaults
- Enable Git Credential Manager for authentication
Configure Git Inside VS Code
VS Code can read your Git config automatically, but you’ve got to tell Git who you are first. Open VS Code, then open the integrated terminal by hitting Ctrl+` (that’s the backtick key) or going to View → Terminal.
Type these two commands, swapping in your actual name and email:
git config --global user.name "Your Name"
git config --global user.email "you@example.com"
This saves your identity globally. Every repo you create or clone uses this info. Want to check what’s configured? Type git config --global --list and your settings print right there in the terminal.
By default, new repos start with a branch called “master,” but lots of teams use “main” now. Set your default with this:
git config --global init.defaultBranch main
Open the Source Control panel by clicking the third icon in the left sidebar (looks like a branching diagram) or press Ctrl+Shift+G. If you don’t have a repo open yet, you’ll see a button that says “Initialize Repository.” That’s how you know Git’s connected.
VS Code’s Source Control interface gives you buttons for staging, committing, and viewing history without typing commands. You can still use the terminal for anything the GUI doesn’t cover. Both methods do the exact same thing under the hood.
Essential Git configuration commands:
git config --global user.name "Your Name"git config --global user.email "you@example.com"git config --global init.defaultBranch maingit config --global --list(view current settings)git config --global credential.helper manager(store credentials securely)
Create and Manage a Local Git Repository
Open VS Code. Click File → Open Folder and pick the folder where you want your project. Empty folder? No problem. Once it’s open, click the Source Control icon in the left sidebar. You’ll see a blue button: “Initialize Repository.” Click it.
VS Code runs git init behind the scenes and drops a hidden .git folder inside your project directory. That folder holds all Git’s tracking data. You won’t see it in the Explorer unless you turn on hidden files, but it’s there doing its thing.
Create a new file. Click the New File icon in the Explorer or press Ctrl+N. Name it README.md and type something like “Hello World!” Save it with Ctrl+S.
Go back to the Source Control panel. You’ll see README.md under “Changes” with a green “U” next to it. That “U” means untracked. Git sees the file but isn’t watching it yet. Click the + icon next to the filename. It moves to “Staged Changes” and the “U” turns into an “A” for added.
There’s a text box at the top that says “Message.” Type a quick commit message, something like “Add README.” Click the Commit button or press Ctrl+Enter. Your first commit’s saved. The file vanishes from the panel because there’s nothing new to track.
Want to see your commit history? Press Ctrl+Shift+P, type “Git: View History,” hit Enter. You’ll get a list of commits with your message, timestamp, and author info.
Typical repository actions:
- Initialize a repository: Source Control → Initialize Repository (or
git init) - Stage a file: Click + next to the file name (or
git add <file>) - Stage all changes: Click + next to “Changes” (or
git add .) - Commit staged changes: Enter message → Commit button (or
git commit -m "message") - Rename a file: Right-click in Explorer → Rename (Git tracks the rename automatically)
- Delete a file: Right-click → Delete (Git stages the deletion)
Perform Essential Git Operations in VS Code
After your first commit, you’ll start using Git’s core stuff: branches, merges, and diffs. VS Code does all of this through the Source Control panel and a couple keyboard shortcuts.
To create a new branch, press Ctrl+Shift+P (Shift-Command-P on Mac), type “Git: Create Branch…” and hit Enter. VS Code asks for a branch name. Type something useful like “add-footer” and press Enter. You’re on the new branch now. Check the bottom-left corner of VS Code. You’ll see “add-footer” next to the branch icon.
Make some changes. Open a file, add a line, save it. The Source Control panel shows the modified file under “Changes.” Click the filename and VS Code opens a side-by-side diff. Left side shows the old version, right side shows the new one. Changed lines are highlighted green (added), blue (modified), or red (deleted).
Stage and commit like before: click +, type a message, hit Commit. Now you’ve got two branches: “main” and “add-footer.” To merge “add-footer” back into “main,” click the branch name in the bottom-left and select “main” from the dropdown. You’re on the main branch now.
Open Source Control, click the three-dot menu at the top, choose Branch → Merge Branch. VS Code shows a list of branches. Pick “add-footer” and press Enter. No conflicts? The merge finishes immediately and your changes from “add-footer” are in “main.”
If Git finds a conflict (two branches changed the same line differently), VS Code highlights the problem lines in the editor and shows options like “Accept Current Change,” “Accept Incoming Change,” or “Accept Both Changes.” Click what you want, save the file, stage it, commit. Merge done.
You can also view diffs inline by clicking the three-dot menu in Source Control and choosing “Inline View” instead of side-by-side. Inline View stacks old and new lines vertically and lets you edit directly in the diff.
Essential Git actions and what they do:
- Create branch: makes a new copy of your code so you can work without touching the main branch
- Switch branch: moves you to a different version of your code
- Commit: saves a snapshot of your staged changes with a message
- Merge: combines changes from one branch into another
- Diff: shows line-by-line differences between two file versions
- Resolve conflict: manually pick which changes to keep when branches clash
Connect VS Code to a Remote Repository (GitHub, GitLab, Bitbucket)
Local commits are useful, but you’ll want to push your code to a remote service for backups, collaboration, and deployment. GitHub, GitLab, and Bitbucket all work the same way with VS Code.
Sign in to your Git hosting account and create a new repository. Name it to match your project, pick public or private, and don’t initialize it with a README if you already have commits locally. Copy the repository URL from the page. It looks like https://github.com/username/project.git or git@github.com:username/project.git if you’re using SSH.
Open VS Code, make sure you’re on the branch you want to push (usually “main”), and open the terminal with Ctrl+. Type this command, pasting your repository URL where it says
git remote add origin <url>
This tells Git where to send your code. “origin” is the standard name for the main remote. Now push your commits:
git push -u origin main
The -u flag sets “origin main” as the default upstream, so future pushes and pulls can skip the branch name. Using HTTPS and haven’t authenticated before? Git will ask for a username and password. A lot of services need a personal access token instead of your account password now. Check your hosting provider’s docs if the push fails.
If you’re using SSH, make sure you’ve added your public SSH key to your account. Generate one with ssh-keygen -t ed25519 -C "you@example.com" if you don’t have one, then add the public key (~/.ssh/id_ed25519.pub) to your account settings.
After the push finishes, refresh your repository page in the browser. You’ll see your commits, files, and commit messages. Your local repo’s connected to the remote.
Remote connection steps summary:
- Create a new repository on GitHub, GitLab, or Bitbucket
- Copy the repository URL (HTTPS or SSH)
- Add the remote:
git remote add origin <url> - Push your branch:
git push -u origin main - Authenticate with a personal access token or SSH key if prompted
Recommended VS Code Extensions for Git Workflow
VS Code’s built-in Git stuff covers the basics, but a few extensions make things faster and more visual. Open the Extensions view by clicking the fifth icon in the left sidebar (looks like four squares) or press Ctrl+Shift+X.
GitLens is the most popular Git extension. It shows inline blame annotations so you can see who wrote each line and when. Hover over any line and GitLens displays the commit message, author, and date. It also adds a detailed commit history panel, file history, and visual branch graphs. Search “GitLens” in Extensions and click Install.
GitHub Pull Requests and Issues connects your editor directly to GitHub. You can create, review, and merge pull requests without leaving VS Code. It also lets you browse and close issues, comment on code, and see PR status checks. If you work on GitHub, this saves a ton of browser tab switching.
Git Graph gives you a visual commit history that looks like the network graph on GitHub. You can click commits to see diffs, right-click branches to merge or rebase, and filter by author or date range. Really handy when you’re juggling multiple branches or trying to understand a messy history.
Git History adds a file-level history viewer. Right-click any file in the Explorer and choose “Git: View File History” to see every commit that touched that file. You can compare versions, revert changes, and trace when a bug got introduced.
GitHub Actions shows your CI/CD workflow status directly in VS Code. If you’re using GitHub Actions for automated tests or deployments, this extension displays build status, logs, and error details in a dedicated panel. You can re-run failed jobs without opening the browser.
Extension list with descriptions:
| Extension | What it adds |
|---|---|
| GitLens | Inline blame, commit history, file history, branch graphs |
| GitHub Pull Requests and Issues | PR creation, review, merge, issue tracking inside VS Code |
| Git Graph | Visual commit history and branch graph with interactive controls |
| Git History | Per-file commit history, compare versions, revert changes |
| GitHub Actions | CI/CD workflow status, logs, and re-run controls |
Troubleshooting Common VS Code + Git Issues
Even with a clean setup, you’ll hit errors sometimes. Most are quick fixes once you know where to look. VS Code’s Output panel and integrated terminal both show useful diagnostic info when something breaks.
If VS Code says “Git not found” or doesn’t show the Source Control panel, Git probably isn’t installed or isn’t in your system PATH. Open a terminal outside VS Code and type git --version. See “command not found”? Reinstall Git and make sure you check the option to add Git to your PATH during installation. Restart VS Code after.
Authentication errors happen when pushing or pulling from a remote. GitHub, GitLab, and Bitbucket stopped accepting passwords over HTTPS in 2021, so you need a personal access token or SSH key. Get a 403 or authentication failure? Generate a token in your account settings, then use it as the password when Git asks. For SSH, run ssh -T git@github.com to test your key. Fails? Add your public key to your account and try again.
Merge conflicts confuse a lot of beginners. When you see conflict markers like <<<<<<< HEAD in your code, Git’s asking you to pick which version to keep. VS Code highlights conflicts and shows buttons like “Accept Current Change” or “Accept Incoming Change.” Click what you want, delete any leftover conflict markers, save the file, stage it, and commit. The merge continues on its own.
If your user.name or user.email is missing, commits fail with something like “Please tell me who you are.” Run git config --global user.name "Your Name" and git config --global user.email "you@example.com" in the terminal, then try committing again.
Sometimes you’ll see “unstaged changes” when you try to switch branches. Git won’t let you switch if you’ve got unsaved work that conflicts with the other branch. You’ve got three options: commit your changes, stash them with git stash, or discard them. To stash, type git stash in the terminal, switch branches, and later run git stash pop to get your work back.
If extensions act weird after an update, disable and re-enable them, or uninstall and reinstall. You can also export your settings and extensions to a .code-profile file (Ctrl+Shift+P → “Profiles: Export Profile”) and reimport it if something breaks.
Common issues:
- Git not recognized in VS Code
- Authentication failure when pushing or pulling
- Merge conflict with confusing markers
- Missing
user.nameoruser.emailconfig - Unstaged changes blocking branch switch
Practical fixes:
- Reinstall Git with PATH option enabled, restart VS Code
- Generate personal access token or SSH key, authenticate again
- Use VS Code’s inline conflict resolution buttons, save and commit
- Run
git config --global user.nameanduser.emailcommands - Commit, stash, or discard changes before switching branches
Final Words
You installed VS Code and Git, picked sensible install options, and verified both tools.
You configured Git inside VS Code, created a repo, made commits and branches, and linked a remote.
You added helpful extensions and learned fixes for common issues.
Keep this article as a checklist. This step by step guide to set up a development workflow with VS Code and Git gives you a repeatable setup for every project. Keep practicing and you’ll feel more confident with each push.
FAQ
Q: How do I install VS Code and Git step‑by‑step?
A: Installing VS Code and Git involves downloading VS Code from Microsoft’s official site and Git from git-scm.com, running each installer with recommended defaults, then verifying with code --version and git --version.
Q: Where should I download VS Code and Git?
A: You should download VS Code from Microsoft’s official website and Git from git-scm.com to ensure authentic installers and let VS Code automatically detect Git after installation.
Q: What installation settings should I choose when installing Git?
A: Choosing Git installer defaults is fine: set the default editor to VS Code, add Git to PATH, enable the credential helper, and pick suitable line‑ending conversion (checkout as-is or convert to LF).
Q: How do I verify both VS Code and Git are installed correctly?
A: Verifying installations means running git --version and code --version in a terminal, confirming the Git icon appears in VS Code Source Control, and running a simple git status in the integrated terminal.
Q: How do I configure Git inside VS Code?
A: Configuring Git inside VS Code means running git config --global user.name and git config --global user.email in the integrated terminal, set a default branch, and let VS Code read those settings automatically.
Q: What are the essential Git configuration commands I should run?
A: The essential commands are git config --global user.name "Your Name", git config --global user.email "you@example.com", git config --global init.defaultBranch main, and git config --global core.editor "code --wait".
Q: How do I create and manage a local Git repository in VS Code?
A: Creating and managing a repo means running git init in the integrated terminal or clicking Initialize Repository in Source Control, then add files, stage (git add), and commit your first changes.
Q: How do I perform common Git operations (commit, branch, merge, push) in VS Code?
A: Performing common Git ops uses the Source Control UI or terminal: write commits in the commit box, create/switch branches from the branch menu, resolve merge conflicts in the editor, then push after adding a remote.
Q: How do I connect a local repo to a remote like GitHub from VS Code?
A: Connecting to a remote means creating the remote repo, copying its URL, running git remote add origin <url>, authenticating (use a personal access token if required), then git push -u origin main.
Q: Which VS Code extensions improve the Git workflow?
A: Useful extensions include GitLens (history and blame), Git Graph (visual branch view), GitHub Pull Requests and Issues (PR workflow), Git History (commit browsing), and Commitizen helpers for consistent messages.
Q: What are common VS Code + Git problems and quick fixes?
A: Common issues are Git not detected (add to PATH), authentication failures (use PAT), merge conflict confusion (use editor markers and Source Control), and check VS Code Output/terminal logs for diagnostics.
