LoginSignup
1
3

More than 3 years have passed since last update.

Settings SyncでVS Codeの設定をPC間で同期する

Posted at

Settings SyncでVS Codeの設定をPC間で同期する

私はエディターにVS Codeを使用している.
VS Codeが好きなので自分のPCにも研究室のPCにもWindowsにもUbuntuにもVS Codeを入れているが,PCそれぞれでVS Codeの設定が違っていては不便である.
そんな時は,VS Codeの拡張機能であるSettings Syncが役に立つ.
Settings Syncを使えば,GitHubのGistにVS Codeの設定をアップロードしたり,逆にGistから設定をダウンロードしたりできるため,異なるPC間で設定を同期させることができる.
さらに拡張機能の情報までアップロード・ダウンロードできるため,PC間で拡張機能も統一できる.
以下で,VS Codeの設定のアップロードの方法と設定のダウンロードの方法を説明する.

GitHubのアカウントを作成する

Settings SyncはGistを使うため,GitHubのアカウントを持っていないと利用することが出来ない.
GitHubのアカウントはここから無料で簡単に作れるので,持っていない人はSettings Syncを導入する前に作っておく.

VS Codeの設定をアップロード

Settings Syncのインストール

拡張機能の検索欄で「Settings Sync」と打つ.
一番上に出てくると思うので,それのインストールをクリック.

LOGIN WITH GITHUB をクリック

Settings Syncをインストールすると,VS Code内でWelcome to Settings Syncというタブが立ち上がる.
そこでLOGIN WITH GITHUB をクリック.
ブラウザが立ち上がる.

GitHubのユーザー名とパスワードを入力

ブラウザ上でユーザー名とパスワードを聞かれるので,GitHubアカウントのそれを入力してSign inをクリック.
Device verificationという画面が表示されたら,恐らくGitHubからメールが来ていると思うので,メールに書いてある番号を入力してVerifyをクリック.

Success! You may now close this tab.と表示されたらOK.
VS Code上でSelect Your Existing Gistというタブが新たに開く.
ブラウザは閉じてよい.

SKIP (NEW ONE WILL BE CREATED UPON FIRST UPLOAD)をクリック

VS Code上のSelect Your Existing Gistタブ内で,SKIP (NEW ONE WILL BE CREATED UPON FIRST UPLOAD)をクリック.
しばらくすると右下に以下のようなポップアップが現れる.

Sync: アップロード完了。
Gist ID: <数字の羅列>。設定をダウンロードするには,このIDを他のマシンにコピーして使用してください

GistにcloudSettingsができているか確認

GitHubのページに移動して右上の自分のアイコンをクリックし,Your gistsをクリック.
<アカウント名>/cloudSettingsというものができていたらOK.

ちなみに,cloudSettingsをクリックしてアドレスバーに表示されるアドレスの,アカウント名以下の文字列が,Gist ID.
他のPCに設定を適応するときはGist IDを使うので忘れたらここで確認.

別のPCのVS Codeに設定をダウンロード

設定をダウンロードしたいPCのVS CodeにSettings Syncのインストール

拡張機能の検索欄で「Settings Sync」と打つ.
一番上に出てくると思うので,それのインストールをクリック.

LOGIN WITH GITHUB をクリック

Settings Syncをインストールすると,VS Code内でWelcome to Settings Syncというタブが立ち上がる.
そこで,LOGIN WITH GITHUB をクリック.
ブラウザが立ち上がる.

GitHubのユーザー名とパスワードを入力

ブラウザ上でユーザー名とパスワードを聞かれるので,GitHubアカウントのそれを入力してSign inをクリック.
Device verificationという画面が表示されたら,恐らくGitHubからメールが来ていると思うので,メールに書いてある番号を入力してVerifyをクリック.

Success! You may now close this tab.と表示されたらOK.
VS Code上でSelect Your Existing Gistというタブが新たに開く.
ブラウザは閉じてよい.

Gist IDを入力

VS Code上のSelect Your Existing Gistというタブ内のGist ID欄に,VS Codeの設定が保存されているGistのGist IDを入力する.
Gist IDの調べ方は,GitHubのページに移動して右上の自分のアイコンをクリックし,Your gists -> <ユーザー名>/cloudSettingsとクリックしていく.
表示されたページのURLの後ろの部分の数字の羅列がGist IDである (https://gist.github.com/<ユーザー名>/).

設定のダウンロード

alt + shift + Dでダウンロード開始.

拡張機能を更新した場合は,念のためVSCodeを再起動する.

Windowsでの設定をUbuntuにダウンロードしたときに,snippetsが反映されない件について

Windows PCのVS Codeでsnippetsを設定し,Setting Syncでアップロードした.
これをUbuntuのVS Codeにダウンロードしたときに,snippetsが反映されないというバグが起こった.

原因はパスの区切り文字にある.
Windowsはフォルダ間の区切りが\だが,Ubuntuは/である.
snippetsはsnippetsフォルダごとGistにあげられるため,フォルダ区切りが原因でうまく取り込めない.
Ubuntu側に"snippets\cpp.json"といったファイルが生成されてしまう.

現段階での対処法は,手動で

cp snippets\\cpp.json snippets/cpp.json

とするしかない.

追記

この問題に対処するためのシェルスクリプトを作成した.
Ubuntuでalt + shift + Dを行った後に以下のシェルスクリプトを実行すれば,snippetsが反映される.

#!/bin/bash

WORKING_DIR=~/.config/Code/User

for file in $WORKING_DIR/snippets\\*
do
    mv $file $WORKING_DIR/snippets/"${file#*snippets\\}"
done

このシェルスクリプトを作る際に参考にしたページのリンクを貼っておく.

さらに追記

このバグはv3.4.3で無事修正された.
現在は何もしなくてもWindows側で設定したsnippetsがUbuntu側にも反映されるようになった.
ありがたい.

参考リンク

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3