Help us understand the problem. What is going on with this article?

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

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

リスペクトな記事(参考URL)

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

前提

  • Githubのアカウントがある
  • VScodeを使っている

手順

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

Githubのアクセストークンを取得

(1)Githubにログインする

スクリーンショット 2019-08-27 16.04.13.png
(2)右上からSettingsをクリック

スクリーンショット 2019-08-27 13.41.30.png
(3)Developer settingsをクリック

スクリーンショット 2019-08-27 13.41.37.png
(4)Personal access tokensをクリック

スクリーンショット 2019-08-27 13.41.47.png
(5)Generate new tokenボタンをクリック

スクリーンショット 2019-08-27 13.42.13.png
(6)Noteは任意の名称を入力(例:VScode Settings Sync
(7)gistにチェックマーク

スクリーンショット 2019-08-27 13.42.18.png
(8)Generate tokenをクリック

スクリーンショット 2019-08-27 16.15.19.png
(9)赤枠の文字列(トークン)をコピーしておく(例:f5be7b****省略****a902
トークンの表示は、この1回だけです:scream_cat:
無くしたり、コピーし忘れたりしたら、作成したトークンをDeletaして、上記の工程をやり直してください。
このトークンは後で使うので、どこかに保存しておいてください。

Gist IDを取得

(1)Githubにログインする

スクリーンショット 2019-08-27 13.42.47.png
(2)右上のプルダウンからYour gistsをクリック

スクリーンショット 2019-08-27 13.43.11.png
(3)Create a gistをクリック

寄り道な補足:「cloudSttings」がない(表示されない)

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

スクリーンショット 2019-08-27 13.44.10.png
(4)Gist descriptionの枠には任意の名称(例:VScode Settings Sync
(5)テキストエリアも任意の文字列(例:#VScode Settings Sync ホントなんでもいいです。どうせ上書きされるので)
(6)Create secret gistをクリック

スクリーンショット 2019-08-27 13.44.22.png
(7)ページ上部(赤枠部)のgist:以降の文字列をコピーする(例:d525a***省略***54d2b
この文字列は後で使うので、どこかに保存しておいてください。

VScodeにエクステンション「Settings Sync」を導入

スクリーンショット 2019-08-27 12.07.07.png
(1)左サイドバーのエクステンションアイコンをクリック
(2)settings syncで検索
(3)settings syncをクリック
(4)Installをクリック

スクリーンショット 2019-08-27 13.40.38.png
(5)F1キーかshift+command+Pショートカットでコマンドパレットを表示
(表示>コマンドパレットでも可)
(6)syncと入力するとSync:高度なオプションが表示されるのでクリック

スクリーンショット 2019-08-27 13.40.45.png
(7)Sync:設定を開くをクリック

スクリーンショット 2019-08-27 13.40.51.png
(8)Gist IDを入力(上記の例ではd525a***省略***54d2bの文字列)
(9)アクセストークンを入力(上記の例ではf5be7b****省略****a902の文字列)

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

設定をアップロードしてみる

スクリーンショット 2019-08-27 17.16.40.png
ショートカット(mac)shift+option+UでVScodeの設定がGithubにアップロードされます。

スクリーンショット 2019-08-27 17.18.30.png
アップロードすると、こんな出力が表示される

スクリーンショット 2019-08-27 13.47.24.png
Gistページ(上記の例で#VScode Settings Syncと入力したところ)に、VScodeの設定内容がアップロードされている

この後のタスク

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

他のPCにする手順は上記と同じ。
ショートカット(mac)shift+option+Dで設定をダウンロードすることができます。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away