VS Code style and appearance for git diff (side by side) [duplicate] - visual-studio-code

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:

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.

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.

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.

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.

I have answered a similar question here.
But basically you can use the following command:
git difftool -x "code --wait --diff"

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

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

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

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:

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

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

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.

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.

Related

Git command for Synchronize changes

In Visual Studio Code there is button Synchronize changes
I think vs code tries to do git pull followed by a git push when there is no merge conflicts.
Or exists special command for synchronize local ↔ remote changes
Which actually commands is calling?
Visual Studio Code do a pull then a push. You can see it by using Show Git Output action, or use View → Output and select Git in the dropdown.
You can find the Show Git Output action in the Command Palette :
Or, in the Source Control tab, click on the three dots and at the bottom of the list you have Show Git Output.

Eclipse: Git how to push after a local commit

I sometimes realize a local commit with Eclipse and then decide to push my project but Eclipse offers me only two solutions "Commit and Push" or "Commit".
The problem is I cannot make a "commit and push" if I haven't changed anything after my "Commit".
Fair enough, I only have to change a line on my code and can push it but it seems to me like an awkward solution. Is there a better way to do so?
You can always just open Eclipse's built-in terminal (or any other terminal app) and execute: git push.
On a side note: getting used to using git on the command line enables you to easily switch between different IDEs and editors without having to re-learn the respective quirks of the git integration of the IDE de jour every time you switch.
In the Package Explorer, Project Explorer, etc. right-click the project folder and choose Team > Push to Upstream.
Alternatively, you can use Quick Access (Ctrl+3) and enter push to upstream (assuming a file of a Git repository is selected or opened).
For a Git main menu and Git icons in the main toolbar, in Window > Perspective > Customize Perspective..., in the tab Action Set Availability check the checkbox Git.

How to do a git fetch in vscode?

I do not see an option to do a git fetch inside vscode Source Control tab.
How can I check what origin remote codes am I pulling and merging into my local source codes?
In View -> Command Palette... you can find many other git commands, including Fetch.
VScode has a setting "git.autofetch" that is enabled to be true by default. This means when you do a git pull from the ... menu, a fetch will be ran prior to the pull. If you set git.autofetch to false, there is no explicit command from the dropdown that will do a fetch for you. You would have to type it in manually.
VSCode 1.67 (Apr. 2022) will make that command more visible with a new menu entry.
(located, as noted by Kilo in the comments, within the "..." menu in the Source Control area.)
See issue 137916 and PR 137940:
The command palette is no longer the only option to find this Git operation.
One alternate way is :
Go to SOURCE CONTROL Tab -> go to REMOTES section and you will be presented with the remote origin and there you have a reload button which also runs git fetch command.

Git shows files changed, but EGit does not

Git noob here. Having a hard time figuring out why git shows some files changed, while Eclipse EGit does not.
When I use EGit within Eclipse and view a project, it shows no files changed. There is no little caret next to each file. When I use Git for Windows, or go to the command line and type "git status", it shows that all the files have been modified. When I type "git diff" it shows two different versions of a file, first red, then green, and there appears to be some whitespace differences, but I can't be sure, and I can't figure out how the whitespace changed in every file in the project. (Something here doesn't add up.) "git diff -w" returns nothing. "git config --global apply.whitespace nowarn" does nothing.
I might be having a basic conceptual problem with git.
In any case, why do EGit and the git command line show different results?
EGit understands the notion of Derived resources (e.g. used for generated .class files in JDT). In other words, files in derived resources are not added to version control by default in EGit. However, the command line git client does not know these markers, but relies on .gitignore files to avoid checking in generated files.
To check whether your problematic files are derived, open the file properties dialog (right click on the file in the explorer, and select Properties...), and on the Resources page check for the Derived checkbox (it should be around the middle of the dialog).
It turns out that git is playing games with newlines. It's inexplicable. Bottom line: EGit and the git command line cannot both be used on a Windows box. To get consistency, you have to use one or the other.

How to force Eclipse's quick diff to refresh after a commit?

I'm using Subclipse 3.0.0 and set my quick diff settings to be against "Prestine SVN copy".
However when I make a commit using the menu option Team -> Commit I still see the old changes coloured in my left side ruller where the line numbers are.
Doing a Refresh on the source tree does not help either. I have to manually close all the opened source files and re-open them for the quick diff to update.
From what I see the reference "Prestine SVN copy" only gets updated when you open a file that is not currently opened. Is there any way to fix this?
In Eclipse, to do SVN clean up
Right Click on Project -> Team -> Refresh/Cleanup option
You also can refer to this to add a keyboard shortcut for this command