Skip to content

moshfeu/vscode-diff-merge

Repository files navigation

🌅🌅 This extension is (almost) not needed anymore 🌅🌅

Since vscode has 3 way merge built-in, and even a better one, this extension is no longer needed.

I keep the extension and the source code for education and refrences only.

Build Status contributions welcome The MIT License GitHub Visual Studio Marketplace Follow me on Twitter

Diff & Merge!

Show diffs and allow mergeing from left side to right side.

This extension is maintained on my free time. I'm only fixing / developing features requested by the community.

🧙‍♂️ Notice that I (and seems that many others) couldn't find an easy way to implement such feature. Therefor, the user experience may not be perfect. The colors, fonts, icons, shortcuts and other UI elements may not be the same as vscode's.

Screen Shot of the extension

👂I would love to hear your feedback to improve this tool

Found a bug? Have an extra ordinary idea? Please create an issue

Features

1. Diff and merge - file against file

explorer - context

Or

File against selected file (#40)

How to use?

  1. Right click on a file [1] in explorer panel or on an editor tab
  2. Click [Diff & Merge] Select file to compare
  3. Right click on another file or an editor tab
  4. Click [Diff & Merge] Compare file with selected file

2. Diff and merge - file against clipboard (#25)

How to use?

  1. Right click on a file [1] in explorer panel
  2. Click [Diff & Merge] Choose a file to merge
  3. Choose a file [1] to compare

3. Diff and merge - git - file against older version

source control - context

How to use?

  1. Right click on a file [1] in the source control panel under Changes (staged files are not editable anyway)
  2. Click on [Diff & Merge] Open Changes

4. Diff and merge - svn - changes (tested with the svg extension)

source control - svn

  1. Right click on a file [1] in the source control panel under Changes (staged files are not editable anyway)
  2. Click on [Diff & Merge] Open Changes

4. Diff and merge - from scratch

How to use?

  1. Open commmand palette (Command / Ctrl + Shift + P)
  2. Search for [Diff & Merge] Blank diff view
  3. An empty diff view will opened. Paste a code in both sides and compare

[1] - Make sure that the file is text based (not images, binaries, pdfs etc.)

To Do

  • Add save button next to the diff navigator buttons
  • Add "Go to original file" next to the save button
  • Allow to change the "save" key binding
  • Focus the tab when asking to compare a file that already open
  • Add option to ignore files by pattern (?)

Known issues

  • Context menu shows up for non text based files (binary etc.)
  • Diff editors theme has different look & feel than current theme (monaco is not fully competiable with vscode theme)
  • Left editor can be edited (to allow copy/paste for example) but can't saved
  • When first comparing, the theme configuration file appearing for a moment - meant to retrive theme variables for the diff view theme
  • [API limitation] For single comparing - left editor is editable but can't be saved
  • [API limitation] Draft indication is next to the "x" icon but not on top of it
  • [API limitation] Save is only with ctrl / cmd + s. There is no API to listen to "Save" event or getting the current save key binding
  • [API limitation] File > Save is disabled
  • [API limitation] When moving from dark to light theme, opened windows doesn't refreshed

Development

yarn
cd resources/monaco
yarn
cd ../../
yarn webview:watch

Hit F5

To run the diff view directly in the browser

  1. yarn webview:watch
  2. yarn monaco (in different terminal)
  3. Go to http://localhost:12345/wrapper.html

Credits

Icons made by Pixel perfect from www.flaticon.com

Thanks

@evilrix
@bedge
@evilrix

I would love to have you in this list :)