Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Visual Studio Code as the default editor for Git MergeTool

Today I was trying to use the git mergetool on the Windows command prompt and realized that it was defaulting to use Vim, which is cool, but I'd prefer VS Code.

How can I have Visual Studio Code function as my GUI for handling merge conflicts (or even as a diffing tool) for Git?

Is it possible to setup VS Code to get visuals for a three-way merge?

like image 365
Eric D. Johnson Avatar asked Jun 14 '17 16:06

Eric D. Johnson


People also ask

How do I change the editor on VS Code?

Settings editor# To open the Settings editor, use the following VS Code menu command: On Windows/Linux - File > Preferences > Settings. On macOS - Code > Preferences > Settings.


3 Answers

Update: As of Visual Studio Code 1.70 Three-way merge with improvements were added. Visuals and further explanations are available if that's of interest to you 😉.

As of Visual Studio Code 1.13 Better Merge was integrated into the core of Visual Studio Code.

The way to wire them together is to modify your .gitconfig and you have two options.

  1. To do this with command line entries, enter each of these: (Note: if on Windows Command Prompt replace ' with ". Thanks to Iztok Delfin and e4rache for helping clarify this.)

    1. git config --global merge.tool vscode
    2. git config --global mergetool.vscode.cmd 'code --wait --merge $REMOTE $LOCAL $BASE $MERGED'
    3. git config --global diff.tool vscode
    4. git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'
  2. To do this by pasting some line in the .gitconfig with Visual Studio Code.

    • Run git config --global core.editor 'code --wait' from the command line.

    • From here you can enter the command git config --global -e. You will want to paste in the code in the "Extra Block" below.

        [user]
            name = EricDJohnson
            email = [email protected]
        [gui]
            recentrepo = E:/src/gitlab/App-Custom/Some-App
        # Comment: You just added this via 'git config --global core.editor "code --wait"'
        [core]
            editor = code --wait
        # Comment: Start of "Extra Block"
        # Comment: This is to unlock Visual Studio Code as your Git diff and Git merge tool
        [merge]
            tool = vscode
        [mergetool "vscode"]
        # Comment: Original way before three-way merge shown commented out
        #    cmd = code --wait $MERGED
        # Comment: For "Three-way merge"
            cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED
        [diff]
            tool = vscode
        [difftool "vscode"]
            cmd = code --wait --diff $LOCAL $REMOTE
        # Comment: End of "Extra Block"
      

Now from within your Git directory with a conflict run git mergetool and, tada, you have Visual Studio Code helping you handle the merge conflict! (Just make sure to save your file before closing Visual Studio Code.)

Accept Incoming Change anyone?

For further reading on launching code from the command line, look in this documentation.

For more information in git mergetool check out this documentation.

like image 76
Eric D. Johnson Avatar answered Oct 16 '22 22:10

Eric D. Johnson


I had to replace the double quotes with simple quotes:

  git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

for it to work properly (with double quotes, $LOCAL and $REMOTE are replaced by their values).

This is needed if you are using Git Bash for Windows instead of Windows Command Prompt.

like image 32
e4rache Avatar answered Oct 16 '22 21:10

e4rache


On top of the excellent existing answer, you should open VS Code in a new window by adding -n to the command line.

So your git config --global --edit looks something like this.

[merge]
        tool = vscode
[mergetool "vscode"]
        cmd = code --new-window --wait $MERGED
[diff]
        tool = vscode
[difftool "vscode"]
        cmd = code --new-window --wait --diff $LOCAL $REMOTE                                                    
like image 22
mvd Avatar answered Oct 16 '22 23:10

mvd