VSCode(Visual Studio Code)の設定を同期させる拡張機能「Setting Sync」が便利

VSCode(Visual Studio Code)の設定を同期させる「Setting Sync」が便利だったので紹介します。

筆者は普段、自宅ではiMac、外ではMacbook Airを使用しており、エディタはVisual Studio Code（以下、VSCode）を使用してます。最近ではWindowsでもVSCodeを利用する機会があり、各々の環境を同期させたいなと思い、拡張機能「Setting Sync」を導入してみると簡単に設定を同期させることができ、とても便利だったので導入方法を紹介します。

VSCode(Visual Studio Code)の設定を同期させる拡張機能「Setting Sync」とは

拡張機能「Setting Sync」はVSCodeで環境設定を同期させるための拡張機能です。GitHubのGist（ファイル単位でファイルを公開できるサービス）にVSCodeの環境設定をアップロードし、同期させたい環境でその設定データをダウンロードし、そのファイルを元にして同期させます。同期されるファイルは下記の通りです。
extensions.json（拡張機能）
keybindings.json（キーカスタマイズ設定）
settings.json（環境設定）

Settings Sync – Visual Studio Marketplace

VSCodeの拡張機能「Setting Sync」で設定を同期させると何が便利なのか

一度設定しておけばその後はショートカットを実行するだけで設定をアップロード、ダウンロードできるので、なにか設定を変更したり拡張機能を追加しても、他の環境で簡単に設定を同期さえることができ便利です。今まで手動で設定を合わせていたユーザーや複数の環境で作業をしているユーザーには必須の拡張機能といえるでしょう。

VSCodeの拡張機能「Setting Sync」のインストール方法

「Setting Sync」をインストールするのは初めにいくつかの設定が必要なので多少面倒ではあるものの10分もあれば初期設定は完了できるでしょう。またGitHubのGistを利用するので、GitHubのアカウントも前もって準備しておく必要があります。

GitHubの「個人アクセストークン」と「Gist Id」を取得する

まずはGitHubの「個人アクセストークン」を取得しましょう。GitHubにアクセスし、メニューより「Settings」に入ります。

次に設定画面の左のメニューにある「Developer settings」に入ります。

次に開発設定画面の左のメニューにある「Personal access tokens」（個人アクセストークン）に入ります。

次に「Personal access tokens」のページに入ると右上に「Generate new token」のボタンがあるのでクリックし新規のトークンを作成します。

「Personal access token」の画面に入るとトークンの説明を各項目があるので任意の文字を入力してください。今回はわかりやすいように「VSCode Setting Sync」としました。

下部に「Create gists」のチェック項目があるのでチェックを入れて「Generate token」のボタンを押しましょう。

すると新しいトークンが作成されます。後ほど使用するのでこのトークンを「個人アクセストークン」としてメモしておいてください。（このトークンをもう一度見ることはできないので必ずメモしておくこと）

次に「Gist Id」を取得しましょう。右上のメニューより「Your gists」に入ります。

Gistのページに入ると「cloudSttings」というリンクがあるのでクリックしましょう。

すると下記のURLパターンをもったページに移動します。

https://gist.github.com/ユーザー名/ランダムな英数字（Gist Id）

このユーザー名の後にあるのがユーザーの「Gist Id」になりますので、これを「Gist Id」としてメモしておきましょう。これで、GitHubの「個人アクセストークン」と「Gist Id」を取得できました。

VSCodeの拡張機能「Setting Sync」のインストール

拡張機能「Setting Sync」のインストールはVSCodeの左メニューより拡張機能の画面に移り、「Setting Sync」と検索します。下記の画像の拡張機能が表示されるはずですのでインストールし再読み込みさせましょう。

VSCodeの拡張機能「Setting Sync」の初期設定

再読込が済んだら「コマンドパレット」より「Sync」を入力しましょう。すると下記のようなコマンドが表示されるので「設定をアップロード」（Update / Upload Settings）を選びましょう。

すると「Github の個人アクセストークンを入力してください」と表示されるので、そこに先程取得した個人アクセストークンをペーストしてエンターを押します。

次に、「Gist Id を入力してください」と表示されるので先程取得した「Gist Id」を入力してください。

そうすると現在の設定のアップロードが始まります。下記のようにログが表示されると成功です。（もし「個人アクセストークン」と「Gist Id」を逆に入力した場合はエラーになるのでコマンドパレットより「Sync : 拡張機能の設定をリセット」を実行して再度入力しなおしてください。）

この「個人アクセストークン」と「Gist Id」の入力工程は初回のみで次回以降は必要ありません。

VSCodeの拡張機能「Setting Sync」の使い方

これで初期設定は終わりましたので、設定のアップロードとダウンロードの方法を説明します。

VSCodeの拡張機能「Setting Sync」で環境設定をアップロード（同期）する方法

先程の初期設定の時点で一度設定のアップロードが実行されますが、その後にアップデートしたい場合はコマンドパレットより「設定をアップロード」を実行するかショートカットキー「Shift + Alt (Option) + U」を実行してください。アップロードした設定ファイルにはURLさえわかればアクセスすることができる状態にあるので、外部に知られたらよくないもが設定ファイルに含まれていないかどうか注意しておきましょう。

VSCodeの拡張機能「Setting Sync」で環境設定をダウンロード（同期）する方法

設定をダウンロードするにはコマンドパレットより「Sync : 設定をダウンロード」を実行するかショートカットキー「Shift + Alt (Option) + D」を実行してください。こちらも初回時のみ先程の初期設定と同様に「個人アクセストークン」と「Gist Id」を入力する必要がありますので同様に入力してください。正常に設定ファイルのダウンロードが実行されると下記のように再読込を促すダイアログが表示れるので「Yes」をクリックしてください。

これでVSCodeの環境設定が再読込され同期されました。

まとめ

今回は個人環境を想定しての使い方を紹介しましたが、この拡張機能では他に公開されている設定をダウンロードしたりできますので、プロジェクトチーム内で環境を統一させたりするのにも有効に使うことができます。そういうことで複数の環境でVSCodeを利用しているユーザーには必須の拡張機能「Setting Sync」の紹介でした。