Better Diff Viewer

View Git diff in a colorful HTML page via Diff2Html-UI.

Dark Mode (v0.0.8)

Light Mode (v0.0.1)

Rationale

Creating a similar diff view panel to Source Tree. The aim is to add most of the features which Source Tree diff viewer can do. For example, view Diff in HTML, revert a file ...

Features

• View .diff/.patch or git diff in Diff2HTML-UI
• View diff for uncommitted changes
• View staged changes (to be committed)
• Stage a file directly from the diff view
• Unstage a file directly from the staged diff view
• Switch between Uncommitted and To be Committed via a toolbar dropdown
• View commit history for a specific file and inspect any commit's diff scoped to that file
• Editor title bar icon to instantly toggle the current file's diff view — click once to open, click again to close
• Dark/light/auto mode support
• Diff2Html-UI user configurable settings
• Trigger content refresh manually
• Open a file in editor
• Revert a file
• Copy file path
• Toggle show/hide the command (i.e., git command), which was used to generate the diff result
• Support custom styling - better support for unknown themes
• Support custom user commands, which can be defined by user
• Store users view actions (i.e., remember viewed button for files)
• Zoom in/out
• Triggering extension commands from bottom toolbar
• Specify panel location (i.e. in editor or panel)
• View content of a GIT commit
• Support hunk action - e.g. revert, stage, or unstage individual hunks
• Binary file protection - large binary patches are automatically excluded to prevent renderer hangs
• Configurable max diff lines per file to handle very large diffs
• Filter files in the diff view by name with autocomplete dropdown
• Smart tab placement — opens in the rightmost split when multiple editor groups exist, otherwise opens beside
• Git log tree panel -- toggle with the branch icon in the toolbar to browse all-branch commit history and click any commit to view its diff; commits load lazily (20 at a time) as you scroll

Commands

• better-diff-viewer.viewDiffFile: view diff for current .diff/.patch file
• better-diff-viewer.viewRepoGitDiff: view Git diff for current repository (uncommitted changes)
• better-diff-viewer.viewStagedChanges: view staged changes (to be committed)
• better-diff-viewer.viewGitDiffForFile: view Git diff for current file
• better-diff-viewer.viewCustomDiffFromCmd: view diff from a custom command on current repository
• better-diff-viewer.viewChangesInCommit: view changes in a selected commit
• better-diff-viewer.viewChangesBetweenCommits: view changes between two selected commits
• better-diff-viewer.toggleFileDiff: toggle the diff view for the currently active file (also available as an icon in the editor title bar)

Settings

Command	Default Value	Description
better-diff-viewer.isAutoRefresh	true	Toggle if the view needs to be refreshed when any file get saved
better-diff-viewer.showBtnIcon	true	Show button icon
better-diff-viewer.showBtnLongDesc	true	Show button long description
better-diff-viewer.showBtnShortDesc	false	Show button short description (for saving spaces)
better-diff-viewer.customCssStyle	''	Add custom CSS style for the diff viewer. Please add in one line. For example: ".d2h-file-name{color:cyan !important;}"
better-diff-viewer.preserveViewedFileState	true	Preserve viewed checkbox state after diff viewer refresh
better-diff-viewer.enableRevertHunk	true	Support revert selected hunk
better-diff-viewer.showCmd	true	Set the default visibility of the command which used to generate the diff output. The cmd is shown at the bottom of the page
better-diff-viewer.zoomNum	0.9	Set default zoom level for the viewer
better-diff-viewer.showRevertFileWarning	true	Display a warning when reverting a file
better-diff-viewer.maxDiffLinesPerFile	3000	Maximum lines shown per file in the diff view; files exceeding this limit are truncated. Binary patch data always excluded
better-diff-viewer.componentsDisplayAtEditor	["diffViewer"]	Components display at editor section - reload required
better-diff-viewer.componentsDisplayAtPanel	[]	Components display at panel section - reload required
better-diff-viewer.diff2html-ui.outputFormat	'line-by-line'	'line-by-line' or 'side-by-side'; A Diff2Html option
better-diff-viewer.diff2html-ui.drawFileList	true	A Diff2Html option
better-diff-viewer.diff2html-ui.srcPrefix	''	A Diff2Html option
better-diff-viewer.diff2html-ui.dstPrefix	''	A Diff2Html option
better-diff-viewer.diff2html-ui.diffMaxChanges	undefined	A Diff2Html option
better-diff-viewer.diff2html-ui.diffMaxLineLength	undefined	A Diff2Html option
better-diff-viewer.diff2html-ui.diffTooBigMessage	N/A	A Diff2Html option
better-diff-viewer.diff2html-ui.matching	'lines'	'lines', 'words' or 'none'; A Diff2Html option
better-diff-viewer.diff2html-ui.matchWordsThreshold	0.25	A Diff2Html option
better-diff-viewer.diff2html-ui.maxLineLengthHighlight	10000	A Diff2Html option
better-diff-viewer.diff2html-ui.diffStyle	'word'	A Diff2Html option
better-diff-viewer.diff2html-ui.renderNothingWhenEmpty	false	A Diff2Html option
better-diff-viewer.diff2html-ui.matchingMaxComparisons	2500	A Diff2Html option
better-diff-viewer.diff2html-ui.maxLineSizeInBlockForComparison	200	A Diff2Html option
better-diff-viewer.diff2html-ui.compiledTemplates	{}	A Diff2Html option
better-diff-viewer.diff2html-ui.rawTemplates	{}	A Diff2Html option
better-diff-viewer.diff2html-ui.highlightLanguages	N/A	A Diff2Html option
better-diff-viewer.diff2html-ui.colorScheme	'auto'	'light', 'dark' or 'auto'; A Diff2Html option values. The 'auto' will use the VSCode color schema
better-diff-viewer.diff2html-ui.synchronisedScroll	true	A Diff2HtmlUI option
better-diff-viewer.diff2html-ui.highlight	true	A Diff2HtmlUI option
better-diff-viewer.diff2html-ui.fileListToggle	true	A Diff2HtmlUI option
better-diff-viewer.diff2html-ui.fileListStartVisible	false	A Diff2HtmlUI option
better-diff-viewer.diff2html-ui.fileContentToggle	true	A Diff2HtmlUI option
better-diff-viewer.diff2html-ui.stickyFileHeaders	true	A Diff2HtmlUI option

Installation

Install from Visual Studio Marketplace

Install from Open VSX Registry (for code-server, VSCodium, and other open-source VS Code builds)

code-server / VSCodium: search for SamWang.better-diff-viewer in the Extensions panel, or download the .vsix from GitHub Releases and use Extensions: Install from VSIX....

Thanks to Diff2Html

Goto Diff2Html

Author

Sam Wang - https://liveinaus.com

LICENSE

GNU General Public License v3.0

Enjoy!