【初心者】VSCodeの設定同期エクステンション「Setting Sync」

※ 2020年8月31日追記：VScodeの`version 1.48`へ更新すると、VScodeが標準で搭載している`Settings Sync`が利用可能です。こちらの方が設定工数が少なく導入できると思います。
→ [【スクショ付】VSCodeの公式Settings Sync（設定同期）を入れてみました](https://qiita.com/tomokei5634/items/7a1978e5a140effa5782)


---

本件はVScodeの拡張機能「SettingSync」の設定方法について記載しています。

# リスペクトな記事（参考URL）
- [VScodeの設定共有（SettingSync）](https://qiita.com/torun225/items/e6823fc22e5ae79247fe)
- [VSCode(Visual Studio Code)の設定を同期させる拡張機能「Setting Sync」が便利](https://www.karelie.net/vscode-setting-sync/)

本件、同様の既存記事を踏襲する内容となります。
できるだけキャプチャをいっぱい入れるように心掛けました。
2019年8月時点の記事です（閲覧時にはGUIが変更されている可能性があります）

# 前提
- Githubのアカウントがある
- VScodeを使っている


# 手順
VScodeの機能拡張「SettingSync」ではGithubの**アクセストークン**と**Gist ID**を用います。


## Githubのアクセストークンを取得
（１）Githubにログインする

<img width="1113" alt="スクリーンショット 2019-08-27 16.04.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/90fcb923-7aa4-52f2-871c-7e48b9c93710.png">
（２）右上から`Settings`をクリック

<img width="737" alt="スクリーンショット 2019-08-27 13.41.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/86c049c1-2b09-e527-4890-2a50f45a401d.png">
（３）`Developer settings`をクリック

<img width="1010" alt="スクリーンショット 2019-08-27 13.41.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/31d024b8-6f18-48bc-cb02-6387908e9b82.png">
（４）`Personal access tokens`をクリック

<img width="1010" alt="スクリーンショット 2019-08-27 13.41.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/d7c3e08f-d496-ba87-ff87-37d5ecf7b435.png">
（５）`Generate new token`ボタンをクリック

<img width="1010" alt="スクリーンショット 2019-08-27 13.42.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/9f3b9628-7944-911e-eb3f-8cdc4a1da17a.png">
（６）**Note**は任意の名称を入力（例：`VScode Settings Sync`）
（７）`gist`にチェックマーク

<img width="1010" alt="スクリーンショット 2019-08-27 13.42.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/d235d77b-745d-69a5-bac0-4470d1815116.png">
（８）`Generate token`をクリック

<img width="1006" alt="スクリーンショット 2019-08-27 16.15.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/cb973717-6789-0386-8b1a-2365ca627b6a.png">
（９）赤枠の文字列（トークン）をコピーしておく（例：`f5be7b****省略****a902`）
トークンの表示は、この１回だけです:scream_cat:
無くしたり、コピーし忘れたりしたら、作成したトークンを**Delete**して、上記の工程をやり直してください。
このトークンは後で使うので、どこかに保存しておいてください。

## Gist IDを取得
（１）Githubにログインする

<img width="458" alt="スクリーンショット 2019-08-27 13.42.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/72bfac46-5c4c-ed3a-807b-0ddc5286503e.png">
（2）右上のプルダウンから`Your gists`をクリック

<img width="1099" alt="スクリーンショット 2019-08-27 13.43.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/ba9bfc4e-67b0-9f89-ffd7-0a9ff5bbdee8.png">
（３）`Create a gist`をクリック

### 寄り道な補足：「cloudSttings」がない（表示されない）
他サイト・記事では、`Create a gist`ではなく「cloudSttingsをクリック」と記載されておりましたが、私が見たときは「cloudSttings」はありませんでした。（これで、ちょっと時間がかかりました）
Github側のUIが変わったのでしょう。安心してください。下記の方法でちゃんとできます（2019年8月時点）。

<img width="1099" alt="スクリーンショット 2019-08-27 13.44.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/eb88e94d-1f7c-d8f6-a753-9d9c52fafa23.png">
（４）**Gist description**の枠には任意の名称（例：`VScode Settings Sync`）
（５）テキストエリアも任意の文字列（例：`#VScode Settings Sync` ホントなんでもいいです。どうせ上書きされるので）
（６）`Create secret gist`をクリック

<img width="1099" alt="スクリーンショット 2019-08-27 13.44.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/d7365b77-ed27-18ba-f5c9-8d0cc7ea4376.png">
（７）ページ上部（赤枠部）の`gist:`以降の文字列をコピーする（例：`d525a***省略***54d2b`）
この文字列は後で使うので、どこかに保存しておいてください。

## VScodeにエクステンション「Settings Sync」を導入
<img width="1023" alt="スクリーンショット 2019-08-27 12.07.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/0b3bb20f-871e-a03a-29cd-1b2fe64d0e6a.png">
（１）左サイドバーのエクステンションアイコンをクリック
（２）`settings sync`で検索
（３）**settings sync**をクリック
（４）`Install`をクリック

<img width="1329" alt="スクリーンショット 2019-08-27 13.40.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/41931f78-4845-7746-3792-da4bc6e8897b.png">
（5）`F1`キーか`shift+command+P`ショートカットで**コマンドパレット**を表示
（表示>コマンドパレットでも可）
（６）`sync`と入力すると`Sync:高度なオプション`が表示されるのでクリック

<img width="1329" alt="スクリーンショット 2019-08-27 13.40.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/ca274f62-045e-c794-8c36-1525d293fb57.png">
（７）`Sync:設定を開く`をクリック

<img width="1329" alt="スクリーンショット 2019-08-27 13.40.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/1bbee3ab-95fe-4218-788a-30e3507bf940.png">
（8）**Gist ID**を入力（上記の例では`d525a***省略***54d2b`の文字列）
（9）**アクセストークン**を入力（上記の例では`f5be7b****省略****a902`の文字列）

設定は以上です（入力したら自動保存されます）。

## 設定をアップロードしてみる
<img width="832" alt="スクリーンショット 2019-08-27 17.16.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/fc2c7caa-ea10-7f6a-9f46-cfda1cdf38a1.png">
ショートカット（mac）`shift+option+U`でVScodeの設定がGithubにアップロードされます。

<img width="866" alt="スクリーンショット 2019-08-27 17.18.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/7b09139f-1464-6cbf-41e0-7dbf736176e7.png">
アップロードすると、こんな出力が表示される

<img width="1087" alt="スクリーンショット 2019-08-27 13.47.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/9669418d-c169-ac60-5b2d-f28dd469993c.png">
Gistページ（上記の例で`#VScode Settings Sync`と入力したところ）に、VScodeの設定内容がアップロードされている

# この後のタスク
他のPCにVScodeをインストールして、**Settings Sync**を入れて、Githubから設定をダウンロードして、ちゃんと同期できるかを確認。

他のPCにする手順は[上記](#vscodeにエクステンションsettings-syncを導入)と同じ。
ショートカット（mac）`shift+option+D`で設定をダウンロードすることができます。

上手くいくことを祈っています:thumbsup: