VSCodeの設定を複数PC間で同期(共有)する方法

VSCode設定の同期

最近、プログラミングはもっぱらVSCodeで行っています。

ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

VSCodeは無料でありながら、動作も速くて機能も充実しているので、コーディングの効率が上がります。

そのため今回、メインPC以外でも使用しようと、設定をしようとしてみましたがやはり面倒。

VSCodeの設定をメインPCと同じに同期出来ればいいのに…

と思っていたら、ちゃんとそういった用途の拡張もありました。

ということで今回は「VSCodeの設定情報を他PCと同期する方法」を自分用のメモがてら紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

設定情報を同期するのに必要なもの

今回の設定に必要となるものはこちら。

  1. VSCode
  2. Settings Sync拡張
  3. GitHubのアカウント

今回、VSCode拡張の「Settings Sync」を使用した方法での同期方法を説明します。

「Settings Sync」で同期を行うには、GitHubのアカウントが必須になります。

GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects.

アカウントを持っていない場合は登録作業行っておいてください。

主な手順

VSCode設定の同期を行うのに必要な主な手順はこちら。

  1. GitHubで必要情報を取得する
  2. Settings Syncのインストール
  3. Settings Syncの設定
  4. Settings Syncで同期を行う

最初に少し面倒な設定を行う必要はありますが、複数のパソコン環境で同じ設定を繰り返すよりは、遥かに労力は少ないかと思います。

GitHubで必要情報を取得する

同期を行うには、VSCodeからGitHubを操作するための情報が必要になります。

具体的に言うと「Gistのアクセストークン」と「Gist ID」が必要になります。

Gistアクセストークンの取得方法

Gistのアクセストークンを取得するには、まずはGitHubにログインしてください。

GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects.

GitHubのメニューから「Settings」を選択してください。

Gitメニューから設定を開く

左側にメニューが表示されるので、その中から「Developer settings」を選択してください。

個人設定から開発者設定を開く

さらに左側のメニューにある「Personal access tokens」を選択してください。

パーソナルアクセストークン設定を選択

「Personal access tokens」画面の右上にある「Generate new token」を選択します。

新しいアクセストークンを生成する

「New personal access token」画面が表示されるので「Note」に「VSCode Settings Sync」とでも入力してください(※何に利用するためのアクセストークンか分かるものであれば入力は何でもOK)。

新しいアクセストークン情報の入力

下の方にスクロールしていき「Gist」のチェックボックスのみにチェックを入れてください。

Gistのアクセストークン作成チェック

チェックを入れたら下の方にある「Generate token」ボタンを押してください。

トークンの生成ボタンを押す

するとトークン情報が表示されるので、コピーして保存しておいてください。

新しく作成したトークン情報

このトークンは、この画面上でしか表示されません。画面を遷移してしまうと今後二度と表示されることはないので、しっかりとメモしておきましょう。

Gist IDの取得方法

次に「Gist ID」を取得します。

Gist IDとは、「Gistの個別ページURLのID」になります。

例えば、以下のURLだと赤色の部分です。

https://gist.github.com/yhira/1cfcf02a8bafcb4f3238931c47c73f97

まずは、VSCode共有用のGistを作成します。

Gistの新規作成ページを開きます。

GitHub Gist: instantly share code, notes, and snippets.

するとこのようなページが表示されるかと思います。

Gistの新規作成ページ

入力画面に対して以下のように入力します。

VSCode同期用のGist新規作成

僕の場合は、以下のように入力しました。

  1. 説明文:VSCode Settings Sync(なんでもOK)
  2. ファイル名:cloudSettings(なんでもOK)
  3. 本文:aaa(なんでもOK)
  4. 「Create secret gist」ボタンを押す(設定情報を公開しても良い場合は「Create public gist」ボタンでも可)

Gistを作成するとページ遷移すると思うので、そのURLのID部分を取得します。

こちらの部分。

https://gist.github.com/ユーザーID/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

こちらの「Gist ID」も何かにメモしておいてください。

VSCodeの拡張から、Gist設定用のページを作成する方法もあるのかもしれませんが、僕の環境では作成できませんでした。ですので確実にページを作成できる今回の方法を行いました。

Settings Syncのインストール

次に、VSCode上で「拡張」メニューを選択してください。

VSCodeの拡張メニューを選択

検索の入力ボックスにSettings Syncと入力してインストールを行ってください。

Settings Syncのインストール

インストール画面が表示されるので「Install」ボタンを選択してください。

Settings Syncのインストール画面

これで拡張のインストール作業は終了です。再起動の必要もありません。

Settings Syncの設定

「Settings Sync」のインストールを終えると、以下のような画面が表示されます。

Settings Syncの設定画面

この中から「EDIT CONFIGURATION」ボタンを選択します。

VSCodeでGitHubの初期設定

先ほど取得した「Gist ID」と「アクセストークン」を入力します。

Gist IDとアクセストークンを入力

画面左下にチェックマークが出れば設定完了です。

Settings Syncで同期を行う

最後に、VSCode設定をGitHubを利用して同期します。

同期元のPCでの設定

「表示」メニューから「コマンドパレット」を選択してください。Ctrl + Shift + P でも可。

表示メニューからコマンドパレットを開く

入力欄に「Sync」と入力し「アップデート・アップロードの設定(Update / Upload Settings)」コマンドを選択してください。

VSCodeの設定をアップロードする

これで、既にVSCodeで設定されている設定情報がGitHubにアップされます。

同期先のPCの設定

同期先のPCでも、先程の手順で「Settings Sync」拡張をインストールしてください。

その後、メモしてある「アクセストークン」と「Gist ID」情報を入力してください。

その後コマンドパレットを開きます。

表示メニューからコマンドパレットを開く

同期先のPCでは「設定をダウンロード(Download Settings)」コマンドを選択してください。

VSCodeの設定をダウンロードする

以下のような出力画面に設定や拡張のダウンロード情報が表示されます。

VSCodeターミナル

全ての設定がダウンロードされた後、再起動すれば同期完了です。

まとめ

このように、初期設定さえ終えてしまえば、コマンドパレットから「設定のダウンロード」コマンドを選択するだけで、複数PC全てで同様の設定を利用することができます。

使用していて設定の変更があれば、コマンドパレットから「設定のアップデート」を選択すれば、設定のアップデートも行えます。

1台目のPCの設定さえ終えてしまえば、2台目以降は以下の手順のみで行えます。

  1. 「Settings Sync」拡張のインストール
  2. メモしてある「アクセストークン」と「Gist ID」の入力
  3. 設定のダウンロード

PC2台目以降は、1分ぐらいで設定が完了するかと思います(拡張のダウンロードとかがあるので多少の処理時間はかかります)。

この方法で、僕の複数のサブPCにもVSCodeの設定を同期することができました。

サイト Visual Studio Code – コード エディター | Microsoft Azure

サイト Settings Sync – Visual Studio Marketplace