Skip to main content
March 23, 2026Dan Rodney/4 min read

Stage & Commit Files

Master Git's essential workflow for version control

Git Workflow Overview

Git tracks all changes to your files but requires you to explicitly tell it which changes to record. This two-step process of staging and committing gives you precise control over your project history.

Core Git Concepts

Working Directory

Your local files where you make changes. Git monitors this area for modifications, additions, and deletions.

Staging Area

A temporary holding area for changes you want to include in your next commit. Gives you control over what gets recorded.

Repository

The permanent record of your project history. Each commit creates a snapshot that you can return to later.

Tracking Changes with Git (The Git Workflow)

Git maintains a comprehensive ledger of every change in your project—files added, deleted, or modified. Understanding how to tell Git which changes to record is fundamental to effective version control. Each recorded change is called a commit, and mastering this process is essential for professional development workflows.

Here's an illustration of the Git workflow:

Git overall workflow diagram

Before creating a commit, you must explicitly tell Git which files to include—whether they're new untracked files, modified existing files, or deleted files. This deliberate selection process is called staging, and it's one of Git's most powerful features. The staging area acts as a buffer between your working directory and your commit history, giving you precise control over what gets recorded. Consider a common scenario: you're simultaneously fixing a critical bug and experimenting with a new feature across multiple files. The staging area allows you to commit only the bug fix immediately while keeping your experimental changes separate for later review. This granular control prevents incomplete or experimental code from polluting your project's history. Even file deletions must be explicitly staged and committed, ensuring that every change—addition, modification, or removal—is intentionally tracked in your project's timeline.

Check the Status of Your Files

Before making any commits, you need visibility into your repository's current state. Visual Studio Code's integrated Git tools provide an intuitive interface for monitoring file changes and managing your workflow.

  1. Open a project folder in Visual Studio Code.

    You can do this by going to File > Open (Mac) or File > Open Folder (Windows), navigate to your folder, select it, and hit Open (Mac) or Select Folder (Windows).

  2. Open the Source Control panel vscode soure control icon on the left of the window.

  3. In the Source Control panel vscode soure control icon, any modified work will appear under Changes with clear status indicators:

    M = modified     U = untracked     D = deleted

    Pro tip: Within individual files, colored bars appear in the gutter (next to line numbers) to highlight exactly which lines have changed, making code reviews and debugging significantly more efficient.

Opening Your Project in VS Code

1

Access File Menu

Navigate to File > Open (Mac) or File > Open Folder (Windows) from the top menu bar

2

Select Project Directory

Browse to your Git repository folder and select it from the file system dialog

3

Open Source Control

Click the Source Control panel icon on the left sidebar to view your Git status

Git File Status Indicators

M - Modified

Files that have been changed since the last commit. These files exist in Git's history but contain new modifications.

U - Untracked

New files that Git has never seen before. These files need to be added to Git's tracking system.

D - Deleted

Files that have been removed from your working directory. Git needs to record these deletions in its history.

Stage Files to Prepare for Commit

The staging process is where you curate exactly what changes will be included in your next commit. This selective approach is what separates Git from simpler version control systems and enables sophisticated development workflows used by teams at major tech companies.

In the Source Control panel vscode soure control icon:

  • To stage all files, hover over Changes and click the plus (+) that appears to its right.

  • To stage individual files, hover over the file name and click the plus (+) that appears to its right.

  • To unstage a file (if you accidentally staged it), hover over it and click the minus (–) that appears to its right.

Why Staging Matters

Staging allows you to commit only the files that are ready, even when you're working on multiple files simultaneously. This granular control helps create clean, focused commits.

Staging Operations in VS Code

1

Stage All Changes

Hover over 'Changes' section and click the plus (+) button to stage all modified files at once

2

Stage Individual Files

Hover over specific file names and click their individual plus (+) buttons for selective staging

3

Unstage Files

Use the minus (-) button next to staged files to remove them from the staging area if needed

Commit Files

Creating meaningful commits is an art form that distinguishes professional developers. Your commit history tells the story of your project's evolution and serves as documentation for future maintainers—including your future self.

  1. At the top of the Source Control panel vscode soure control icon type in a commit message.

    Professional commit messages follow the imperative mood convention—write as if you're giving instructions to the codebase. Use "Add user authentication" rather than "Added user authentication" or "I added user authentication." This approach aligns with Git's own internal messaging system and creates consistency when working with teams. In collaborative environments, particularly when using pull requests or code reviews, these imperative messages clearly communicate what each change will accomplish when merged. Your colleagues will immediately understand that your commit will "Fix responsive layout bug" or "Update API endpoint configuration."

  2. Execute the commit using one of these methods:

    • Click the Commit button vscode commit icon at the top of the Source Control panel vscode soure control icon.
    • Use the keyboard shortcut: Cmd+Return (Mac) or Ctrl+Enter (Windows) for faster workflow execution.
Commit Message Best Practice

Write commit messages in imperative mood like 'Make headings blue' rather than past tense like 'Made headings blue'. This communicates what your code will do when applied.

Commit Message Style Guide

FeaturePoor ExamplesGood Examples
Tense UsageI made headings blueMake headings blue
SpecificityFixed stuffFix navigation menu overflow
LengthUpdated the entire user interface styling and layout across multiple componentsUpdate user interface styling
Recommended: Use imperative mood, be specific but concise, and focus on what the commit accomplishes.

Pre-Commit Checklist

0/4

Key Takeaways

1Git uses a two-step process of staging and committing to give you precise control over which changes are recorded in your project history.
2The staging area acts as a preparation zone where you can select exactly which files and changes to include in your next commit.
3Visual Studio Code's Source Control panel provides an intuitive interface for managing Git operations without using command line tools.
4File status indicators (M for modified, U for untracked, D for deleted) help you quickly understand what changes Git has detected in your project.
5Commit messages should be written in imperative mood to clearly communicate what the commit will accomplish when applied to the codebase.
6You can stage files individually or all at once, and unstage files if you accidentally include them in your staging area.
7Even file deletions must be staged and committed to maintain an accurate history of your project changes in Git.
8The colored bars next to line numbers in VS Code indicate which specific lines have been modified since your last commit.

RELATED ARTICLES