Choose how you want to follow this guide:
0 of 6 scenarios completed
Meet the team
In this tutorial, we'll work with a team of 3 developers collaborating on a project from VS Code. Each one has their own workflow but they all share the repository on GitHub.
1. Clone and set up the repository
The first thing every team member doesEach developer clones the GitHub repository to their local machine and configures their Git identity. In VS Code, this can be done from the integrated terminal or the graphical interface.
$ git config --global user.name "Ana García"
$ git config --global user.email "ana@company.com"
# Clone the repository
$ git clone https://github.com/team/project.git
$ cd project
$ code .
code . opens VS Code directly in the project folder.- Ctrl+Shift+P → Type "Git: Clone" and press Enter
- Paste the repository URL:
https://github.com/team/project.git - Choose the destination folder and confirm
- VS Code will ask to open the repository → Open
2. Create branches
Each person works on their own branchGolden rule: Never work directly on main. Each new feature or fix is developed on an independent branch. This way one person's work doesn't interfere with anyone else's.
$ git checkout -b feature/login
# Bruno creates a branch for the data API
$ git checkout -b feature/data-api
# Carlos creates a branch for the dashboard
$ git checkout -b feature/dashboard
feature/, bugfix/, hotfix/ to organize your branches. Example: feature/login-oauth, bugfix/fix-header-overlap.3. Commit, Push and the daily workflow
The basic Git work cycleThe daily workflow with Git consists of: edit files → stage changes → commit → push to remote. In VS Code this is extremely visual and intuitive.
$ git status
# Add files to the staging area
$ git add src/login.js
$ git add . # or add ALL
# Create a commit with a descriptive message
$ git commit -m "feat: add login form with validation"
# Push to remote (first time on this branch)
$ git push -u origin feature/login
# Push subsequent changes (after the first time)
$ git push
- Open the Source Control panel with Ctrl+Shift+G
- Modified files appear under "Changes". Click + to stage them
- Write the commit message in the top text field
- Press ✓ Commit (or Ctrl+Enter)
- Click Sync Changes (or the ↑ icon) to push
feat:, fix:, docs:, refactor:, test:. It helps automate changelogs and understand the history.4. Pull Requests and Code Review
The gateway to mainWhen you finish your work on a branch, you do NOT merge directly. You open a Pull Request (PR) on GitHub so your teammates can review the code before integrating it into main.
- Push your branch —
git push -u origin feature/login - Go to GitHub — A yellow banner "Compare & pull request" appears → click it
- Fill in the PR — Descriptive title, description of changes, screenshots if visual
- Assign reviewers — Select teammates for review
- Code Review — Reviewers comment, suggest changes, approve
- Merge — If everything is approved, merge to main
5. Resolving conflicts
When two people edit the same fileConflicts occur when two branches modify the same lines of the same file. Git can't decide which one is correct, so it asks you to resolve it manually. Don't panic! VS Code makes this very visual and easy.
// config.js
const PORT = 3000;
const HOST = 'localhost';
// config.js
const PORT = 8080;
const HOST = '0.0.0.0';
⬇️ When trying to merge, Git shows this:
How to resolve in VS Code:
- VS Code shows conflicts with colors and buttons: Accept Current | Accept Incoming | Accept Both | Compare
- Choose which version to keep, or manually edit to combine both
- Delete the conflict markers (
<<<,===,>>>) - Save the file →
git add→git commit
$ git add config.js
$ git commit -m "fix: resolve conflict in config.js (merge feature/data-api)"
6. Syncing with the team
git pull, fetch and rebaseWhile you work on your branch, your teammates may have merged changes to main. It's important to update your branch to avoid falling behind and minimize future conflicts.
$ git checkout feature/login
$ git pull origin main
$ git checkout feature/login
$ git fetch origin
$ git rebase origin/main
Git Simulator — Practice here
Type Git commands and see what happens. Try: git init, git branch, git status, git log, help