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

# 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のアカウントは[ここから](https://github.co.jp)無料で簡単に作れるので，持っていない人は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)`をクリック．
しばらくすると右下に以下のようなポップアップが現れる．

~~~terminal
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」と打つ．
一番上に出てくると思うので，それのインストールをクリック．

<!-- markdownlint-disable MD024 -->
### `LOGIN WITH GITHUB` をクリック
<!-- markdownlint-enable MD024 -->

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

<!-- markdownlint-disable MD024 -->
### GitHubのユーザー名とパスワードを入力
<!-- markdownlint-enable MD024 -->

ブラウザ上でユーザー名とパスワードを聞かれるので，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/<ユーザー名>/<Gist ID>)．

### 設定のダウンロード

`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"といったファイルが生成されてしまう．

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

~~~terminal
cp snippets\\cpp.json snippets/cpp.json
~~~

とするしかない．

### 追記

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

~~~bash
#!/bin/bash

WORKING_DIR=~/.config/Code/User

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

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

- [Qiita | 初心者向けシェルスクリプトの基本コマンドの紹介](https://qiita.com/zayarwinttun/items/0dae4cb66d8f4bd2a337)
- [Qiita | bashで変数から部分文字列を取得する](https://qiita.com/koara-local/items/04d3efd1031ea62d8db5)

### さらに追記

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

## 参考リンク

- [VSCode(Visual Studio Code)の設定を同期させる拡張機能「Setting Sync」が便利](https://www.karelie.net/vscode-setting-sync/)
- [Visual Studio Codeのおすすめ拡張機能 (3/3)](https://www.atmarkit.co.jp/ait/articles/1606/22/news044_3.html)