Stage & Commit Files

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:

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 on the left of the window.

3. In the Source Control panel , 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.

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 :

• 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.

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 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 at the top of the Source Control panel .
   • Use the keyboard shortcut: Cmd+Return (Mac) or Ctrl+Enter (Windows) for faster workflow execution.