DEV Community

Cover image for I Built a VS Code Extension That Shows What Changed Since Your Last Save (No Git Needed)
John Wick
John Wick

Posted on

I Built a VS Code Extension That Shows What Changed Since Your Last Save (No Git Needed)

| SavePoint Diff adds live gutter markers and a Source Control panel for your unsaved edits, in any folder, Git repo or not.

Open a file in VS Code inside a Git repo and you get those handy colored bars in the gutter. Green for added, blue for modified, red for deleted.

Now open a scratch script, a config folder, or a project you never ran git init on. Nothing. You're editing blind.

That's why I built SavePoint Diff.

What it does

It shows what you've changed since your last save, live, on every keystroke:

  • 🟢 Green = added lines
  • 🔵 Blue = modified lines
  • 🔴 Red = deleted-line markers

SavePoint Diff demo

It also adds a SavePoint Diff entry to the Source Control panel listing every open file with unsaved changes, with a Save All button at the top and a save icon per file. Click any file and VS Code's native split diff opens: last-saved version on the left, your live editable buffer on the right.

No setup

  • No .git folder required
  • No network access
  • No account, no telemetry, no external services

Install it, open a file, start typing. Markers appear immediately and clear the moment you save.

Other bits I'm happy with

  • "M" badges on changed files in the Explorer and on editor tabs
  • Per-change revert: hover a gutter marker and click "↺ Revert this change"
  • Live status bar tally: SavePoint: ON +12 ~4 -2

Try it

ext install StayElite.StayElite-Savepoint-Diff
Enter fullscreen mode Exit fullscreen mode

Paste that into Quick Open (Ctrl+P), or grab it from the Marketplace. It's MIT licensed and the source is on GitHub.

If you try it, I'd love to hear what's missing. Issues and ideas are very welcome.

Top comments (0)