在上兩篇文章中，我們學到了VSCode是怎麼使用快捷鍵讓我們編寫代碼時更靈活便捷，甚至是可以基本脫離鼠標。還介紹了很多常用的插件讓我們如虎添翼，就像VSCode穿上了傳奇級別的裝配一樣。
還沒有閱讀以上說到的兩篇文章《VSCode常用快捷鍵大全》，《VSCode插件大全》，可以先過去學習學習哈。
有了武功祕籍（快捷鍵）和高深的內功心法（插件），那VSCode是不是應該是無敵了呢？天災難逃，人禍難免，我們電腦可能會壞或者電腦還可能要退休，甚至是我們有多臺電腦的可能。那這個時候我們精心配置的VSCode不是要從頭再來？
所以這篇文章我來給大家介紹一個VSCode的插件專門來解決這個問題。讀完這篇文章我們將學會如果一鍵同步所有VSCode中精心配置的插件，快捷鍵和配置。
文章導航
「一」配置同步插件
Settings Sync是一款免費好用的VSCode插件。它是一款使用GitHub中的Gists作爲配置文件存儲來實現同步的。它可以讓我們在無數個設備上同步VSCode的配置。
可以爲我們同步以下內容：
- 配置文件
- 快捷鍵配置
- 啓動文件記錄
- Snipper文件（自定義代碼模版）
- VSCode插件和插件配置
- Workspace文件夾
聽起來確實覺得很高大上，但是真的如此容易就可以做到所說的效果嗎？確實是的，配置不復雜也不繁瑣。最多就是複製黏貼以下一個ID，而且首次使用都是自動的。只要登陸GitHub，然後接下來的一切就可以交給這個插件的腳本了。
雖然說簡單，但是我第一次配置的時候也掉坑了幾次，所以接下來我一步一步給小夥伴們講解詳細的配置方式。
「二」插件配置與搭建
插件的文檔簡單的描述了使用步驟，但是個人在使用的過程中，還是覺得頗爲迷惑。很多細節方面如果文檔有的話就可以少掉幾根頭髮了。
所以這裏我整理了一套手牽手教程帶大家一起把配置同步一起搭起來。
安裝 Settings Sync與準備
在插件搜索欄輸入Settings Sync然後狠狠的按下安裝按鈕。
在介紹這個插件的時候提到，這個插件是使用GitHub賬號中的Gists來儲存配置的，所以我們必須要有一個GitHub賬號。如果已經有Github賬號的可以跳過註冊教程。
註冊GitHub
- Username：填入你的用戶名，如果以後有做開源項目的打算，給自己取個好名，可能會跟你一輩子的哦。
- Email address：填入我們常用的電子郵箱。
- Password：顧名思義，填入我們的登陸密碼。
- Email preferences： 勾上的話，GitHub會不定時給你郵箱發送產品更新，公告或者是優惠等通知。（不想被郵件打擾，可以不勾）
賬號信息這裏的防機器人驗證，只需要點擊圖片兩方的箭頭讓圖片旋轉到圖片的正確方向然後點擊Done即可。然後點擊Create account。
如果點擊
Create account後出現以下錯誤，證明是你的密碼安全級別不夠，GitHub認爲你的密碼太容易被猜到。所以推薦大家的密碼要用“大小寫+數字+符號”的規則。
點擊Create account之後，GitHub會開始驗證你的賬號 … …
最後還會出現一次剛剛說到的防機器人驗證圖片。旋轉好這個圖片，然後點擊Join a free plan即可（顧名思義，“加入免費套裝”）。
註冊成功後會到達這個頁面，這裏會問你幾個問題：
- What kind of word do you do, mainly? — 你主要是從事那種工作？
- How much programming experience do you have? — 您的編程熟悉程度？
- What do you plan to use GitHub for? — 您準備用GitHub來做什麼？
- I am interested in — 您對什麼感興趣？
這些問題如果你在意的話，可以回答下，主要用於Github給你推送/推薦項目的。最後點擊 Complete setup，就可以了。
最後GitHub會給我們的電子郵箱發一封驗證郵件，前往我們的郵箱點擊驗證鏈接就可以完成GitHub的賬號註冊了。
用GitHub賬號登陸
前面說到這個插件是基於GitHub中的Gist來儲存配置的，所以我們需要使用GitHub授權登陸，獲取到Gist的讀寫權限才能實現配置的保存和讀取。簡單來說所有我們的配置數據，都被儲存在我們GitHub上的Gist之中。方便保存和下載。
授權登陸GitHub
安裝好VSCode之後會自動出現這個頁面，如果你們是第一次使用，點擊LOGIN WITH GITHUB
以前我看過有很多教程，要我們到GitHub上創建個人訪問令牌之類的。那些都是過時的配置方式，現在可以直接通過VSCode插件頁面登陸GitHub，即可獲取到一個自動生成的私密個人令牌。這種方式方便多了。
點擊後，VSCode上方會彈出一個提示框，狠狠的點擊打開就完事！
當然謹慎和強迫症的童鞋很害怕任何鏈接，感覺都是詐騙。不用怕這裏其實就是這個插件嘗試打開一個GitHub的授權頁面，從而獲得我們GitHub中的訪問令牌。
此刻VSCode會使用我們的默認瀏覽器打開GitHub的授權頁面。大家不用慌，這個授權只是授權給VSCode配置同步插件讀寫權限和賬號基本信息（包含，名字，用戶名等，不會暴露自己的敏感信息的）。所以大家可以安心和狠狠的點擊Authorize shanalikhan即可授權!
授權成功後，頁面會跳轉到這樣一個頁面，中間寫着“成功！您現在可以關閉此頁面"。這個時候好奇的童鞋會問：爲什麼我們的URL是 http://localhost:54321/callback?code=XXXXXXXXXX:？
其實就是配置同步的插件開啓的監聽地址，用來獲取GitHub回調傳回來的Code密鑰。現在我們可以回到VSCode當中，看看有什麼變化。
回到VSCode，如果我們是看到以下的頁面證明成功登陸了！🎉
🌟如果回到VSCode發現右下角出現這個報錯，一般都是因爲GitHub的接口連接失敗。這個可能是突然GitHub無法訪問成功導致的。（畢竟我們是在偉大的網絡城牆之下的，所以有時候有連接GitHub的問題是很正常的）
如果是遇到這個問題，只要我們回到Settings Sync的首頁，再充滿信仰的點一次LOGIN WITH GITHUB。第二次基本都是可以的了。
使用原有配置
如果我們曾經使用過這個配置同步插件，先在另外一臺電腦上的全新VSCode編輯器安裝這個插件，然後使用同一個GitHub賬號登陸。這個時候我們就會發現，這個頁面會展示我們歷史的Gist配置記錄（如下圖）。
如果有歷史記錄，我們可以選擇一個記錄，然後一鍵下載這些配置到當前的VSCode。這樣所有我們同步過的插件，快捷鍵配置，編輯器配置和主題等等都會自動下載下來。完美的還原與我們之前VSCode的使用場景！
創建全新配置
如果我們是第一次使用，我們只需要在這裏點擊 SKIP 即可。當我們首次上傳配置的時候，就會創建一個新的Gist來保存。
「三」使用指南
上面我們配置好了VSCode中的配置同步插件Settings Sync，我們開始講講該如何使用這個插件來同步的。
上傳配置
快捷鍵：
- Windows/Linux：
Shift+Alt+U - Mac：
Shift+Option+U
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Update/Upload Settings。可以不全部輸入完，只需要輸入頭幾個字母就可以看到這個命令了。然後直接選擇就可以了。
當我們上傳配置的時候，右下角會提醒我們，是否需要強制上傳或者下載配置，並且覆蓋GitHub Gist上面的配置數據。這個是爲了防止我們誤操作覆蓋了自己的配置文件。
⚠️ 比如我們現在在一臺全新的電腦，安裝了一個全新的VSCode，目前是沒有安裝任何插件和設置任何配置的。這個時候我們首先是需要下載Gist上面的配置設置對吧？如果我們誤操作了，先運行了上傳配置呢？那麼我們本地的空配置就會覆蓋了Gist上面我們精心配置好的。這個時候我們就會把一個沒有任何插件和自定義過的VSCode配置覆蓋了Gist上面的。
不過也不用太怕，只要我們回到另外一臺電腦把那臺電腦的VSCode配置強制覆蓋上去，配置文件就還原了。但是如果我們設置了自動強制上傳和下載的話。那就炸鍋了，沒救了。所以強制和自動同步我們一定要慎重使用。
我們這個時候就是想上傳目前最新的配置設置到Gist上，所以我們狠狠的點擊是就完事兒了！
上傳完畢之後，我們會看到在輸出欄中的上傳日誌：
下載配置
快捷鍵：
- Windows/Linux：
Shift+Alt+D - Mac：
Shift+Option+D
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Download Settings。可以不全部輸入完，只需要輸入頭幾個字母就可以看到這個命令了。然後直接選擇就可以了。
下載的過程中，下面的控制檯的輸出欄會輸出所有下載日誌。
🌟 我們的插件會自動重新下載到VSCode中，所有快捷鍵和用戶自定義配置都會自動重新同步下來。因爲有某些插件是需要重啓VSCode才生效的，所以同步完之後最好重啓下編輯器。
重置插件配置
如果我們想歸零，重新配置這個插件。這個時候我們可以使用插件自帶的重置功能。
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Reset Extension Settings。可以不全部輸入完，只需要輸入頭幾個字母就可以看到這個命令了。然後直接選擇就可以了。
強制下載
強制下載默認是關閉的。當本地記錄的配置版本是最新的版本（插件是根據時間來判斷的），就不會自動強制下載最新的Gist上的配置了。但是如果我們在本地的VSCode中刪除了某些插件，並且我們沒有上傳到Gist上。這個時候根據配置記錄來說是沒有更新的雲配置的，所以不會自動獲取最新的雲配置，也就是說缺失的插件是不會自動補回來。
如果我們把強制下載開啓，就會在每次VSCode啓動的時從Gist上下載最新的配置，有缺失的插件會被補回來，有改變了的配置也會被覆蓋回來哦。
在某種情況下，這個是很實用的，比如有時候我們只是在某種開發條件或者環境下，改變了一下配置，或者禁用了一下插件，或者是在嘗試幾個不同的配置與插件。等我們完成之後希望可以用回原來的配置。這個時候就很實用了。
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Advance Options。
選擇後會出現一個設置列表，找到Sync：開關強制下載，選擇後可以開啓/關閉此設置。
改變時自動上傳
自動上傳默認是關閉的。如果我們不希望每次改變了配置後，快捷鍵和插件需要手動上傳到Gist。我們可以開啓改變時自動上傳。這樣還可以避免我們在不同電腦改變了VSCode配置和插件後忘記上傳，回到家後下載不了最新的配置。
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Advance Options。
選擇後會出現一個設置列表，找到Sync：切換配置更新後自動上傳，選擇後可以開啓/關閉此設置。
開啓/關閉摘要輸出
上傳與下載是輸出的日誌是默認開啓的。這個日誌會輸出所有新增和刪除的文件和插件。我們可以通過這個設置把其關閉。
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Advance Options。
選擇後會出現一個設置列表，找到Sync：開關同步時顯示摘要頁面，選擇後可以開啓/關閉此設置。
🌟 創建共享雲配置
Setting Sync默認創建的是私有Gist，所以只有我們自己可以查看，但是在很多團隊和項目中，大家使用同一套配置和插件往往是非常有必要的。想想在一個團隊中，每一個開發者使用的編輯器和插件不統一，我們過去協助他們debug（調試）和教學的時候，很多時候都會感覺非常的不順手。
而且一個統一的插件和使用規範和配置規範，可以影響到真個團隊項目的代碼的規範。最明顯的就是整個團隊有使用同一套Prettier插件配置和沒有用的時候！
新加入團隊的開發同事，還要安排人過去協助安裝一些我們團隊的規範插件和配置。想想是不是我們是需要這麼一個東西的呢？
如何創建共享配置？
首先我們來了解一下是怎麼共享我們Gist上的配置。
我們以前的私有Gist是無法從私有改爲公開的，所以我們把Gist上的共享配置打開後，插件中的Gist ID會重置。當我們開啓後首次上傳時，會創建一個全新的Gist並且是公開的。
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Advance Options。
選擇後會出現一個設置列表，找到Sync：在公開Gist上分享配置，選擇即可。
對就如此簡單！然後我們就上傳一次配置即可！
這裏我們需要注意：
我們公開出去的Gist其他用戶可以下載，但是是無法更改的。其他用戶下載了共享出來的配置後，還是需要配置一個自己的私有Gist來同步自己的配置哦。
當然我覺得這個是很合理的，共享出來的配置，是用來初次使用爲主的。下載了團隊中的插件後，他們還是可以自定義一些插件和配置，根據個人習慣調整一下。畢竟編輯器對於每個人來說，使用時都有一些不一樣的習慣。
如何下載共享的配置？
講解了如果共享自己的配置給我們親愛的小夥伴，那也要告訴他們怎麼下載我們的配置呀。
首先我們要找到我們公開的Gist ID，這個ID可以在我們的插件配置裏面找到：
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Advance Options。
選擇後會出現一個設置列表，找到Sync：打開設置，選擇即可。
選擇後就會打開我們Setting Sync的設置頁面，下圖框住的位置就是我們Gist ID。只要複製這個ID然後分享給需要下載我們共享配置的小夥伴們。
小夥伴們拿到我們的Gist ID後，有兩種情況：
- 如果他們之前有配置過
Settings Sync的話，那就需要先重置自己的插件配置。如何清楚，我在前面講解過了，跟着之前的教程清楚即可（有配置過的童鞋還需要記得把自己的Gist ID和獲取令牌記下來，後面需要用到哦！）。 - 如果沒有配置過
Settings Sync的話，可以直接走到我下來說的步驟。
一切準備就緒，現在我們來下載共享的配置：
- 首先用上面說到的方式
打開設置，然後在Gist ID的那個輸入框，輸入我們拿到的共享Gist ID， 最後聚焦離開輸入框（意思就是點擊輸入框以外的任何地方）就可以保存了。 - 然後執行以下操作:
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Advance Options。
選擇後會出現一個設置列表，找到Sync：從公開Gist下載配置，選擇即可。
選擇後右下角會出現這個提示：
意思就是說，我們現在不需要填寫GitHub的令牌，只要填寫Gist ID就可以下載插件了！
好最後一步就是下載插件：
快捷鍵：
- Windows/Linux：
Shift+Alt+D - Mac：
Shift+Option+D
🌟打開編輯器命令行
Command+Shift+P（Mac）然後輸入>Sync: Download Settings。可以不全部輸入完，只需要輸入頭幾個字母就可以看到這個命令了。然後直接選擇就可以了。
⚠️ 如果插件比較多的時候，可能會需要等待一會兒哦。
可以一直盯着控制檯實時輸出的日誌，看到同步完成後即可哦！（如果途中因爲GitHub連接失敗，重新啓動下載配置即可。最近GitHub網絡不是很穩定，所以可能會有點顛簸，童鞋們記得帶上安全帶哈。😂）
最後一步就是與我們原來的GitHub Gist重新綁定上，這裏需要手動綁定哦：
- 我們只需要再重置一次這個插件的配置。
- 然後打開插件的配置，把我們剛剛記下來的
Gist ID和獲取令牌重新填入對應的配置項裏面。 - 最後強制上傳一次我們現在的配置，記住是強制！
「終」總結
寫到這裏，VSCode高級玩家系列就結（未）束（必）了。如果這個系列有幫助到你們，而且童鞋們覺得這個系列應該繼續下去的話，就給我點個贊，並且在評論區回覆“還要！”。如果我看到有大量的需求的話，我會繼續深度挖掘VSCode中的各種高級技巧分享給大家哦！😁。
對了！差點就把大事給忘了！如果有看我上一篇文章《VSCode插件大全》
的童鞋，知道我在上一篇文章裏面分享了大量我在使用的插件。如果想一鍵下載下來使用的話，我這裏有建立好一個共享配置的Gist ID給大家使用。
Gist ID: 5ca94da358b6833763017e1fbafd994b
快樂的時光總是過得特別快，珍惜每一寸光陰
我是三鑽，一個在技術銀河中等你一起來終身漂泊學習的程序員。
文章對你們有幫助的，給我來個三連操作（點贊，關注，評論支持）。Happy coding 🎉！
好文推薦
- 🔥《VSCode常用快捷鍵大全｜VSCode高級玩家寶典之第一篇》 — 所以對於個好的程序員，一個好的代碼編輯器可以起到很大的作用，在開發的過程中可以給我們帶來很多便利、幫助、效率和影響。甚至一個好的編輯器可以給開發者日常編程中帶來更高的喜悅感。
- 🔥《VSCode插件大全｜VSCode高級玩家寶典之第二篇》 — VSCode沒有安裝插件，就等同於一把槍沒有安裝配件，打把的時候還是缺失精準度，開槍的時候也會有很重的後坐力。當然沒有插件，也可以很好的編寫代碼，就是沒有那麼強而已。
- 🔥《前端必看的8個HTML+CSS技巧》 — CSS是一個很獨特的語言。看起來非常簡單，但是某種特殊效果看似簡單，實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，重新燃起對前端排版和特效的熱愛和熱情！🔥
- 🔥《寫給想學和在學編程的你們，學習編程的7個好處》 — 其實選擇學編程是能改變人生的。可能起初很多人學編程，報了一個編程培訓班，爲了就是能拿到更高的工資或者有更好的工作環境。最後堅持着堅持着，最後會發現編程還會給我們帶來很多個人能力和技能上的提升。
- 🔥《5大法則助你 成爲更出色的開發者》 — 這篇文章傳授5大法則助我們成爲更出色的開發者，在衆多開發者中脫穎而出的訣竅，也會在我們的技術職業生涯中給我們很多的幫助。