※ 2020年8月31日追記:VScodeのversion 1.48
へ更新すると、VScodeが標準で搭載しているSettings Sync
が利用可能です。こちらの方が設定工数が少なく導入できると思います。
→ 【スクショ付】VSCodeの公式Settings Sync(設定同期)を入れてみました
本件はVScodeの拡張機能「SettingSync」の設定方法について記載しています。
リスペクトな記事(参考URL)
本件、同様の既存記事を踏襲する内容となります。
できるだけキャプチャをいっぱい入れるように心掛けました。
2019年8月時点の記事です(閲覧時にはGUIが変更されている可能性があります)
前提
- Githubのアカウントがある
- VScodeを使っている
手順
VScodeの機能拡張「SettingSync」ではGithubのアクセストークンとGist IDを用います。
Githubのアクセストークンを取得
(1)Githubにログインする
![スクリーンショット 2019-08-27 16.04.13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F90fcb923-7aa4-52f2-871c-7e48b9c93710.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=163ce654711fef66d11358d40d89bf3a)
(2)右上から`Settings`をクリック
![スクリーンショット 2019-08-27 13.41.30.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F86c049c1-2b09-e527-4890-2a50f45a401d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cc5a81499ca96ab7a5d0c9641bef4554)
(3)`Developer settings`をクリック
![スクリーンショット 2019-08-27 13.41.37.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F31d024b8-6f18-48bc-cb02-6387908e9b82.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3e76927c1efb191b8649805972d1ddf2)
(4)`Personal access tokens`をクリック
![スクリーンショット 2019-08-27 13.41.47.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2Fd7c3e08f-d496-ba87-ff87-37d5ecf7b435.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=74f319fce77de5573065d14881cc416a)
(5)`Generate new token`ボタンをクリック
![スクリーンショット 2019-08-27 13.42.13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F9f3b9628-7944-911e-eb3f-8cdc4a1da17a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=aef29381f09260c55a101c3c470b9764)
(6)**Note**は任意の名称を入力(例:`VScode Settings Sync`)
(7)`gist`にチェックマーク
![スクリーンショット 2019-08-27 13.42.18.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2Fd235d77b-745d-69a5-bac0-4470d1815116.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=891a4ccae563d833ebcda8a9957acc1f)
(8)`Generate token`をクリック
![スクリーンショット 2019-08-27 16.15.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2Fcb973717-6789-0386-8b1a-2365ca627b6a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0bceab7bc4867c1c1da4f5283870a7e9)
(9)赤枠の文字列(トークン)をコピーしておく(例:`f5be7b****省略****a902`)
トークンの表示は、この1回だけです
![:scream_cat: :scream_cat:](https://cdn.qiita.com/emoji/twemoji/unicode/1f640.png)
無くしたり、コピーし忘れたりしたら、作成したトークンを**Delete**して、上記の工程をやり直してください。
このトークンは後で使うので、どこかに保存しておいてください。
Gist IDを取得
(1)Githubにログインする
![スクリーンショット 2019-08-27 13.42.47.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F72bfac46-5c4c-ed3a-807b-0ddc5286503e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=aa3d4dc9dc3e2c398b19697869c7a5b0)
(2)右上のプルダウンから`Your gists`をクリック
![スクリーンショット 2019-08-27 13.43.11.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2Fba9bfc4e-67b0-9f89-ffd7-0a9ff5bbdee8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=45d8797aecfc6291c4788c372b41cec5)
(3)`Create a gist`をクリック
寄り道な補足:「cloudSttings」がない(表示されない)
他サイト・記事では、Create a gist
ではなく「cloudSttingsをクリック」と記載されておりましたが、私が見たときは「cloudSttings」はありませんでした。(これで、ちょっと時間がかかりました)
Github側のUIが変わったのでしょう。安心してください。下記の方法でちゃんとできます(2019年8月時点)。
![スクリーンショット 2019-08-27 13.44.10.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2Feb88e94d-1f7c-d8f6-a753-9d9c52fafa23.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bd720d463239aa45d559bac662e7633a)
(4)**Gist description**の枠には任意の名称(例:`VScode Settings Sync`)
(5)テキストエリアも任意の文字列(例:`#VScode Settings Sync` ホントなんでもいいです。どうせ上書きされるので)
(6)`Create secret gist`をクリック
![スクリーンショット 2019-08-27 13.44.22.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2Fd7365b77-ed27-18ba-f5c9-8d0cc7ea4376.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0cc33756ce0dd330ab1034b4fc510cad)
(7)ページ上部(赤枠部)の`gist:`以降の文字列をコピーする(例:`d525a***省略***54d2b`)
この文字列は後で使うので、どこかに保存しておいてください。
VScodeにエクステンション「Settings Sync」を導入
![スクリーンショット 2019-08-27 12.07.07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F0b3bb20f-871e-a03a-29cd-1b2fe64d0e6a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0e67ce27a745894c2fe999534c7608ed)
(1)左サイドバーのエクステンションアイコンをクリック
(2)`settings sync`で検索
(3)**settings sync**をクリック
(4)`Install`をクリック
![スクリーンショット 2019-08-27 13.40.38.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F41931f78-4845-7746-3792-da4bc6e8897b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=daeda87ac6bb3c00a76f5bc3a614f5df)
(5)`F1`キーか`shift+command+P`ショートカットで**コマンドパレット**を表示
(表示>コマンドパレットでも可)
(6)`sync`と入力すると`Sync:高度なオプション`が表示されるのでクリック
![スクリーンショット 2019-08-27 13.40.45.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2Fca274f62-045e-c794-8c36-1525d293fb57.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=04b3bc2c2bfb91703784a0ec5a2b4c15)
(7)`Sync:設定を開く`をクリック
![スクリーンショット 2019-08-27 13.40.51.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F1bbee3ab-95fe-4218-788a-30e3507bf940.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=366196fca4e1bc555cf3a934dd0189f6)
(8)**Gist ID**を入力(上記の例では`d525a***省略***54d2b`の文字列)
(9)**アクセストークン**を入力(上記の例では`f5be7b****省略****a902`の文字列)
設定は以上です(入力したら自動保存されます)。
設定をアップロードしてみる
![スクリーンショット 2019-08-27 17.16.40.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2Ffc2c7caa-ea10-7f6a-9f46-cfda1cdf38a1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=86210e20a3c6ff9bf74aa03e8e7ec132)
ショートカット(mac)`shift+option+U`でVScodeの設定がGithubにアップロードされます。
![スクリーンショット 2019-08-27 17.18.30.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F7b09139f-1464-6cbf-41e0-7dbf736176e7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=32da6f6bb551fd76e49dbb61e9caf6fd)
アップロードすると、こんな出力が表示される
![スクリーンショット 2019-08-27 13.47.24.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F283603%2F9669418d-c169-ac60-5b2d-f28dd469993c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8f4b4d1edea6ac1d2c740e7e3883cb5a)
Gistページ(上記の例で`#VScode Settings Sync`と入力したところ)に、VScodeの設定内容がアップロードされている
この後のタスク
他のPCにVScodeをインストールして、Settings Syncを入れて、Githubから設定をダウンロードして、ちゃんと同期できるかを確認。
他のPCにする手順は上記と同じ。
ショートカット(mac)shift+option+D
で設定をダウンロードすることができます。
上手くいくことを祈っています![:thumbsup: :thumbsup:](https://cdn.qiita.com/emoji/twemoji/unicode/1f44d.png)