Vscode: Support word wrap in the diff editor

[bpasero]

I cannot get word wrapping enabled in a diff editor when using that action but maybe there is no word wrapping for diff editors?

[alexdima]

Yes, word wrapping was never supported in diff editor -- has to do with aligning lines that wrap.

[bpasero]

Got it 👍

[vogler]

It would be nice if the diff editor also respected the word wrap setting.

Another related issue:
Both panes scroll in sync - but only to their content's width instead of the maximum of both panes.
So if I scroll on the left and come to a change where the right version is longer, I have to move the mouse to the right pane in order to be able to scroll to the end of the line.

[Fania]

I work on Latex projects with long paragraphs of text. Find and replace is almost unusable without word wrap. I can see how it wouldn't bother me much on my python projects maybe, but in Latex it's terrible.

[jakearchibald]

I'm a huge fan of vscode, but this is a blocker for me when it comes to using it for diffing.

[matt-cooper]

Is there some way to configure VS Code so that it launches an external Diff Tool instead (e.g. Araxis Merge) as a temporary workaround until this issue is fixed? (Even if I have to manually click a button to launch the the 3rd party diff tool.)

-edit-
I found a solution by adding this to my ~/.gitconfig file:

[mergetool "araxis"]
    path = /Applications/Araxis Merge.app/Contents/Utilities/compare
[diff]
    tool = araxis
[merge]
    tool = araxis

and then installed the "GitDiffer" VSCode extension and now when I right click a file in the Source Control tab of my VSCode window, the "Launch difftool for ..." context menu item will then launch Araxis Merge. Multiple selection doesn't work though (cannot select all changed files and load all of their diffs) but this is a good enough workaround for now.

[Dominik-K]

@alexandrudima If aligning lines is the blocker for this request, then the "flowing lines" diff view

mentioned in #25887 would solve this, right?

[protoEvangelion]

Are there any updates related to this issue?

[yaronyg]

I'm trying to diff MD files and the lack of word wrap support makes it pretty much impossible. :(

[Kappanneo]

Same problem here, can't work on Latex diffs.

[pavelkouril]

Yes, this is a huge issue, makes it unuseable for a lot of diffing. :(

[pumpkinlink]

A good solution about aligning would be to break the line at any character, as opposed to breaking only between words, actually that is how I have my Vim setup, it is good for small screens. Example:

This (breaking always at exactly 80-char):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit r
isus quis pulvinar elementum. Aliquam faucibus nibh in turpis semper mollis. Nul
la euismod diam eu feugiat venenatis. Nullam quis ex vel mi condimentum maximus 
id id massa. Donec felis sem, porttitor at ligula eu, dapibus ultrices ante. Ali
quam quis accumsan arcu. Donec sollicitudin a ante id scelerisque. Aliquam eget 
lectus lectus. Quisque mattis, lectus non auctor auctor, nisi dui accumsan est, 
nec finibus ligula est nec est. Praesent scelerisque in sapien et consequat. Mae
cenas sollicitudin magna augue, quis ultrices urna pulvinar ut. Proin nisi turpi
s, fringilla eget diam eu, gravida iaculis tellus. Etiam et gravida nulla. Ut no
n faucibus lacus. Nulla facilisi.

Instead of this (breaking on last word separator before 80-char):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit 
risus quis pulvinar elementum. Aliquam faucibus nibh in turpis semper mollis. 
Nulla euismod diam eu feugiat venenatis. Nullam quis ex vel mi condimentum 
maximus id id massa. Donec felis sem, porttitor at ligula eu, dapibus ultrices 
ante. Aliquam quis accumsan arcu. Donec sollicitudin a ante id scelerisque. 
Aliquam eget lectus lectus. Quisque mattis, lectus non auctor auctor, nisi dui 
accumsan est, nec finibus ligula est nec est. Praesent scelerisque in sapien et 
consequat. Maecenas sollicitudin magna augue, quis ultrices urna pulvinar ut. 
Proin nisi turpis, fringilla eget diam eu, gravida iaculis tellus. Etiam et 
gravida nulla. Ut non faucibus lacus. Nulla facilisi.

[jakearchibald]

@pumpkinlink I wouldn't mind that as an option, but don't think it should be the default.

I like what Github's split view does https://github.com/w3c/ServiceWorker/pull/1229/files?diff=split.

[nikkifurls]

I would also like to know if there are any updates on this issue. Comparing files is very difficult at the moment due to the lack of word wrap in the Git diff view. Has anyone found any workarounds?

[michou]

@alexandrudima re:

Yes, word wrapping was never supported in diff editor -- has to do with aligning lines that wrap.

The thing is, it doesn't work with inline diffs, either. Don't know if that would be easier to implement, but I'd take this half-solution any time.

<backstory> I was _SO_ thrilled to be able to review code inside VSCode only to stumble on a markdown file with lines long enough to send me back to the browser screaming 😱</backstory>

[slikts]

Is there a better workaround than using an external tool for diffing? It's not exaggeration to say that the current diffing is unusable for use cases like markdown editing.

[liudonghua123]

I like this feature 😃

[lennart-tondeleir]

Word wrap for the diff editor would be very useful indeed...

[robertbenjamin]

+1

[werunom]

Badly need this for tracking latex files

[protoEvangelion]

@bpasero If the decision is that you will not implement this, that is OK 😄
But an update would be nice on whether or not it will make it onto the roadmap.
Thanks for all the fantastic work by the way!!!

[chnmng]

+1

[rtens]

+1

[iliyang]

This would be so awesome to have! I also work on LaTeX projects where every paragraph is a single (looong) line, and it's so frustrating that so few git clients have a word wrapping feature in their side-by-side diff views (and some don't even have side-by-side diffs!). VSCode's git integration is pretty slick already, and having this feature would put the nail in the coffins of dedicated git clients for me. Keeping fingers crossed! 🤞

[wsdou]

Badly need this feature to compare Latex files. @alexandrudima

[fulldecent]

It will be most helpful if the people here can post screenshots of other best-in-class diff editors which do allow diffing of long lines of text.

How do they handle very long lines?

How do they handle scrolling if the left or right side has very different length of content?

[SLKun]

It will be most helpful if the people here can post screenshots of other best-in-class diff editors which do allow diffing of long lines of text.

How do they handle very long lines?

How do they handle scrolling if the left or right side has very different length of content?

I have tried a lot of diff tools. For me, the best tools must be Araxis Merge. The screenshot is presented below:

WinMerge is also a good diff tools for multi-line diff, but some details is not as good as Araxis Merge.

[MagTun]

Here is a printscreen of np++ (which wrap long lines)

[gsanchezu]

I would also love this feature to be implemented, any update on this?

[madacol]

How do they handle very long lines?

Why not treat word wrapping like it already does when there's new lines?

If when wrapped the number of lines differs, the smaller should fill with striped lines to match the bigger

Vscode highlights word differences like the examples given by Summerslyb, but wrapping is what's missing

[inwardmovement]

Any news on this?

[bkarlson]

Anyone here?

[liudonghua123]

Any news on this?

[fkjogu]

Please do not spam the issue tracker.

[elesiuta]

How do they handle very long lines?

How do they handle scrolling if the left or right side has very different length of content?

I like the option already described by madacol, which is also how GitHub's split diff works and was already mentioned by jakearchibald

The compare plugin for Notepad++ also works well and was mentioned, but the screenshot didn't show how it handles scrolling when left and right have different length. It doesn't create empty lines on the opposite side like GitHub's split diff, and instead handles this by syncing the location of the lines where caret/text cursor is when scrolling.

[brunoarruda]

I found a solution by adding this to my ~/.gitconfig file:

[mergetool "araxis"]
  path = /Applications/Araxis Merge.app/Contents/Utilities/compare
[diff]
    tool = araxis
[merge]
    tool = araxis

I configured Git to work with an external Difftool as @matt-cooper suggests, while VS Code doesn't fix this issue. but I used WinMerge instead of Araxis, because its opensource. I didn't need to install GitDiffer extesion because the context menu already had an option for using an external diff tool. For anyone interested, I added WinMergeU.exe to the path on Windows and set the .gitconfig file following instructions here and here:

[mergetool "winmerge"]
    cmd = WinMergeU -e -ub -fm -wl -wr -dl "Local" "$LOCAL" -dm "Base" "$BASE" -dr "Remote" "$REMOTE" -o "$MERGED" -am
    keepBackup = false
[difftool "winmerge"]
    cmd = WinMergeU -e "$LOCAL" "$REMOTE"
[merge]
    tool = winmerge
[diff]
    tool = winmerge

As other people stated here, I missed word wrapping when I started working on a latex project. It is really impracticable to have such large lines rendered as single ones.

[FMuro]

I can understand the difficulties of implementing word wrap in the side by side diff mode, but could we in the meantime get the option of enabling word wrap just in the inline diff mode? I guess this could be done straight away, sort of, and would be a satisfactory solution for many of us dealing with long lines files, e.g. LaTeX.

[leowill01]

It will be most helpful if the people here can post screenshots of other best-in-class diff editors which do allow diffing of long lines of text.

How do they handle very long lines?

How do they handle scrolling if the left or right side has very different length of content?

FileMerge has, I think, an excellent view to base this off of. It is great for diffing prose lines, but that's pretty much all it does AFAIK. I think this is the type of view people are clamoring for to be implemented with respect to wrapping the git diff view in VS Code:

[matt-cooper]

Here's an example in Araxis Merge (as you scroll the lines scroll at different rates so that the middle of both viewports point to equivalent parts of code and the lines connecting the diffs adjust accordingly):

[pmattei]

This feature will be very usefull. Do we have any news on it?

[alikrc]

we are still waiting for this guys

[jxbell]

I also would love to have word wrap in the side-by-side diff editor for Git diffs. I work on a lot of Markdown files with extremely long lines. I use VSCode for MacOS.

[iliyang]

As another example, Diffchecker also supports word wrapping. Here's an example (where the diff view has some extra new lines, but that's probably some bug).

[AlexandreDecan]

I don't understand why this feature is still in the backlog and not planned for an upcoming release of vscode :( At least, could we have some pointers on how we can help on this issue?

[alexeedm]

+1 for the feature. Latex and Jupyter notebooks with long markdown lines are a nightmare to diff in VS Code right now.

[liudonghua123]

It's almost four years about this wanted feature. 😲

[avin-shum]

Actually some formatter do not format code with hard wrap (e.g. C#). Support word wrap in the diff editor is quite essential for those use cases.

[skupjoe]

Was expecting compareit plugin to support word wrapping.
Without it, it's impossible to compare a two single long strings

Please support 👍

[gjsjohnmurray]

Was expecting compareit plugin to support word wrapping.
Without it, it's impossible to compare a two single long strings

@skupjoe this should be reported to the compareit extension author.

[skupjoe]

Also happens on partialdiff

[stagefright5]

This is a necessity. Please take this on priority

[AlonsoGD]

Posting here, this would be very useful. Please add it.

[SergeyMatsiupa]

I also join to this request.
Now I have use because of this some external tools (think that Meld is the best one - so you can take it as an example).

[Nadano]

I made a feature request for a word based diff on vscode, could it be an alternative to what people are asking in this post?

https://github.com/microsoft/vscode/issues/103285

[FMuro]

I made a feature request for a word based diff on vscode, could it be an alternative to what people are asking in this post?

103285

I don't see the relation.

[Nadano]

At least until word wrapping it done it should be possible to work with long lines if you can see the changes inline

[PeteX]

Word diff would be somewhat useful to me, but it's not as important as line wrapping. You get something approximating word diff anyway, because VSCode highlights the changed characters as well as the changed lines.

(The funny thing is that VSCode highlights changed characters but doesn't wrap lines. Atom wraps lines but doesn't highlight changed characters. When comparing documentation files with long lines, you just can't win!)

[frodal]

Instead of using an external diff tool with VSCode, the Rewrap extension can be used to break lines while looking at the diff with VSCode. The extension can be used to break lines at the cursor location by pressing Alt+Q. Rewrap also supports automatic wrapping (off by default) https://github.com/stkb/Rewrap/wiki/Auto-wrap. Rewrap requires no further settings to use. This behavior should be implemented in the diff editor of VSCode.

See also https://stackoverflow.com/questions/43122175/automatically-hard-wrap-lines-at-column-in-vscode/45883430

[SergeyMatsiupa]

Instead of using an external diff tool with VSCode, the Rewrap extension can be used to break lines while looking at the diff with VSCode.

@frodal sorry but looks like it doesn't work properly (for two in-memory documents at least):

[frodal]

@SergeyMatsiupa have you tried changing the settings of Rewrap, e.g., the wrapping column setting?
Here's an example with Latex, I guess it's not perfect.

[technic]

@frodal

This looks nice. Could you provide instructions how to get the wrapping work like on your second screenshot?

[frodal]

@technic see my previous post: https://github.com/microsoft/vscode/issues/11387#issuecomment-687106750

[floschl]

I think the initial intention of this feature request is rather to display the differences of a long line auto-wrapped in a multi-line, without making changes in the code, i.e. inserting new lines. The Rewrap extension seems to insert new lines!?

[pmattei]

I totally approve @floschl objection.
@frodal Thank for your workaround, but it cannot be used in many work situations.
For my example, we work on differents IDE (VScode/emacs/vim)
We already had a debate about the max line code length, with no concensus.
Just one rule, "please, do not commit to only modify code appearance, respect other coworkers work."
So it happend, that I have to review some lines with more than 300 characters.
With your workaround, I should rewrap all modified files before each review, and if I want to propose a diff, I should revert my modifications before. Not really efficient.
Other coworkers do not have this problem on emacs for example.

[Glaeqen]

I'm impressed that this issue just hangs in here for 4 years now.

[bknaepen]

I also would like this feature added...

[piersdeseilligny]

This issue also makes it impossible to diff fountain documents. Although this issue applies to any type of markup really, which means it isn't exactly an edge case or anything.

Why is something like this on the backlog? The original issue has got over 300 likes and was opened when vscode 1.4.0 was released - there's been 46 feature updates since. What other community support would be necessary for this to at least be looked at?

[pmattei]

Can't wait to see it :)

[AlexandreDecan]

Thank you!

[gjsjohnmurray]

@alexdima should this be working in Insiders now? I selected two files in Explorer, chose "Compare Selected", then tried to toggle word wrap from the View menu. It gave me an info notification"Cannot toggle word wrap in a diff editor."

Version: 1.52.0-insider (user setup)
Commit: 050a123750e4ef4009930d0da1ff7a1a6441d4f3
Date: 2020-11-12T05:43:04.852Z
Electron: 9.3.3
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.18363

[alexdima]

@gjsjohnmurray Yes, I've also seen that the toggle action in the View menu does not work yet. Setting word wrap via settings works for now. Let's track in https://github.com/microsoft/vscode/issues/110468