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

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

今回は、 **VSCodeの設定をオンライン上で保存し、復元できる VSCode 拡張「[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)」**を紹介をします。

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

**(※注)以下の2つの記事は古い方法です。**
[【初心者】VSCodeの設定同期エクステンション「Setting Sync」](https://qiita.com/tomokei5634/items/22128efe306ce9bc5682)
[VScodeの設定共有（SettingSync）](https://qiita.com/torun225/items/e6823fc22e5ae79247fe)

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

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

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

![Screenshot from 2019-12-08 09-35-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/475380f6-bcab-47d7-24a3-d8da6c5c101c.png)

![Screenshot from 2019-12-08 09-38-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/094e9777-4b29-c8d8-4025-d1ecf87258a5.png)

設定ファイルを選択し、

![Screenshot from 2019-12-08 09-50-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/b8aa6c73-fab9-f120-cfff-2d7a216fb901.png)

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

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/26b937ff-1579-8599-326d-a0f0b0548326.png)


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

![Screenshot from 2019-12-08 10-02-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/a8b9532d-aedf-d394-acb5-351044d91625.png)

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

# VSCode の設定を共有する方法

##「Settings Sync」 is 何？
Gist という、手軽にファイルをアップロード・ダウンロードできるサービスを利用して、 VSCode の設定ファイルを保存・復元できる VSCode 拡張です。
[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
[Gistでソースや文書をシェアする](https://qiita.com/hkusu/items/18cbe582abb9d3172019)

具体的には、ユーザーフォルダに含まれる設定をすべて保存・復元できます。
1. 設定ファイル (settings.json)
2. キーバインディングファイル (keybindings.json & keybindingsMac.json)
3. デバッグ構成ファイル (launch.json)
4. スニペットフォルダ (Snippets)
5. VSCode拡張 & 拡張の設定 (extensions.json)
6. ワークスペースフォルダ (Workspaces)


## 事前準備
GitHub アカウントの取得
参考 : [GitHub 入門 ～アカウントを作成する方法～
](https://proengineer.internous.co.jp/content/columnfeature/7103)


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

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

![Screenshot from 2019-12-08 09-30-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/03d72506-b2c9-9a01-c2c4-f8cec71cc56c.png)

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

![Screenshot from 2019-12-08 09-35-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/f1fa1694-c548-717b-2009-6fbce0d8d4f9.png)

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

![Screenshot from 2019-12-08 09-38-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/1144b937-81e3-7d75-0fce-5bebd6e7ed52.png)

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

![Screenshot from 2019-12-08 09-42-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/e2d6be76-eedc-c247-3a32-ca7f5b79c13d.png)

### 3. 設定を保存する（Gist へのアップロード）
「SKIP (NEW ONE WILL BE CREATED UPON FIRST UPLOAD)」をクリックして、「Welcome to Settings Sync」のページに戻ります。

![Screenshot from 2019-12-08 16-01-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/89209174-2f0b-48a4-0630-344c9499249f.png)

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

![upload.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/f17e0252-a9a6-3756-0a8c-55a719eb0f8f.png)


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

![yes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/2030974c-0a40-b0af-dc39-43321f950196.png)

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

![popup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/739297dd-b64a-7701-331a-73d7cf4b8727.png)


##設定の復元(Gist からダウンロード)
### 1. Settings Sync のインストール

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

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

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

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

![Screenshot from 2019-12-08 09-50-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/7ee1b87c-0297-e57e-df99-cd250cf1d239.png)

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

![Screenshot from 2019-12-08 09-50-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/520a7f53-b7a5-7933-3945-84fbb0940f3b.png)

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

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/f76eba1b-a54b-4aca-75d6-6c4298fa76b9.png)

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

![Screenshot from 2019-12-08 10-02-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/91ba2f80-99c5-11cb-017f-fd45c35f8d56.png)

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

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

###2. 自分の Gist のページに飛ぶ
画像のように、右上の自分のアイコンをクリックし「Your gists」を選択する。
![select_gist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/655d47ff-a730-770b-332a-8e159c4138a0.png)

###3. Gist を削除する

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

![Screenshot from 2019-12-08 18-03-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/c3dd96bb-f92f-9503-cb4d-58bfaac6db31.png)

「delete」をクリックして Gist を削除する
![Screenshot from 2019-12-08 18-03-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250243/99b484cf-b4e8-f6f5-a13a-2765b8cb7dc7.png)

これで、 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](https://github.com/shanalikhan/code-settings-sync/wiki/Custom-Sync)を確認してください。

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

---------------------------------------
他にも機能はありますが、詳しくは公式の[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)を確認してください。

# おわりに
今回は、 **VSCode(VisualStudioCode) の拡張機能やその設定、キーバインディングなどのデータをオンライン上で保存し、また復元できる** VSCode 拡張「[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)」を紹介をしました。

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