Visual Studio Code 拡張機能を新しいパソコンに移行する方法

ごきげんよう、百合宮桜です。
会社のパソコンが新しくなった時にうっかり忘れがちな、VSコードの拡張機能の移行(´・ω・`)
同期しておけばモーマンタイ！ということに気が付いたので、同期の方法をメモしておきます。面倒くさがらずにさっさとやろうね！ 同期しないほうがよほど面倒だもの……💦

# 古いパソコンでの処理

1. 古いパソコンで Visual Studio Code を開きます

2. 設定 > サインインして設定を同期する をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/9fd44701-eba8-d290-d2af-0f3964dea4b9.png)

3. 画面右下に「GitHub.com にサインインしています」という通知が出て、ブラウザで GitHub のサインイン画面が立ち上がります

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/f444d5c0-ba45-f387-1117-986e25c90350.png)

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/d0ea2003-2705-31df-bea8-af6f6b2f3eb4.png)

    :::note warn
    GitHub か Microsoft アカウントのどちらかを選ぶことができます。
    選択せずに一定時間が経過すると、GitHub でつなごうとします。
    

4. ユーザー名やパスワードを入力し、サインインします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/93915196-c4f2-a1a9-9f8c-bd5d76af8975.png)


5. ブラウザ上部に「このサイトは Visual Studio Code を開こうとしています」という通知が出るので、「開く」をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/693b46d2-49af-500d-a775-fbe5f9e357be.png)

6. ブラウザがこの画面に切り替わればサインイン完了です

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/3fcb6ae0-7cb0-5954-6226-a30055e60f99.png)

    Visual Studio Code 側では「設定同期がオン」にチェックが入ります！
    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/62a979c6-b3b0-b261-80b3-73f1422b1fb3.png)


# 新しいパソコンでの処理

1. 新しいパソコンでVisual Studio Code を開きます

2. 設定を開きます

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/45ead1ae-60bf-74ee-d2fd-d4bc8b700d36.png)

3. サインインをクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/c2d1bd57-ca86-f71b-2f6a-f48e413eddbe.png)

4. 古いパソコンでサインインしたアカウントの種類を選択します

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/993cba0f-b3e7-a994-0bfe-8c31873eedd2.png)

    ※このホップアップが出てきたら、好きなブラウザを選んで「一度だけ」をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/2f6ce7c0-a3cb-6282-21e3-975c718b21ff.png)

5. ブラウザが開いて、GitHub のサインイン画面が立ち上がります

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/70dcc33d-cd06-90f0-c62c-564ec0f6cd00.png)

6. ユーザーネームとパスワードを入力し、「Sign in」をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/3017bafa-2c28-63ae-9b1d-4ce90d26a2bd.png)

7. この画面になったら、Continue をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/30e6f859-aa24-dec1-587e-16b1e7d47822.png)

8. ブラウザ上部に「このサイトは～」のホップアップが出てきたら、「開く」をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/d4816467-d873-c9db-c4d2-c67e7b972ef0.png)

9. これで拡張機能のインストールが完了しました！
    拡張機能をクリックすると、今まで使っていたものがインストールされているのがわかります

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/fbb0b1ad-3d69-63f7-b53b-81e724aae93a.png)

    :::note info

    Visual Studio Code の表示言語を変更する拡張機能が含まれていると、右下に以下のような通知が出ます。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/028228f1-509f-a679-33c8-b835330dadf2.png)

    Change Language and Restart をクリックして、VSコードを再起動してください。

    :::