How to set VS Code as your Git editor, difftool, and mergetool
Tags: webdev, git, vscode, productivity
Published: 2020-09-15 11:01:13

Do you use *VS Code* as your default Git Editor, or as your Git Diff Tool? Should you?

Let's look at the potential benefits of using *VS Code* as a fully-fledged Git partner, and how you can do it.

**Table of Contents**
- [TLDR](#tldr)
- [Why should you make *VS Code* your default Git Editor, Diff Tool, or Merge Tool?](#why-should-you-make-vs-code-your-default-git-editor-diff-tool-or-merge-tool)
- [Prerequisite](#prerequisite)
- [Make VS Code your default Editor](#make-vs-code-your-default-editor)
- [Make VS Code your default Diff Tool](#make-vs-code-your-default-diff-tool)
- [Make VS Code your default Merge Tool](#make-vs-code-your-default-merge-tool)
- [Conclusion](#conclusion)

## TLDR

To make *VS Code* your default for everything git-related, first you need to ensure you can run *VS Code* from the command-line as outlined in the [Prerequisite](#prerequisite) section.

Then, run the command `git config --global -e` to edit the global config, and add the following:

```
[core]
  editor = code --wait
[diff]
  tool = vscode
[difftool "vscode"]
  cmd = code --wait --diff $LOCAL $REMOTE
[merge]
  tool = vscode
[mergetool "vscode"]
  cmd = code --wait $MERGED
```

If you want to see how a Git edit, diff, or merge looks in *VS Code*, jump to the corresponding section to see screenshots.

## Why should you make *VS Code* your default Git Editor, Diff Tool, or Merge Tool?

It's a personal choice! There are *so* many options out there. Above all else, your tools should complement your workflow and not impede you.

I'll explain my decision and maybe it will give your some insight in to understanding what works best for you. In a sentence, I prefer to do as much as I can in my code editor.

Here are the situations where I have encountered friction or have an alternate preference:
1. If I am executing an interactive git command that requires input from me to edit and review a chunk of text, I would prefer to stay in my code editor and stay in the same mental mode.
1. I haven't used some of the Linux command-line tools associated with Git such as *Nano* enough to get the necessary muscle memory,  I forget commands quickly!🙈 It can be a flow-buster.
1. I prefer less switching between applications generally. I would prefer to switch to another tab of my code editor rather than a separate window.
1. For diffing, I prefer doing it in a GUI.
1. Some merge conflicts are demanding, I like to jump to source files to get the complete picture, I can use familiar shortcuts if I can do it in *VS Code*.
1. If I can do it all in my code editor, I have a consistent colour theme without further configuration.

## Prerequisite

You need to ensure you can run *VS Code* from the command-line before you can make it a default Editor, Diff Tool, or Merge Tool. It is possible that this wasn't done as part of your installation.

To test this, run the command `code --help` from the command line. If you did not see some help output, it means you currently can't run *VS Code* from the command-line. 

You  can follow these steps to rectify that:

- Windows: You need to edit the Environment Variables, and add the location of your *VS Code* installation to the *PATH* variable. Or you could re-install and ensure that the it happens through the wizard (there is an option).
- macOS: Select `Shell Command: Install 'Code' command in path` from the Command Palette.
- Linux: Make sure you installed *VS Code* via a *.deb* or *.rpm* package.

## Make VS Code your default Editor

The default Git Editor is [*Nano*](https://www.nano-editor.org/).

This is how *Nano* looks for a commit message.

![nano commit](https://dev-to-uploads.s3.amazonaws.com/i/c77eu5ohl1cdavs0h2wc.png)

This is how *VS Code* looks for a commit message.

![vscode commit](https://dev-to-uploads.s3.amazonaws.com/i/i3xthie5lfc1fzlacaek.png)

### Configuration

To update your git configuration, run the following command:

```bash
git config --global core.editor 'code --wait'
```

If you prefer that a new window opens each time, add the `--new-window` code flag:

```bash
git config --global core.editor 'code --wait --new-window'
```

If you only want to change it for your current project, run the same command without the *--global* git flag.

Unhappy and want to go back?


```bash
git config --global --unset core.editor
```

## Make VS Code your default Diff Tool

The default Diff Tool is [*vimdiff*](https://www.tutorialspoint.com/vim/vim_diff.htm).

Specifying a Diff Tool affects the `git difftool` command. The command `git diff` still performs diffing on the command-line. The `difftool` command starts an interactive dialogue with a queue of the affected files, asking you choose which files you wish open to open.

This is how *vimdiff* looks for a diff. Pass the 🕶!

![vmdiff difff](https://dev-to-uploads.s3.amazonaws.com/i/3bvla5nr9pzmley1gg6x.png)

This is how *VS Code* looks for a diff.

![vscode diff](https://dev-to-uploads.s3.amazonaws.com/i/zt1v5q4z1nikm6dowzse.jpg)

You will notice in the command-line in the screenshot above that my diff session shows 13 files that have changes. If the file list is long, you can cancel the process at whenever point you want the typical way (`Ctrl` + `C` on Windows). You will probably need to narrow down the scope of your command to make the set more manageable.

### Configuration

To configure it from the command-line:

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

You can add the following to your global Git config if you prefer:

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

If you're not feeling *VS Code* as your Diff Tool, you run the command `git difftool --tool-help` to see more options.

## Make VS Code your default Merge Tool

There is no default merge tool set.

When there is a conflict, you will get error messages when you try *pull* or *push* changes. Run `git mergetool`.

![commandline merge conflict](https://dev-to-uploads.s3.amazonaws.com/i/fknl767vi301l9nmtzwe.png)

Running vimdiff then looks like this:

![merge vmdiff](https://dev-to-uploads.s3.amazonaws.com/i/al1g8by5id226mprk3y4.png)

This is what a merge conflict looks like in *VS Code*:

![vscode merge conflict](https://dev-to-uploads.s3.amazonaws.com/i/ydate97muots5lhnwqk9.png)

A CodeLens gives you options for resolving the conflict. If there is more than 1 conflict, a tool bar appears in the top right corner above the document enabling you to cycle through each conflict.

### Configuration

To do it from the command-line:

```bash
git config --global merge.tool vscode
git config --global mergetool.vscode.cmd 'code --wait $MERGED'
```

You can add the following to your global Git config if you prefer:

```
[merge]
	tool = vscode
[mergetool "vscode"]
	cmd = code --wait $MERGED
```

If you're not feeling *VS Code* as your Merge Tool, you run the command `git mergetool --tool-help` to see more options.

## Conclusion

It's simple to setup VS Code to manage all your git needs. It's just a matter of preference if you want to use VS Code or stick with the command-line tools.

Happy coding! 🙂

<small>Banner Photo by [Valentin Antonucci](https://unsplash.com/photos/9cRDDvhpBRw).</small>


---
**Thank you for reading! Feel free to subscribe to my [RSS feed](https://www.roboleary.net/feed.xml), and share this article with others on social media. 💌**

**You can show your appreciation by buying me a coffee on [ko-fi](https://ko-fi.com/roboleary). 🙂**