Visual Studio Codeの拡張機能を複数PCで同期する

複数PCで拡張機能を同じようにインストールするのは大変と言うことで、同期の方法を調べていたら標準機能で出来そうだったのですが、現在はインサイダー版とのことで、一旦は3rd Party製の「[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)」で設定してみます。
[「Visual Studio Code」が設定の同期に対応、Insider版でテスト中](https://forest.watch.impress.co.jp/docs/news/1240071.html)

今回はMac側の拡張機能をWindows側に同期してみたいと思います。

# MAC側にインストール

## インストール済みの拡張機能を確認する
以下の記事を参考にさせて頂きました。
[VSCode インストール済 プラグイン一覧の確認方法 (コマンド)](https://qiita.com/koshilife/items/3ed4b1c28de233f39ebb)

### code コマンドを動くようにする
そのままでは以下のエラーが出るようです。

```sh
% code .
Your PYTHONPATH points to a site-packages dir for Python 3.x but you are running Python 2.x!
     PYTHONPATH is currently: "/usr/local/lib/python3.7/site-packages/:"
     You should `unset PYTHONPATH` to fix this.
/usr/local/bin/code: 行 10: ./MacOS/Electron: No such file or directory
```
python2.7系が起動されるためのようです。

```sh
% `which python` --version
Python 2.7.16
```

以下のScriptを修正します。
10行目の`python`を`python3`に変更します。

```sh 
% grep python /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code
function realpath() { python -c "import os,sys; print(os.path.realpath(sys.argv[1]))" "$0"; }

% vim /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code

% grep python /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code
function realpath() { python3 -c "import os,sys; print(os.path.realpath(sys.argv[1]))" "$0"; }
```
※何でディレクトリに空白を入れるんでしょうね。

### 一覧を表示する
しなくてもいいですが、一応確認してみます。

```sh 
% code --list-extensions
batisteo.vscode-django
CoenraadS.bracket-pair-colorizer
DavidAnson.vscode-markdownlint
donjayamanne.githistory
donjayamanne.jupyter
eamodio.gitlens
EditorConfig.EditorConfig
esbenp.prettier-vscode
formulahendry.vscode-mysql
foxundermoon.shell-format
GitHub.vscode-pull-request-github
googlecloudtools.cloudcode
GrapeCity.gc-excelviewer
ionutvmi.path-autocomplete
James-Yu.latex-workshop
julialang.language-julia
mechatroner.rainbow-csv
mhutchie.git-graph
mosapride.zenkaku
ms-azuretools.vscode-docker
MS-CEINTL.vscode-language-pack-ja
ms-python.python
ms-vscode.Go
msjsdiag.debugger-for-chrome
pkosta2005.heroku-command
rogalmic.bash-debug
rogalmic.zsh-debug
samghelms.jupyter-notebook-vscode
Shan.code-settings-sync
shardulm94.trailing-spaces
tht13.python
VisualStudioExptTeam.vscodeintellicode
vscode-icons-team.vscode-icons
WakaTime.vscode-wakatime
%
```
要らないものがあれば削除しておきます。

## 拡張機能「Settings Sync」をインストール
Marcketplaceからインストールします。

「[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/cb53999f-66fe-befe-cfea-7989f6a58541.png)
「Install」ボタンを押すとVSCodeが起動します。

## GitHubの「Token」と「Gist Id」を取得
### GithubにLoginする
https://github.com/settings/profile
「Developer settings」⇒「Personal access tokens」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/c31eabbe-33d9-35e7-9bd2-9713ae2b070f.png)
### New personal access tokenを設定する
- Note：VSCode Setting Sync(任意)
- [x] gist：Create gistsにチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/b72d390d-dc90-8f47-989c-6e374f8b3dd8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/1de80b15-704d-598a-06e5-671dfc54e328.png)

##「Generate Token」ボタンを押してTokenを生成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/76de1eef-8ad8-0c53-cd41-ad5f5bbed417.png)
新しいトークンが作成されます。
トークンをもう一度見ることはできないので必ずメモしておいてください。

##「Gist Id」を取得する
https://gist.github.com/{自分のGithubID}
※Token取得前にGistページを作成していたため、「cloudSttings」というリンクが見つかりませんでした。

新しいGistページを作成すると表示されました。金色の笑うセールスマンみたいなアイコンの横のリンク「cloudSttings」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/0c2a0472-b799-f6cb-43b2-5a56c579e552.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/45519c46-22a0-e5b7-02ce-b64e3e1ec592.png)
`https://gist.github.com/ユーザー名/ランダムな英数字` のランダムな英数字(GistID)をメモします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/49682ada-7f5b-0b58-561c-22bcd2b3215c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/fd5d1066-e0bb-1e73-2dc5-35a9a5541547.png)
メモしておいたTokenとGistIDを登録します。左下の`✓`をクリックして更新します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/3e603ed5-bc91-b57d-7d6f-ac7536c19db9.png)

Gistにアップロードされました。`Secret`アイコンがあるので、本人以外には見れないと思いますが念のため、見られてはまずそうな内容がアップロードされていないか確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/38f7c633-d95f-aff8-c261-10a910f588fa.png)



## 「Setting Sync」の設定をアップロード（同期）する方法
アップデートしたい場合はVSCodeのコマンドパレットより「設定をアップロード」を実行するかショートカットキー「Shift + Option + U」を実行してください。

## 「Setting Sync」の設定をダウンロード（同期）する方法
設定をダウンロードするにはコマンドパレットより「Sync : 設定をダウンロード」を実行するかショートカットキー「Shift + Option + D」を実行してください。
別のPCで初回時は初期設定で入力した「Token」と「Gist Id」を入力する必要があります。


# Windows側
## インストール済みの拡張機能を確認する
PowerShellからVSCodeが起動するか確認。こちらは問題無さそうです。
だいぶ内容が違いますが。。。

```sh 
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

Install the latest PowerShell for new features and improvements! https://aka.ms/PSWindows

PS C:\Users\nandy> code .
```
インストール済みの拡張機能を確認します。

```sh 
PS C:\Users\nandy> code --list-extensions
jebbs.plantuml
jithurjacob.nbpreviewer
MS-CEINTL.vscode-language-pack-ja
ms-vscode-remote.remote-wsl
pavan.VSNotebooks
rogalmic.bash-debug
Shan.code-settings-sync
WakaTime.vscode-wakatime
PS C:\Users\nandy>
```
## 拡張機能「Settings Sync」をインストール
Mac側と同じように、Marcketplaceからインストールします。
「[Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/cb53999f-66fe-befe-cfea-7989f6a58541.png)
「Install」ボタンを押すとVSCodeが起動します。「Install」ボタンを押下します。

## Github、Gistの設定を行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/12dbc959-06bd-e305-d50b-3704832579a2.png)
* 「EDIT CONFIGURATION」を押下する。
　「Token]と「GistID」を入力
* コマンドパレットより「Sync : 設定をダウンロード」を実行するかショートカットキー「Shift + Cntl + D」を実行する。

## Mac側の拡張機能の情報が同期され、不足分はインストールされる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/cf168a2a-02fe-8a76-edb6-7fd1afe57a40.png)

### 「あっ、」と思ったこと
* 拡張機能が同期されるだけなので、アプリなどが同期されるわけではありません。<br>
※Windows側にGolang、Gitなどはインストールされていませんね(多分)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/f1d1e283-0d4a-9b11-505e-cb365685bdd2.png)
* Mac/Windowsに個別の問題などは同期時にエラーになりそうですね。<br>運用しながら調整ですね。

# WSL側
Windows System for Linux側にも同様の設定をします。
VSCodeがWSLを検知すると「Visual Studio Code Remote - WSL」をSuggestionしてくれてあとは適当に同期してくれます（多分）
> 手抜きですいません

## Visual Studio CodeのFontはWindows側にインストール
したものが使われます。当然といえばそうですが。
Fontは[Noto Mono for Powerline](https://github.com/powerline/fonts/blob/master/NotoMono/Noto%20Mono%20for%20Powerline.ttf)をWindows上でインストールしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/6dec57c7-5b7a-8be2-f703-232598638922.png)
### VSCodeの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223848/8a1f5447-8731-c101-8114-e3b706e92e66.png)


---
:qiita: