VSCodeの拡張「Settings Sync」で幸せなチーム開発

### TL;DR

* VSCodeのバージョンは揃えると幸せになれる
    * 古いVSCodeと新しいVSCodeを混在させていると、同期してもインストールされていない事がある様です[要出典]
* Github Access Tokenの発行が必要
* Gistの設定が必要

### 目的・ターゲット

これらを解決する目的の方法の一つとして役立つと思います
* いろんなIDEで開発していて、中々規約化できない
* 実装レビューがIDEが色々ある前提になっていて、効率が悪い
* 複数開発機で設定を同期できずに困っている

他、ターゲットとして以下も含まれると思います
* 複数のMBPなどで開発している（チーム開発も含む）で、IDEに統一が見られない事でコーディング規約が策定されていない、策定しないと言う様な場合に、統一することが出来る
* Rubocopやlintをこの同期を前提で策定することも可能であると思われる

### 手順

#### Githubアクセストークンを発行

![スクリーンショット 2020-12-05 15.13.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/d68f278a-da15-a4c5-1fe1-a6bc41518c1c.png)
![スクリーンショット 2020-12-05 15.15.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/59a58ff4-873d-4a0e-2a02-56c6950fda4d.png)
![スクリーンショット 2020-12-05 15.15.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/af8f9746-4759-b4e6-46e2-855981c2b7ca.png)
![スクリーンショット 2020-12-05 15.16.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/68a8e284-3126-151e-4ca4-3a117a195751.png)
![スクリーンショット 2020-12-05 15.17.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/c9931e23-957e-a6f2-22da-ff16c062d79d.png)
![スクリーンショット 2020-12-05 15.17.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/54ae65d0-71df-de3d-15f0-e6747a7b6683.png)
![スクリーンショット 2020-12-05 15.18.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/544575bf-e320-c12a-61aa-58b27b6ced83.png)
![スクリーンショット 2020-12-05 15.22.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/fbfc8226-77d0-5ef0-fd71-0c9c8de42072.png)
![スクリーンショット 2020-12-05 15.22.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/899d099d-ca1a-e7d2-147f-214697b56125.png)
![スクリーンショット 2020-12-05 15.27.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/2131cfe7-17a8-2edc-d9d2-9fd94fcd59b5.png)

#### GistのIDを発行

![スクリーンショット 2020-12-05 15.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/dae1d0b3-7dbc-80c7-46ea-5007caedab8f.png)
![スクリーンショット 2020-12-05 15.30.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/57797c60-eff6-e773-7ea5-07977830248a.png)
![スクリーンショット 2020-12-05 15.31.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/f123bdb3-ec35-9ae3-eb27-e11a3ee5772f.png)
![スクリーンショット 2020-12-05 15.36.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/1252077f-25c4-c4a3-1e25-7141552ff54e.png)

#### VSCodeの拡張で Settings Sync をインストール

![スクリーンショット 2020-12-05 15.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/6f3fda5e-39ee-a030-7f80-66f05168e45e.png)
![スクリーンショット 2020-12-05 15.38.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/6a7e002d-4f52-af12-f537-59f1c4271615.png)

#### Settings Syncの設定

![スクリーンショット 2020-12-05 15.38.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/77c07b7e-5b4e-bba9-77e3-9c4398c448f5.png)
![スクリーンショット 2020-12-05 15.39.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/8da05beb-71ab-048f-cfab-99faa17b6b12.png)
![スクリーンショット 2020-12-05 17.46.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/52cbc9f5-021c-f6c8-a50a-2f03a639b557.png)
![スクリーンショット 2020-12-05 17.46.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/cc624fbc-d6c2-5ede-e906-5e92588f4a92.png)
![スクリーンショット 2020-12-05 17.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/1ea47282-e403-f6e1-2780-8e4ff312941f.png)

#### 設定のアップロード

![スクリーンショット 2020-12-05 17.51.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/734c3714-2aff-de18-4885-f715a498d9d8.png)
![スクリーンショット 2020-12-05 17.53.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/09b9b352-6c9f-e2d0-ccd8-21dcbe33045e.png)

#### 別のマシンでVSCodeのインストール

#### 設定のダウンロード

* Extensions を開く

![スクリーンショット 2020-12-05 18.29.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/00359ded-e964-d750-ad6a-79320ac81e8c.png)

* settings sync を入力して検索します
* Settings Sync を Install します

![スクリーンショット 2020-12-05 18.30.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/87c8e19c-a389-f781-f29a-8b14779c983b.png)

* Install が終わって以下のビューが表示されたら、 `Shift + command + p` を押下して**コマンドパレット**を表示します

![スクリーンショット 2020-12-05 18.30.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/7a288816-a6dc-605c-111a-66004c22b869.png)

* `Sync: Advanced Options` を選択します

![スクリーンショット 2020-12-05 18.32.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/0a29c963-25d3-e9d1-4871-dc17d28f8084.png)

* `Sync: 設定を開く` を選択します

![スクリーンショット 2020-12-05 18.32.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/8b6b832f-0701-a089-2d94-801b3e56e1ba.png)

* 設定ビューが表示されたら、**Gist ID**に「」を、**アクセストークン**に「」を入力します。入力が終わると、左下の**✔︎**がリロードされて、再度、**✔︎**が表示されたら完了です。

![スクリーンショット 2020-12-05 18.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/5e342697-8e71-0426-ca71-8eac9cae2396.png)
![スクリーンショット 2020-12-05 18.36.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/ab52dc05-0f52-5ae9-5803-cb5b8bd6649b.png)

* `Shift + option + d` で同期されます。完了すると `Done` が表示されます。

![スクリーンショット 2020-12-05 18.37.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/65733fe4-40ac-7721-bd53-81804829a8fa.png)

#### settings.jsonの更新

* 同期元の `settings.json` の内容をコピペします
* `[Code] > [Preferences] > [Setitngs]` から開き更新するだけです。

これで同期は完了です。

#### 考察

* settings.jsonが同期されないのが残念。
  * これについてはローカル管理は嫌なので、ナレッジサービスで管理しています。