Git Beginner to Advanced — Part 7

In this section, we will discuss how to check current differences between the content in the working directory and the index (staging area), the working directory and the latest commit (HEAD), and the index (staging area) and the latest commit (HEAD).

Git Diff Commands Explained

Git provides several git diff commands to compare different states of your repository. Below, we will explain git diff, git diff HEAD, and git diff --staged in detail, along with examples.

1. git diff

The git diff command shows changes between the working directory and the index (staging area). This means it displays what has been changed but not yet staged for the next commit.

Example:

Output:

diff --git a/file1.txt b/file1.txt
index 83db48f..e2c62b3 100644
--- a/file1.txt
+++ b/file1.txt
@@ -1 +1 @@
-Old content
+New content

2. git diff HEAD

The git diff HEAD command shows changes between the working directory and the latest commit (HEAD). This includes both staged and unstaged changes.

Example:

Output:

diff --git a/file1.txt b/file1.txt
index 83db48f..e2c62b3 100644
--- a/file1.txt
+++ b/file1.txt
@@ -1 +1 @@
-Old content
+New content

3. git diff --staged (or git diff --cached)

The git diff --staged command shows changes between the index (staging area) and the latest commit (HEAD). This means it displays what has been staged for the next commit but not yet committed.

Get Amit Dhiman’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example:

# Stage some changes
git add file1.txt

Output:

diff --git a/file1.txt b/file1.txt
index 83db48f..e2c62b3 100644
--- a/file1.txt
+++ b/file1.txt
@@ -1 +1 @@
-Old content
+New content

Visual Studio Code Integration

Visual Studio Code (VS Code) has built-in Git integration, making it easy to visualize changes without using the command line.

Viewing Differences in VS Code

1. Open Source Control View:

• Click on the Source Control icon in the Activity Bar on the side of the window.

2. Viewing Unstaged Changes:

• Any modified files will be listed under “Changes”.
• Click on a file to see the differences between the working directory and the staging area.

3. Viewing Staged Changes:

• Stage a file by clicking the “+” icon next to it.
• Once staged, the file will move to the “Staged Changes” section.
• Click on a staged file to see the differences between the staging area and the latest commit.

4. Viewing Changes Against HEAD:

• To view changes between the working directory and HEAD, look at the files listed in both “Changes” and “Staged Changes”.

Example Scenario in VS Code:

1. Initial State:

• You have a file file1.txt with content Old content.

2. Modify File:

• Change file1.txt to New content.

3. View Unstaged Changes:

• In the Source Control view, file1.txt appears under "Changes".
• Click on file1.txt to see the diff.

4. Stage the File:

• Click the “+” icon to stage file1.txt.
• It moves to “Staged Changes”.

5. View Staged Changes:

• Click on file1.txt under "Staged Changes" to see the diff against the latest commit.

Summary

• git diff: Shows changes between the working directory and the staging area.
• git diff HEAD: Shows changes between the working directory (including staged changes) and the latest commit.
• git diff --staged: Shows changes between the staging area and the latest commit.

In VS Code, the Source Control view provides an intuitive interface to see these differences:

• “Changes” section for unstaged changes.
• “Staged Changes” section for staged changes.
• Clicking on files in these sections shows their diffs directly.