【スクショ付】VSCodeの公式Settings Sync（設定同期）を入れてみました

ヤッター！

ついにVScodeの安定版でも`Settings Sync`が仕えるようになりましたね！

※エクステンションの「[Settings Sync（Shan Khan）](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)」じゃないですよ！VScodeが**標準で搭載している**`Settings Sync`です。

※VScodeの`version 1.48`への更新で使えるようになりました（[July 2020 (version 1.48)](https://code.visualstudio.com/updates/v1_48)）

# 公式ドキュメント
[Settings Sync - https://code.visualstudio.com/docs/editor/settings-sync](https://code.visualstudio.com/docs/editor/settings-sync) (英語)

# Settings Sync の使い方　私的マニュアル
## 事前準備
### VScodeをアップデート
`version 1.48`から使えるので、アップデートをしておいてください

### エクステンション「Settings Sync」の無効化
エクステンションの「Settings Sync（Shan Khan）]をインストールしている場合は`無効にする`をしておきましょう。
設定を同期する機能が喧嘩しないように（重複しないように）です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/9a46d50d-d4ed-d0dd-fead-bcf0ae3adc79.png)

### マイクロソフト／GitHub アカウントの用意
`Settings Sync`の利用にはMicrosoftアカウントかGitHubアカウントが必要です。
（エクステンション「Settings Sync」を利用の方でしたら、GitHubアカウントが既存のはずです）

## 使い方手順
### １）右下のギアマークから
![101.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/adc03339-7c6d-93cc-c6b3-4211a3936abf.png)

VScodeの右下のギアマーク（設定）　→　`設定の同期をオンにする...（Turn on Setting Sync...）`をクリック

![102.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/273fa55f-7e86-4305-b906-511f7d9bb185.png)

こんな表示が出たら`オンにする`をクリック。
なお`ドキュメントを開く`をクリックすると[公式ドキュメント](https://code.visualstudio.com/docs/editor/settings-sync) (英語)がブラウザで開きます。

#### （備考）「設定の同期をオンにする...」が無い
※VScodeを起動直後は、この`設定の同期をオンにする...`が表示されません。起動後、少ししたら表示されます。待ちましょう。



### ２）マイクロソフト／GitHub アカウント へログイン
![103.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/32deb384-2946-549b-4676-b4ca90a15735.png)

VScodeの中央上部に`Microsoft または GitHub アカウントでサインインし、デバイス間でデータを同期します。`というメニューが開きます。

`サインインしてオンにする`をクリック。

![104.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/6bbe18e6-738f-0795-b917-6ace6a5818c1.png)

ログインする方のアカウントを選択してエンター。

### ３）ブラウザからログイン
※ 私は GitHub アカウントで同期するため、ここからはGitHubでの説明となります。ご了承ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/6da0fe94-ec89-84ec-9ec8-fa34e5e97a2f.png)


ブラウザが開きます。`Continue`をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/aaa1282d-5c8f-9128-ce3f-d2493daf0048.png)

`Sign in`してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/62e80df9-2ba1-134b-66b7-90b751ef432f.png)

`Authorize github`をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/efa7e8dc-8ab1-0556-4028-d835ecf29ade.png)


`Visual Studio Code を開く`をクリック。
VScodeへ戻ります。

### （備考）「キャンセル」押してもうた...
大丈夫。指示に従って進めましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/dad4c904-30e5-b1cb-e097-2f6adbc86883.png)

1.Copy the token.（トークンをコピーしてください）
青色の枠をクリックすると、トークンがコピーされます。

2.Switch back to VS code.（VScodeに切り替えてください）

3.Click **Signin in to github.com...** in the status bar.
（ステータスバーの**github.com にサインインしています...**をクリックしてください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/a9ac1f8a-3126-ec7c-f7af-2fdd3584116e.png)

4.Paste the token and hit **enter**
（トークンをペーストしてエンターキーを押してください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/e75c61fd-5167-96d7-a301-5d1ea1dfedf6.png)

## ４）さぁ、同期しよう

![109.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/e21d5f96-0e40-a1dc-0d7f-5c61455481c8.png)

この表示が出たら`開く`をクリック

![110.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/b146bb85-6160-68c6-02fb-39ea30efe2d6.png)

なんか、最初は`同期の開始中にエラーが発生しました`って出ましたが、しばらくすると`Settings Sync:設定 を同期しています...`の表示がでました。
（エラーはエクステンションの方のSettings Syncのものだったのかな...？）

しばらくすると・・・

![111.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/a2289a5a-80ad-6d35-7606-97c7148912b5.png)

いぇい

## 何が変わったのか
### 右下のギアマークから が・・・

![112.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/8ebb9c09-7cbc-0350-fba1-d6a96be98930.png)

`Settings Sync is On`に変わってました。
これをクリックすると、Settings Sync のメニューが表示されます。

### Settings Sync のメニュー

（Winのスクショ：なぜか英語）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/7e01fd68-ce06-e225-7453-bb7820582d60.png)

（Macのスクショ：なぜか日本語）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/7c866d87-85d7-5641-b2c7-8c2cd6fbde98.png)

### 設定の同期:構成...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/519c5509-7a77-2422-44f9-43f6af08eb38.png)

何を同期するかを選択できます。

### 設定の同期:設定を表示する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/3d327392-13e6-5555-f2bb-2760c6017002.png)

色々と細かく設定できるみたいです。詳しくは[公式ドキュメント](https://code.visualstudio.com/docs/editor/settings-sync) (英語)をご参照のこと...

### 設定の同期:同期されたデータを表示する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/91e42e12-cbab-4941-9e3e-1de637cd928c.png)

## 他のデバイスの設定方法は？

上記の工程を繰り返してください。

![スクリーンショット 2020-08-26 21.01.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/d037f245-6086-6344-22b2-2257bf3f85d8.png)

私の場合、まずWinで設定して、その次にMacで設定したのですが、
Macで設定する際に、上記の表示が出ました。
とりあえず`マージ`をクリックしました。

## 公式ドキュメントより抜粋

個人的に気になったものを抜粋します。

### [Is VS Code Settings Sync the same as the Settings Sync extension?](https://code.visualstudio.com/docs/editor/settings-sync#_is-vs-code-settings-sync-the-same-as-the-settings-sync-extension)
「Settings Sync extension」と「VS Code Settings Sync」は同じか？

> No, the Settings Sync extension by Shan Khan uses a private Gist on GitHub to share your VS Code settings across different machines and is unrelated to the VS Code Settings Sync.

「違うよ」って
だから、やっぱり両方の使用は避けた方が良いと思います。

### [Can I use a different backend or service for Settings Sync?](https://code.visualstudio.com/docs/editor/settings-sync#_can-i-use-a-different-backend-or-service-for-settings-sync)
Settings Sync を使うのに、他のバックエンドは使えるの？

> Settings Sync uses a dedicated service to store settings and coordinate updates. A service provider API may be exposed in the future to allow for custom Settings Sync backends.

「Settings Sync は専用サービスを使ってます（将来的にはAPIを公開するかもね）」ってあるので、まぁVScodeの専用サービスなんですね。

# 感想
これからVScodeで設定同期をするなら、エクステンションの Settings Sync よりも、こっちの方が設定の工数が少なくて楽だと思います。エクステンションの方は停止して（アンインストールじゃなくて）、しばらく使ってみようと思います。

なお、エクステンションの「Settings Sync」に興味がある方は、ぜひ[コチラ](https://qiita.com/tomokei5634/items/22128efe306ce9bc5682)もご覧ください。

[【初心者】VSCodeの設定同期エクステンション「Setting Sync」](https://qiita.com/tomokei5634/items/22128efe306ce9bc5682)

VScodeファンに幸あれ:tada: