How can I see 'git diff' on the Visual Studio Code side-by-side file?
GitVisual Studio-CodeGit DiffGit DifftoolGit Problem Overview
Git Solutions
Solution 1 - Git
In Visual Studio Code, on the left side, there is a Git icon that looks like this:
https://raw.githubusercontent.com/microsoft/vscode-icons/master/icons/light/source-control.svg" />
By clicking on this icon, then double-clicking one of the files listed under Changes you can see the Git difference in two sides.
Solution 2 - Git
If you want to see the diff changes from different branches, there is some extra work. For example you want to see all the changes from last N commits in your Feature branch.
-
Set up Visual Studio Code to be your default difftool by adding this in your ~/.gitconfig file.
[diff] tool = vscode [difftool "vscode"] cmd = code --wait --diff $LOCAL $REMOTE
-
Go to your Git project. Type in:
git difftool {{branch you want to check with}}, for example git difftool master
-
You will be prompted for each file, if you want to open it in Visual Studio Code or not.
Solution 3 - Git
You can achieve this in Visual Studio Code by
- Opening up settings (On window/linux File > Preferences > Setting. On macOS Code > Preferences > Settings)
- Search for diff
- The specific setting is Diff Editor:Render Side by Side. Mark the checkbox.
Solution 4 - Git
After hours of searching, installing and uninstalling extensions, it seems this is already implemented in VSC.
Just click on the top right icon - "Open changes"
And go back to seeing only the file, not the changes, by clicking on the... top right icon - "Open file"
Solution 5 - Git
If you want to compare between two arbitrary references - for example comparing between branch and branch, or a commit and another commit - and still view all files in one shot easily just like we see the index changes.
- Install the GitLens extension
- Go to the Source control in the left pane. If you don't have the icon then you can look under menu View -> SCM (Show source control) or use the defined shortcut.
- Expand the last section Search & Compare
- Click on button Compare References...
- Pick the references, and then you will see the list of changed files and clicking one file will show its changes side to side.
Solution 6 - Git
Here's a simple way to view your changes since last commit (on current branch):
- Click Git icon on left side of VS Code
- If you've made changes to the file(s) since last commit, you'll see the file(s) listed under "CHANGES"
- Right click the file name (under "CHANGES") and click "Open Changes"
- This will open the two versions of the file side by side with the changes highlighted
Solution 7 - Git
Open file ~/.gitconfig
in Visual Studio Code:
code ~/.gitconfig
Copy the following lines in ~/.gitconfig
:
[diff]
tool = default-difftool
[difftool "default-difftool"]
cmd = code --wait --diff $LOCAL $REMOTE
Save the changes. Open a terminal in Visual Studio Code by running Ctrl + Shift + `. Run the following command in the terminal:
git difftool master origin/master
Solution 8 - Git
I have answered a similar question here.
But basically you can use the following command:
git difftool -x "code --wait --diff"
Solution 9 - Git
You can diff
any two files by first right clicking on a file in the EXPLORER or OPEN EDITORS list and selecting Select for Compare and then right-click on the second file to compare with and select Compare with <file_name_you_chose>.
Alternatively from the keyboard hit Ctrl + Shift + P and select menu File → Compare Active File With... and you will be presented with a list of recent files. Example:
Solution 10 - Git
toggle inline view now is available (on the 3 dots)
Solution 11 - Git
Vscode itself is able to show differences between any two files:
code --diff file1.txt file2.txt
i believe this is independent from git diff
feature.
Solution 12 - Git
For a quick single file diff view in VSCode without further integrated navigation and edit experience you can configure and use the git difftool
as explained by other answers - or more safe (and global) like this:
git config --global difftool.vscode.cmd "code --wait --diff $LOCAL $REMOTE"
git config --global diff.tool vscode # optionally as default
For a fully integrated experience for such kind of custom diff in VSCode do like this:
# possibly commit or stash a dirty work tree before switching
git switch origin/master --detach # new master in worktree
git reset master # old master as detached HEAD (diff base)
Now you can see and use this "custom diff" as usual in VSCode - as a diff of worktree vs. HEAD : Use the git SCM icon, double/right-click on file changes, toggle inline diff view, etc. .
Now you can even work directly on that worktree right in the diff view. To make a commit of such changes do like:
git reset origin/master # base for added changes only
# review the bare added delta again (in VSCode)
git add/commit ...
git branch/tag my_master_fixup # name it
Then merge the new master as usual, switch back to feature branch, possibly cherry-pick the my_master_fixup, rebase or whatever ..
Solution 13 - Git
From v1.48 release notes:
> As you navigate the Source Control view, pressing Space on a change > will now open it as a preview editor and keep the focus in the Source > Control view, for easier keyboard navigation.
So you could downarrow through your scm file changes and hit Space to open a diff view.. Focus remains in the SCM view so you could keep doing this.