[Visual Studio Code] 設定檔同步

Visual Studio Code(VS code) 是本人目前習慣的編輯器，但其實我是從 sublime 跳坑過來的，原因不外乎是 VScode 本身有許多好用的插件，讓平常的辦公效率快上許多！(但開啟速度慢也是它最大的缺點)

但基礎版面、字體、顏色的配置我本身還是比較喜歡 sublime，一番折騰後，好不容易調成自己喜歡的版面：

原始介面 vs 個人sublime皮膚

結果換到另外一台電腦，尷尬地發現一切又要重新設定！？所有插件的安裝又要重新裝一次！？好想要一鍵同步所以設定與插件安裝啊～

這時候，插件 Setting Sync 就能夠滿足我們的需求！

前置作業與原理說明

首先

你要有 github 帳號，沒有的話左轉去申請一個ＸＤ

原理

很簡單，我們會把 vscode 的設定檔，上傳到 github gist，之後在新的電腦，就可以直接下載同步設定檔，變成自己習慣的開發環境～

但是，照理來說不管上傳、下載都會需要帳號密碼（用來登入你的github），可是每次都要輸入太麻煩，所以 github 有另外一個服務是產生 personal access token，讓你可以直接使用這個「令牌token」作為登入的動作。
所以，這個 token 等於是個人帳密資訊，切記要存好不要洩漏出去！

接下來，我們分兩個主要步驟：「上傳設定檔」、「下載設定檔」

上傳設定檔

1. 安裝 Setting Sync
左邊欄點選 icon「Extension」，並在搜尋列輸入「setting sync」，第一個就會跳出來了。

2. 登入github
第一次安裝，會跳出頁籤 [Welcome to Setting Sync]，這時我們點擊登入「LOGIN WITH GITHUB」

3. 跳轉網頁與設定連線 github
輸入你的 github 帳密，登入成功後，會叫你「即可關閉」

嗯...你可以關閉了ＸＤ

這時回到 vscode，會多一個頁籤 [Select Your Existing Gist]。因為給定我們還沒有上傳任何 gist，我們直接拉到最下方點選「SKIP（NEW ONE WILL BE CREATED UPON FIRST UPLOAD）」，這時就會將你目前 vscode 的設定檔上傳一份到 gist。

上傳完後，vscode 系統會提示已上傳

這時候就可以去 github gist 看看，是不是真的多了一份 gist～

再點進去，可以發現網址最後代的參數就是 gist ID: 7a1d72b47ec79e97550700b20f992061 ，可以先 copy 下來，等下會用到。

4. 編輯 COFIGURATION
這時我們再回到 vscode 的頁籤 [Welcome to Setting Sync]，接著改成點選「EDIT CONFIGURATION」

跳出新頁籤 [Sync Setting]，我們只要針對「Gist ID」與「獲取令牌token」這兩個欄位就好。
Gist ID 就用剛上傳好的，像我的是：7a1d72b47ec79e97550700b20f992061，但「獲取令牌 token」就需要使用 github 另一個服務 → personal access token

5. 產生 personal access token for gists
首先到 github 個人頁籤右上角，點擊後選擇「Settings」

接著，在左邊標籤找到「Developer settings」後點選

進去後，再點選左邊「Personal access token」，接著我們選擇點選「Generate new token」，產生一個新的讀取gist的令牌

我們把這個新的token命名為「VSCode_SyncSetting」，方便日後好辨識。在下方的可以這個token要讀取的scope，我們選擇可以讀取 gist 就好，最後再點選「Generate token」即完成。

6. 關於這組 token
接下來很重要，剛剛產生的 token：ghp_muTxs…….EK0 只會顯示一次，所以 一定要把它copy下來 ，要不然之後你只能重新產生一份。
還有

token 不要亂給別人！！！
token 不要亂給別人！！！
token 不要亂給別人！！！

很重要所以說三次！這個是你的 github 連線登入資訊

7. 輸入 Gist ID 與 token
回到頁籤 [Sync Settings]，把我們剛剛的 Gist ID & token 輸入後，就大功告成了。

這是我自己的設定檔，別傻傻照抄

8. 開始上傳！
接著可以按下快捷鍵，vscode 左下角就會顯示上傳最新的設定：

Shift⇧ + Option⌥ + u (macOS)
Shift + Alt + U (windows)

下載設定檔

現在我換了一台電腦、安裝新的 vscode，一樣打開程式碼，現在都還是原始設定，接著我們要開始換成自己想要的皮膚與插件～

whole original vscode setting

1. 一樣先安裝 setting sync
2. 安裝完直接點進去「EDIT CONFIGURATION」

3. 這時候就輸入剛剛的 Gist ID & token

4. 接著按下快捷鍵

Shift⇧ + Option⌥ + d (macOS)
Shift + Alt + d (windows)

讓子彈飛一會兒，接著就可以看到 vscode 換成我想要的皮膚，包括其他安裝的插件，也一起同步完成！

同步下載中(左) vs. 脫胎換骨完成(右)

終於

往後我們可以優雅地把不同裝置的 vscode 都變成自己熟悉的模樣：）