外部エディタ/Diff ツール（差分表示ツール）としての Visual Studio Code (git と SourceTree で使ってみる)


> [Visual Studio Code の git 連携機能と git コマンドについて](http://qiita.com/satokaz/items/4660ce57ca8eb456a096)から切り出しました

Visual Studio Code 0.10.13 (March 2016) リリースにて [Wait support and Git patch/diff mode](https://code.visualstudio.com/docs/editor/versioncontrol#_git-patchdiff-mode) として追加された機能。
コマンドラインのオプションとして呼び出すことが可能。
`code` (stable build) また `code-insiders` (Insiders build) コマンドが使えるようになっている必要がある。

## 各プラットフォームにおける確認

コマンドライン・オプションとなるため、各プラットフォームにて code コマンドの実行可能か確認する。

## Visual Studio Code に追加されたコマンドライン・オプション

### **wait オプション**

* `-w` または `--wait` オプションを引数として実行すると有効になる機能。このオプションがつけられた Visual Studio Code インスタンスを呼び出したプログラムは、Visual Studio Code インスタンスが終了するまで待つことになる。
  `git commit` で commit メッセージを書くときや `git add -p` の `e` などでの利用を想定したり、何らかのツールから外部エディタとして Visual Studio Code を呼び出すときに効果を発揮する。と思う

![スクリーンショット 2016-05-08 14.07.37.png](https://qiita-image-store.s3.amazonaws.com/0/65800/36ad99ec-7d86-cab5-4227-23278114222c.png "スクリーンショット 2016-05-08 14.07.37.png")

例えば、 [Wait support and Git patch/diff mode](https://code.visualstudio.com/docs/editor/versioncontrol#_git-patchdiff-mode) の例だと、git が何らかの編集が必要になった際にエディタを呼び出すが、これを下記のように実行することで Visual Studio Code に設定できる。そしてここで `--wait` オプションの出番。

```bash
# VS Code Stable の場合
$ git config --global core.editor "code --wait"

# VS Code Insiders の場合
$ git config --global core.editor "code-insiders --wait"
```

> **参考:** git コマンドの core.editor 設定については、下記のドキュメントで確認
> * [Git - Book: 1.6 使い始める - 最初のGitの構成](https://git-scm.com/book/ja/v2/使い始める-最初のGitの構成#エディター)

$HOME/.gitconfig の `[core]` セクションは下記のようになって、`editor` に `code --wait` が設定される。

```bash
[core]
    fscache = true
    editor = code --wait
```

試しに、上記の設定で、$HOME/.gitconfig ファイルを編集するためのコマンドを実行してみる。
この状態で、下記のコマンドを実行すると、$HOME/.gitconfig ファイルを開いた、新しい VS Code インスタンスが起動し、このウインドウが閉じられるまで、`git config --global -e` は終了を待つ。

```bash
$ git config --global -e
```

開いたインスタンスの終了は、インスタンスの × ボタンで閉じるか、`cmd + w` でファイルを閉じて、もう一回、`cmd + w` でエディタを閉じることで可能。(ようはエディタを終了させる)

![スクリーンショット 2016-05-27 2.36.41.png](https://qiita-image-store.s3.amazonaws.com/0/65800/37fdd44d-3cd8-a8de-0849-adcae2b2c1a5.png "スクリーンショット 2016-05-27 2.36.41.png")


### **diff tool**

* `-d` または `--diff` オプションと 2 つのファイルを引数にして実行することでファイルの差分を出力する機能

VS Code 0.3.0 で [File Compare](https://code.visualstudio.com/updates/v0_3_0#_file-compare) の機能が実装されたが、0.10.3 では、この機能を CLI から呼び出せるようになった。

* [Viewing Diffs](https://code.visualstudio.com/Docs/editor/versioncontrol#_viewing-diffs)
* [Version Control in VS Code](https://code.visualstudio.com/Docs/editor/versioncontrol#_git-patchdiff-mode)

例えば git コマンドから `code --wait --diff $LOCAL $REMOTE` と呼び出すことで、外部 diff tool としても利用できる。

  ![スクリーンショット 2016-05-08 14.40.11.png](https://qiita-image-store.s3.amazonaws.com/0/65800/009d086e-2fc2-05cd-0737-58732b4eeab5.png "スクリーンショット 2016-05-08 14.40.11.png")

difftool として利用する場合は、$HOME/.gitconfig に下記のように設定する。

```bash
[diff]
    tool = default-difftool

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


## SourceTree の外部エディタとして設定してみる

Git や Mercurial リポジトリを視覚化して操作可能な無償の GUI クライアントである [SourceTree](https://ja.atlassian.com/software/sourcetree) からも外部エディタ/Diff エディタとして利用できる。

### Diff

`SourceTree > 環境設定 > Diff` を開き、`外部 Diff/Merge` の `Diff コマンド:` と `引数:`を下記のように設定:

* Diff コマンド: `code` または `code-insiders` コマンドのフルパス  
(例 macOS: /usr/local/bin/code または /usr/local/bin/code-insiders)
* 引数: --wait --diff $LOCAL $REMOTE

![スクリーンショット 2017-04-29 22.43.25.png](https://qiita-image-store.s3.amazonaws.com/0/65800/ccf125d8-8bf8-9352-24f2-ac4d66132add.png "スクリーンショット 2017-04-29 22.43.25.png")

`外部 Diff` として呼び出せる。

![Kobito.SDAbhm.png](https://qiita-image-store.s3.amazonaws.com/0/65800/868a68a5-2194-6ff8-f598-c54c7d63a44b.png "Kobito.SDAbhm.png")

### 外部エディタ

`SourceTree > 環境設定 > カスタムアクション` を開き、下記のようなアクションを追加する

* メニューキャプション: アクションの名前
* 実行するスクリプト:  `code` または `code-insiders` コマンドのフルパス
* パラメータ: `-w $FILE`

![スクリーンショット 2017-04-29 23.22.41.png](https://qiita-image-store.s3.amazonaws.com/0/65800/71d0c333-4374-d09c-a8f7-dd1444bc87fa.png "スクリーンショット 2017-04-29 23.22.41.png")

`操作`メニューのカスタムアクションに作成したアクション `VS Code で編集`が追加される

> コンテキストメニューにもカスタムアクションのメニューがあるが、追加されたアクションが表示されない。。。そのため、`操作`メニューか、ショートカットキーから呼び出す必要がある

![スクリーンショット 2017-04-29 23.19.48.png](https://qiita-image-store.s3.amazonaws.com/0/65800/b065bb08-e08a-7c34-55aa-796eff482650.png "スクリーンショット 2017-04-29 23.19.48.png")

実行すると、下記のように VS Code で選択したファイルが開かれる

![スクリーンショット 2017-04-29 23.20.11.png](https://qiita-image-store.s3.amazonaws.com/0/65800/289b17e4-3e92-3f43-a7b9-6fe29b0e3bbd.png "スクリーンショット 2017-04-29 23.20.11.png")