219
168

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2019-08-27

※ 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 (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: 無くしたり、コピーし忘れたりしたら、作成したトークンを**Delete**して、上記の工程をやり直してください。 このトークンは後で使うので、どこかに保存しておいてください。

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:

219
168
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
219
168

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?