How can I see 'git diff' on the Visual Studio Code side-by-side file?

Question

I would like to know how to see as a file with the command git diff master origin/master in the terminal on Visual Studio Code.

I did a git fetch from my remote repository, and now I want to see the diff, but with the command just show me in the terminal.

Example of what I want:

score 257 · Accepted Answer · edited Dec 30 '20 at 20:03

257

In Visual Studio Code, on the left side, there is a Git icon that looks like this:

By clicking on this icon, then double-clicking one of the files listed under Changes you can see the Git difference in two sides.

edited Dec 30 '20 at 20:03

Community

1
1

answered Jul 13 '18 at 04:07

Ratan Uday Kumar

5,738
6
35
54

39

For completeness, since not everyone has the icons showing, look under menu View ->SCM (Show source control) `ctrl-shift-G` – Out of Control Mar 12 '19 at 15:27
1

You can also open the preview using the keyboard shortcut `⌘K V` as documented in [VSCode keybindings](https://code.visualstudio.com/docs/getstarted/keybindings). – Michael Behrens Mar 27 '20 at 20:43
I don't see this icon on my vscode menu is this a plugin? – Quentin Gibson Jul 10 '20 at 04:08
3

[icon was updated](https://raw.githubusercontent.com/microsoft/vscode-icons/master/icons/light/source-control.svg) – llobet Aug 26 '20 at 09:54
How to know what are we seeing on left and right panels? (working tree, index, some specific branch, ...)? – golimar Sep 14 '20 at 13:48
39

Your answer does not work for any diff. This only works to show diffs for current changes against the latest commit. – blindguy Oct 08 '20 at 19:16
@blindguy yaa my answer only for showing the difference in Vscode and actually question was also for it. – Ratan Uday Kumar Oct 09 '20 at 04:39
Important Tip: If you do this and the diff is shown to you as in-line instead of side-by-side, then click on the button w/ 3 dots in the top right and click 'Inline-View'. You should now see the diff shown as side-by-side. (You can also instead toggle the diff view by following [these instructions](https://stackoverflow.com/a/59416159/13255028)). – jaquinocode Oct 24 '21 at 21:53
15

This should not be the accepted answer since it is only showing the changes not committed yet – O.k Feb 22 '22 at 10:00

score 88 · Answer 2 · edited Jan 21 '20 at 14:56

88

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.

edited Jan 21 '20 at 14:56

Peter Mortensen

30,738
21
105
131

answered May 21 '19 at 11:38

Boncho Valkov

1,319
10
10

14

Is there a way we can see the list of all files to diff in visual studio code instead of opening one by one (like how we see by clicking the git icon on the left side panel of visual studio)? – Sathya Mar 17 '20 at 16:18
2

Related VS Code docs: https://code.visualstudio.com/docs/editor/versioncontrol#_vs-code-as-git-diff-tool – ford04 Aug 11 '20 at 07:39
3

@Sathya once you are done with settings shared by Boncho git difftool --dir-diff should do the work or you can use alias [alias] df = difftool --dir-diff in your config file – Mr.Ali Nov 17 '20 at 06:43
2

There is also existing a nice visual code plugin 'git-tree-compare' that shows your diff changes to a specific reference branch. See: https://marketplace.visualstudio.com/items?itemName=letmaik.git-tree-compare – ruuns Jan 02 '21 at 12:22
1

as a one-off command, vscode itself can be used to compare two files: `code --diff file1.txt file2.txt` – Ryan Norooz Nov 02 '21 at 05:47
Piping to `code -` works for one time use. `git diff some_tag_or_branch | code -` – Jacob Phillips May 21 '23 at 14:34

lboyel · Answer 3 · 2020-01-22T20:28:37.247

38

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.

edited Jan 22 '20 at 20:28

answered Dec 19 '19 at 19:56

lboyel

1,930
4
27
37

Can you be more specific? How do you *"open up settings"*? The "gear" icon in the lower left? Something else? Respond by [editing your answer](https://stackoverflow.com/posts/59416159/edit), not here in comments. – Peter Mortensen Jan 21 '20 at 15:06
If you have a pending update - try restarting visual code after changing this setting. I had one and changing only worked after the update – StackUnder Sep 01 '20 at 18:44
@PeterMortensen, almost a year passed, but maybe someone will find it helpful. Anyways, on Windows you press `CTRL+P`, then `>` and then type `Settings`, menu rolls down, and I would look for UI menu option. – Gabrielius Oct 13 '20 at 13:11
@PeterMortensen `CTRL+,` – Giulio Aug 15 '21 at 08:07
1

This should be the top answer IMO. Its exactly what I was looking for anyways. – JΛYDΞV May 22 '22 at 23:42
It seems that the accepted answer assumes that this parameter is on. – heringer Oct 19 '22 at 15:21

score 30 · Answer 4 · answered Apr 03 '20 at 14:41

30

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"

answered Apr 03 '20 at 14:41

adrianvintu

1,041
10
7

3

How to open all changed files in one tab – VityaSchel Feb 05 '22 at 20:22
1

You can also select "Git: Open Changes" from the command palette – Ryan Jul 22 '22 at 22:50

ehab · Answer 5 · 2021-08-11T05:54:30.940

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.

Gomino · Answer 6 · 2020-01-22T09:33:19.313

13

I have answered a similar question here.

But basically you can use the following command:

git difftool -x "code --wait --diff"

edited Jan 22 '20 at 09:33

answered Nov 21 '19 at 20:21

Gomino

12,127
4
40
49

It is referring to a (deleted) answer to this question. – Peter Mortensen Jan 21 '20 at 15:02

score 10 · Answer 7 · edited Jan 21 '20 at 15:09

10

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

edited Jan 21 '20 at 15:09

Peter Mortensen

30,738
21
105
131

answered Nov 05 '19 at 13:50

Abdollah

4,579
3
29
49

score 9 · Answer 8 · edited Feb 06 '20 at 13:40

9

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

edited Feb 06 '20 at 13:40

quinz

1,282
4
21
33

answered Feb 06 '20 at 12:40

billygarrison

103
1
5

score 6 · Answer 9 · answered Aug 09 '20 at 15:22

6

toggle inline view now is available (on the 3 dots)

answered Aug 09 '20 at 15:22

rio

685
9
16

score 4 · Answer 10 · edited Jan 21 '20 at 14:46

4

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:

edited Jan 21 '20 at 14:46

Peter Mortensen

30,738
21
105
131

answered Jul 13 '18 at 04:08

Nitin Bisht

5,053
4
14
26

6

First, the question clearly asks about git diff in which case there will not be two files, rather only one. Second, you need to install another extension in VS Code, like "compareit" for enabling the option "Select for Compare" and "Compare with Selected". – KatariaA Jul 30 '19 at 13:19
@KatariaA: For the second point: It seems to be installed by default (Visual Studio Code 1.41.1 (on Ubuntu 19.10)). Can you confirm? – Peter Mortensen Jan 21 '20 at 14:48
1

@PeterMortensen Yes it's there, no need for an extension: https://code.visualstudio.com/docs/editor/versioncontrol#_viewing-diffs – rmcsharry Feb 07 '21 at 20:10

score 3 · Answer 11 · answered Nov 02 '21 at 02:47

3

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.

answered Nov 02 '21 at 02:47

Ryan Norooz

1,358
1
12
8

score 2 · Answer 12 · answered Nov 15 '20 at 12:16

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 ..

score 1 · Answer 13 · answered Jun 04 '22 at 17:15

To make this answer work, we must follow a few steps, which, despite having been already repeated in previous answers, I'll rewrite them for sake of completeness.

Open the file ~/.gitconfig, and add the following lines:

[diff]
    tool = default-difftool
[difftool "default-difftool"]
    cmd = code --wait --diff $LOCAL $REMOTE

In some of the answers, the next suggested step is doing git difftool <local_branch> origin/<remote_branch>.

However, there's also another possibility:

git fetch origin <remote_branch>
git difftool FETCH_HEAD

Also, to prevent those annoying prompts from showing up, we can always do:

git config --global difftool.prompt false

score 1 · Answer 14 · answered Nov 04 '22 at 20:56

1

Here another way to compare against the previous versions.

On the Explorer panel.
choose a file to compare, then open context menu (right click), then choose Select for Compare.
again, open context menu, then select Open Timeline. Wait for loading previous changes.
On the Timeline tab, you can select a previous version and open the context menu and click Compare with Selected.

Then you will see diff files side by side.

answered Nov 04 '22 at 20:56

Jaider

14,268
5
75
82

For me the diff is always the same (most recent) file. But this would be a really nice workflow. – ahfx Jul 04 '23 at 22:16

score 0 · Answer 15 · answered Aug 09 '20 at 16:21

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.

How can I see 'git diff' on the Visual Studio Code side-by-side file?

15 Answers15

Vscode itself is able to show differences between any two files:

Linked

Related