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

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.

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

2. Go to your Git project. Type in:

   git difftool {{branch you want to check with}}, for example git difftool master

3. You will be prompted for each file, if you want to open it in Visual Studio Code or not.

You can achieve this in Visual Studio Code by

1. Opening up settings (On window/linux File > Preferences > Setting. On macOS Code > Preferences > Settings)
2. Search for diff
3. The specific setting is Diff Editor:Render Side by Side. Mark the checkbox.

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"

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.

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 

I have answered a similar question here.

But basically you can use the following command:

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

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

Here's a simple way to view your changes since last commit (on current branch):

1. Click Git icon on left side of VS Code
2. If you've made changes to the file(s) since last commit, you'll see the file(s) listed under "CHANGES"
3. Right click the file name (under "CHANGES") and click "Open Changes"
4. This will open the two versions of the file side by side with the changes highlighted

Here another way to compare against the previous versions.

1. On the Explorer panel.
2. choose a file to compare, then open context menu (right click), then choose Select for Compare.
3. again, open context menu, then select Open Timeline. Wait for loading previous changes.
4. 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.

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:

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 

For more completeness, uncheck the box

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.

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

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.

I think OP question is about opening diff in side-by-side vs inline view mode. Not how to open the diff. Someone mentioned in comment that if you are getting inline view and want to change it to side-by-side you need to:

1. Open the diff(inline view)
2. click on three dots in top right corner
3. Disable "inline view" and Also disable "Use inline view when space is limited" if you want to

You can compare two different branches by choosing "GitLensInspect" > "Search & Compare"

If you can't see it on sidebar do the below:

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).

2. Type Git: Compare Branches.

3. Select the two branches you want to compare.

Once viewing a (any) diff, to view files side-by-side or inline, there is the Compare: Toggle Inline View command that does just that, as @rio was on to above. I wanted to clarify what the command is called (and a comment does not allow images, nor snippets, hence this answer).

So, if you get a diff in inline view and want to view it side-by-side, just hit that command, here in the vs code command palette (ctrl-shift-p):

Command name for keybindings.json is toggle.diff.renderSideBySide:

{ "key": "ctrl+alt+f12", "command": "toggle.diff.renderSideBySide", "when": "textCompareEditorVisible" } 

Hope this helps someone that came looking for this!