VSCode配置同步｜VSCode高級玩家寶典之第三篇

在上兩篇文章中，咱們學到了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便可（顧名思義，「加入免費套裝」）。

註冊成功後會到達這個頁面，這裏會問你幾個問題：

1. What kind of word do you do, mainly? --- 你主要是從事那種工做？
2. How much programming experience do you have? --- 您的編程熟悉程度？
3. What do you plan to use GitHub for? --- 您準備用GitHub來作什麼？
4. 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大法則助咱們成爲更出色的開發者，在衆多開發者中脫穎而出的訣竅，也會在咱們的技術職業生涯中給咱們不少的幫助。

本文使用 mdnice 排版