Git Helper - Learn Git Step by Step

A beginner-friendly VS Code extension that teaches Git by guiding you through each step inside your editor.

What It Does

Walkthrough Panel (sidebar): A step-by-step guide that walks you through the entire Git workflow — from checking if Git is installed to pushing code to GitHub. Each step explains what the command does in plain English, shows you the exact command, and lets you run it with one click.

Quick Actions (Command Palette): Common Git commands available through the Command Palette for when you already know what you want to do.

How to Run Locally (Development)

Prerequisites

• VS Code installed
• Node.js installed (v18 or newer)
• Git installed

Step 1: Install Dependencies

Open a terminal in the project folder and run:

npm install

Checkpoint: You should see a node_modules/ folder appear. No errors in the terminal.

Step 2: Compile the TypeScript

npm run compile

Checkpoint: You should see an out/ folder appear with .js files inside it. No errors in the terminal.

Step 3: Open in VS Code

code .

This opens the project folder in VS Code.

Step 4: Launch the Extension Development Host

1. Press F5 (or go to Run > Start Debugging)
2. A new VS Code window will open — this is the "Extension Development Host"
3. This second window has your extension loaded and ready to test

Checkpoint: The new window should open without errors.

Step 5: Open the Git Walkthrough

1. In the Extension Development Host window, look at the Activity Bar (the icons on the far left)
2. You should see a new Git branch icon — click it
3. The "Git Walkthrough" sidebar panel should appear with all 9 steps

Checkpoint: You can see the walkthrough steps with descriptions and "Run Step" buttons.

Step 6: Test It Out

1. Open a folder in the Extension Development Host (File > Open Folder)
2. Click "Run Step" on Step 1 to verify Git is installed
3. Work through the steps in order!

Step 7: Try the Quick Actions

1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
2. Type "Git Helper"
3. You should see all 5 commands listed

Project Structure

git-helper-vscode/
├── .vscode/
│   ├── launch.json      ← How to launch the extension for testing
│   └── tasks.json       ← Build task configuration
├── media/
│   └── git-icon.svg     ← The icon shown in the Activity Bar
├── src/
│   ├── extension.ts     ← Entry point — registers commands and the sidebar
│   ├── gitCommands.ts   ← Runs Git commands safely using execFile
│   ├── steps.ts         ← Defines the 9 walkthrough steps (data only)
│   └── walkthroughProvider.ts  ← Builds the sidebar UI (HTML/CSS/JS)
├── out/                  ← Compiled JavaScript (generated by `npm run compile`)
├── package.json         ← Extension manifest — tells VS Code what this extension does
├── tsconfig.json        ← TypeScript compiler configuration
└── README.md            ← You are here!

How the Files Connect

package.json
  ↓ defines views, commands, activation
extension.ts
  ↓ registers the sidebar provider and commands
  ├── walkthroughProvider.ts  ← builds the sidebar HTML, handles button clicks
  │     ↓ imports
  │     ├── steps.ts          ← step definitions (titles, descriptions, commands)
  │     └── gitCommands.ts    ← runs git safely and logs output
  └── gitCommands.ts          ← also used directly by quick action commands

Walkthrough Steps

Quick Action Commands

Open the Command Palette (Cmd/Ctrl+Shift+P) and type "Git Helper":

• Git Helper: Status — Show current repo status
• Git Helper: Add All — Stage all changed files
• Git Helper: Commit — Commit with a message (prompts for input)
• Git Helper: Push — Push to remote
• Git Helper: Pull — Pull from remote

All command output is logged to the Output panel (View > Output > "Git Helper").