最近、プログラミングはもっぱらVSCodeで行っています。
VSCodeは無料でありながら、動作も速くて機能も充実しているので、コーディングの効率が上がります。
そのため今回、メインPC以外でも使用しようと、設定をしようとしてみましたがやはり面倒。
VSCodeの設定をメインPCと同じに同期出来ればいいのに…
と思っていたら、ちゃんとそういった用途の拡張もありました。
ということで今回は「VSCodeの設定情報を他PCと同期する方法」を自分用のメモがてら紹介したいと思います。
目次
設定情報を同期するのに必要なもの
今回の設定に必要となるものはこちら。
今回、VSCode拡張の「Settings Sync」を使用した方法での同期方法を説明します。
「Settings Sync」で同期を行うには、GitHubのアカウントが必須になります。
アカウントを持っていない場合は登録作業を行っておいてください。
主な手順
VSCode設定の同期を行うのに必要な主な手順はこちら。
- GitHubで必要情報を取得する
- Settings Syncのインストール
- Settings Syncの設定
- Settings Syncで同期を行う
最初に少し面倒な設定を行う必要はありますが、複数のパソコン環境で同じ設定を繰り返すよりは、遥かに労力は少ないかと思います。
GitHubで必要情報を取得する
同期を行うには、VSCodeからGitHubを操作するための情報が必要になります。
具体的に言うと「Gistのアクセストークン」と「Gist ID」が必要になります。
Gistアクセストークンの取得方法
Gistのアクセストークンを取得するには、まずはGitHubにログインしてください。
GitHubのメニューから「Settings」を選択してください。
左側にメニューが表示されるので、その中から「Developer settings」を選択してください。
さらに左側のメニューにある「Personal access tokens」を選択してください。
「Personal access tokens」画面の右上にある「Generate new token」を選択します。
「New personal access token」画面が表示されるので「Note」に「VSCode Settings Sync」とでも入力してください（※何に利用するためのアクセストークンか分かるものであれば入力は何でもOK）。
下の方にスクロールしていき「Gist」のチェックボックスのみにチェックを入れてください。
チェックを入れたら下の方にある「Generate token」ボタンを押してください。
するとトークン情報が表示されるので、コピーして保存しておいてください。
このトークンは、この画面上でしか表示されません。画面を遷移してしまうと今後二度と表示されることはないので、しっかりとメモしておきましょう。
Gist IDの取得方法
次に「Gist ID」を取得します。
Gist IDとは、「Gistの個別ページURLのID」になります。
例えば、以下のURLだと赤色の部分です。
https://gist.github.com/yhira/1cfcf02a8bafcb4f3238931c47c73f97
まずは、VSCode共有用のGistを作成します。
Gistの新規作成ページを開きます。
するとこのようなページが表示されるかと思います。
入力画面に対して以下のように入力します。
僕の場合は、以下のように入力しました。
- 説明文：VSCode Settings Sync（なんでもOK）
- ファイル名：cloudSettings（なんでもOK）
- 本文：aaa（なんでもOK）
- 「Create secret gist」ボタンを押す（設定情報を公開しても良い場合は「Create public gist」ボタンでも可）
Gistを作成するとページ遷移すると思うので、そのURLのID部分を取得します。
こちらの部分。
https://gist.github.com/ユーザーID/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
こちらの「Gist ID」も何かにメモしておいてください。
Settings Syncのインストール
次に、VSCode上で「拡張」メニューを選択してください。
検索の入力ボックスにSettings Syncと入力してインストールを行ってください。
インストール画面が表示されるので「Install」ボタンを選択してください。
これで拡張のインストール作業は終了です。再起動の必要もありません。
Settings Syncの設定
「Settings Sync」のインストールを終えると、以下のような画面が表示されます。
この中から「EDIT CONFIGURATION」ボタンを選択します。
先ほど取得した「Gist ID」と「アクセストークン」を入力します。
画面左下にチェックマークが出れば設定完了です。
Settings Syncで同期を行う
最後に、VSCode設定をGitHubを利用して同期します。
同期元のPCでの設定
「表示」メニューから「コマンドパレット」を選択してください。Ctrl + Shift + P でも可。
入力欄に「Sync」と入力し「アップデート・アップロードの設定（Update / Upload Settings）」コマンドを選択してください。
これで、既にVSCodeで設定されている設定情報がGitHubにアップされます。
同期先のPCの設定
同期先のPCでも、先程の手順で「Settings Sync」拡張をインストールしてください。
その後、メモしてある「アクセストークン」と「Gist ID」情報を入力してください。
その後コマンドパレットを開きます。
同期先のPCでは「設定をダウンロード（Download Settings）」コマンドを選択してください。
以下のような出力画面に設定や拡張のダウンロード情報が表示されます。
全ての設定がダウンロードされた後、再起動すれば同期完了です。
まとめ
このように、初期設定さえ終えてしまえば、コマンドパレットから「設定のダウンロード」コマンドを選択するだけで、複数PC全てで同様の設定を利用することができます。
使用していて設定の変更があれば、コマンドパレットから「設定のアップデート」を選択すれば、設定のアップデートも行えます。
1台目のPCの設定さえ終えてしまえば、2台目以降は以下の手順のみで行えます。
- 「Settings Sync」拡張のインストール
- メモしてある「アクセストークン」と「Gist ID」の入力
- 設定のダウンロード
PC2台目以降は、1分ぐらいで設定が完了するかと思います（拡張のダウンロードとかがあるので多少の処理時間はかかります）。
この方法で、僕の複数のサブPCにもVSCodeの設定を同期することができました。
