Code Diff Tools: Complete Comparison Guide

Code diff tools help you spot changes, review code, resolve conflicts, and verify deployments. Here's everything you need to know.

Git Diff Basics

# Show unstaged changes
git diff

# Show staged changes
git diff --staged

# Compare two commits
git diff abc123 def456

# Compare branches
git diff main feature-branch

# Show only changed files
git diff --name-only

# Word-level diff (better for prose)
git diff --word-diff

Diff Output Explained

diff --git a/file.js b/file.js
index abc123..def456 100644
--- a/file.js
+++ b/file.js
@@ -10,7 +10,7 @@ function greet(name) {
   console.log("Hello " + name);
 }
 
-const user = "John";
+const user = "Jane";
 greet(user);

Key symbols:

• --- = old file
• +++ = new file
• - = removed line (red)
• + = added line (green)
• @@ = line numbers

Visual Diff Tools

Command-Line

• diff: Unix built-in
• git diff: Git's built-in differ
• delta: Modern syntax-highlighted diff
• difftastic: Structural diff (understands syntax)

GUI Tools

• Meld: 3-way merge tool (Linux/Mac/Windows)
• Beyond Compare: Professional diff/merge (paid)
• Kaleidoscope: Mac-native diff tool
• VS Code: Built-in diff viewer

Merge Conflict Resolution

<<<<<<< HEAD
const API_URL = "https://prod.api.com";
=======
const API_URL = "https://dev.api.com";
>>>>>>> feature-branch

Resolution steps:

1. Identify conflict markers (<<<<<<<, =======, >>>>>>>)
2. Decide which change to keep (or merge both)
3. Remove conflict markers
4. Test the code
5. Commit the resolution

Diff Best Practices

• ✅ Review diffs before committing
• ✅ Use unified diff format for readability
• ✅ Split large changes into smaller commits
• ✅ Use git add -p for interactive staging
• ❌ Don't commit without reviewing diff
• ❌ Don't mix refactoring and features in one commit

← Back to Blog