【最新版】VSCodeの設定を共有しよう【Settings Sync】

#はじめに
VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)のようにVSCodeにはたくさんの便利な拡張がありますが、PCを変えるたびに拡張を入れ直したり、設定を変更し直したりするのは非常に面倒ですよね。

今回は、 **VSCodeの設定をオンライン上で保存し、復元できる VSCode 拡張「Settings Sync」**を紹介をします。

また、2019/07/15 のアップデートで、アクセストークンを取得したり Gist ID を入力する手間が減り、設定がとても簡単になりました！！！
本記事では、 Settings Sync を利用して VSCode の設定を共有する最新の方法を紹介します。

(※注)以下の2つの記事は古い方法です。
【初心者】VSCodeの設定同期エクステンション「Setting Sync」
VScodeの設定共有（SettingSync）

---

本記事では、 Ubuntu18.04LTS でのスクリーンショットで説明していますが、 Windows でも Mac でも特別問題はないです。（たぶん……）

#こんなことができるよ！

GitHub アカウントにログインして、

設定ファイルを選択し、

設定ファイルをダウンロードすると……

settings.json が復元されて、拡張機能もインストールされてる！！

一度、設定ファイルを選択すると、設定のダウンロードもアップロードもショートカットキーでワンアクションでできます！！

VSCode の設定を共有する方法

##「Settings Sync」 is 何？
Gist という、手軽にファイルをアップロード・ダウンロードできるサービスを利用して、 VSCode の設定ファイルを保存・復元できる VSCode 拡張です。
Settings Sync
Gistでソースや文書をシェアする

具体的には、ユーザーフォルダに含まれる設定をすべて保存・復元できます。

1. 設定ファイル (settings.json)
2. キーバインディングファイル (keybindings.json & keybindingsMac.json)
3. デバッグ構成ファイル (launch.json)
4. スニペットフォルダ (Snippets)
5. VSCode拡張 & 拡張の設定 (extensions.json)
6. ワークスペースフォルダ (Workspaces)

事前準備

GitHub アカウントの取得
参考 : GitHub 入門 ～アカウントを作成する方法～

##設定の保存 (Gist へのアップロード)

1. Settings Sync のインストール

設定を保存したい端末でVSCodeを開き、拡張機能の検索に「sync」と入力して、「Settings Sync」拡張をインストールします。

2. GitHub アカウントのサインイン

「Settings Sync」がインストールできたら、タブに「Welcome to Settings Sync」のページが表示されるので、「LOGIN WITH GITHUB」をクリックします。

ブラウザが開き、 GitHub へのサインインが求められるので、メールアドレスとパスワードを入力して「Sign in」をクリックします。

以下のページに飛んだらサインインが完了です！
タブを閉じて、 VSCode のウィンドウに戻ります。

3. 設定を保存する（Gist へのアップロード）

「SKIP (NEW ONE WILL BE CREATED UPON FIRST UPLOAD)」をクリックして、「Welcome to Settings Sync」のページに戻ります。

Gist へ保存したい設定ファイルをアップロードするために、コマンドパレットを開き (Ctrl+Shift+P、 Mac なら⇧+⌘+P) 、「sync」と入力して「Sync:Update/Upload Settings」をクリックします。

右下によくわからないダイアログが出るので、「はい」をクリックします。(ここ謎すぎる……)

右下にアップロード完了のポップアップが出れば、成功です！

##設定の復元(Gist からダウンロード)

1. Settings Sync のインストール

設定を復元したい端末で VSCode を開き、「設定の保存 (Gist へのアップロード)」と同様に Settings Sync をインストールします。

2. GitHub アカウントのサインイン

「設定の保存(Gist へのアップロード)」と同様にブラウザで GitHub アカウントにサインインして、 VSCode に戻ります。

3. 設定を復元する(Gist からダウンロード)

Gist に保存した復元したい設定ファイルをクリックします。

復元したい設定ファイルが選択できたので、「CLOSE TAB」をクリックしてタブを閉じます。

Gist から復元したい設定ファイルをダウンロードするために、コマンドパレットを開き (Ctrl+Shift+P、 Mac なら⇧+⌘+P)、「sync」と入力して「Sync:Download Settings」をクリックします。

無事、エディタの設定や拡張が復元できれば成功です！！おめでとうございます！！！！

##何か問題が起きたとき
問題が起きたとき、 Settings Sync の設定をリセットして最初からやり直したい場合は、コマンドパレットで以下を選択してください。
Sync：Reset Extension Settings

また、保存した設定のGistを削除したい場合は、以下の手順を行ってください。
###1. GitHub にサインインし、自分の GitHub アカウントページに飛ぶ
公式のGitHubにアクセスし、サインインする。

###2. 自分の Gist のページに飛ぶ
画像のように、右上の自分のアイコンをクリックし「Your gists」を選択する。

###3. Gist を削除する

削除したい Gist をクリックする

「delete」をクリックして Gist を削除する

これで、 Gist が削除されました。

##その他の機能について

Gist へのアップロード・ダウンロードのショートカットキー

1. アップロード : Shift + Alt + U (Mac では Shift + Option + U)
2. ダウンロード : Shift + Alt + D (Mac では Shift + Option + D)

###設定の変更があった際の自動アップデート
設定の変更があった際に、自動で Gist にアップデート (Gist の上書き) を行う機能があります。（デフォルトではOFF）

この機能を有効にするには、コマンドパレットで以下の順番で選択してください。
Sync : Advanced Options > Toggle Auto-Upload on Settings Change

###設定の自動ダウンロード
Gist に保存された設定に変更があった際に、自動で設定をダウンロードする機能があります。（デフォルトではOFF）

この機能を有効にするには、コマンドパレットで以下の順番で選択してください。
Sync : Advanced Options > Toggle Auto-Download On Startup

###カスタム同期
設定だけでなく、User フォルダから他のファイルを同期することができます。
詳しくは、Custom Syncを確認してください。

###チームとユーザー間で設定を共有する
Settings Sync で作られる Gist は通常 Private に設定され、他のユーザーから見ることができないようになっています。
Public な Gist を作成することで、チームやユーザー間で設定を共有することができます。
詳しくは、How to share your visual studio code settings and extensionsを確認してください。

---

他にも機能はありますが、詳しくは公式のSettings Syncを確認してください。

おわりに

今回は、 VSCode(VisualStudioCode) の拡張機能やその設定、キーバインディングなどのデータをオンライン上で保存し、また復元できる VSCode 拡張「Settings Sync」を紹介をしました。

最強のオレオレ開発環境をみなさんで作って共有しましょう！
では、良い VSCode ライフを！！