How to view changes before committing?

Viewing Changes Before Committing

In the world of Git, one of the most crucial steps in the development workflow is committing changes to the repository. Before you commit your changes, it's essential to review and understand what you're about to commit. This ensures that you're only committing the intended changes and helps prevent unintended consequences or errors.

Git provides several commands that allow you to view the changes before committing them. Let's explore the most common ones:

`git diff`

The git diff command is the primary tool for viewing the changes in your working directory. It compares the current state of your files with the last committed state (the HEAD commit) and displays the differences.

Here's an example of how to use git diff:

$ git diff
diff --git a/file1.txt b/file1.txt
index 1234567..abcdefg 100644
--- a/file1.txt
+++ b/file1.txt
@@ -1,3 +1,4 @@
 This is the first line.
 This is the second line.
-This is the third line.
+This is the updated third line.
+This is a new fourth line.

The output shows the differences between the current state of file1.txt and the last committed version. It highlights the added, modified, and deleted lines.

`git diff --staged`

The git diff --staged command is used to view the changes that have been staged (added to the staging area) but not yet committed.

$ git add file1.txt
$ git diff --staged
diff --git a/file1.txt b/file1.txt
index 1234567..abcdefg 100644
--- a/file1.txt
+++ b/file1.txt
@@ -1,3 +1,4 @@
 This is the first line.
 This is the second line.
-This is the third line.
+This is the updated third line.
+This is a new fourth line.

This command helps you ensure that you've staged the correct changes before committing them.

`git status`

The git status command provides an overview of the current state of your repository. It shows which files have been modified, added, or deleted, as well as which files are staged for the next commit.

$ git status
On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   file1.txt

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   file2.txt

The git status output can help you quickly identify the changes you're about to commit and ensure that you're committing the right set of changes.

Visualizing Changes with Mermaid

To better understand the relationship between the working directory, staging area, and repository, let's use a Mermaid diagram:

graph LR A[Working Directory] -- git add --> B[Staging Area] B -- git commit --> C[Repository] A -- git diff --> C B -- git diff --staged --> C

This diagram illustrates the different states of your files and the commands used to view the changes before committing them.

Practical Example

Imagine you're working on a website project, and you've made several changes to the index.html file. Before committing these changes, you want to review them to ensure that everything looks correct.

First, you can use git diff to see the changes in the working directory:

$ git diff
diff --git a/index.html b/index.html
index 1234567..abcdefg 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,11 @@
 <html>
     <head>
-        <title>My Website</title>
+        <title>Our Awesome Website</title>
     </head>
     <body>
         <h1>Welcome to my website!</h1>
-        <p>This is the content of the website.</p>
+        <p>This is the updated content of the website.</p>
+        <p>We've added a new paragraph.</p>
     </body>
 </html>

You can see that you've updated the title and added a new paragraph to the index.html file. Now, you can use git status to check the current state of your repository:

$ git status
On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")

The git status output shows that you've modified the index.html file, but the changes are not yet staged for commit.

Finally, you can use git diff --staged to verify that you've staged the correct changes:

$ git add index.html
$ git diff --staged
diff --git a/index.html b/index.html
index 1234567..abcdefg 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,11 @@
 <html>
     <head>
-        <title>My Website</title>
+        <title>Our Awesome Website</title>
     </head>
     <body>
         <h1>Welcome to my website!</h1>
-        <p>This is the content of the website.</p>
+        <p>This is the updated content of the website.</p>
+        <p>We've added a new paragraph.</p>
     </body>
 </html>

Now that you've reviewed the changes and are satisfied with them, you can proceed to commit the changes to the repository.

By using these Git commands, you can ensure that you're committing the right changes and avoid potential mistakes or unintended consequences.