媽媽再也不用擔心我重裝VSCode了

語言: CN / TW / HK

「這是我參與2022首次更文挑戰的第28天,活動詳情查看:2022首次更文挑戰」。

公眾號「蟬沐風」,歡迎大家關注交流


1. 關於Settings Sync插件

Setings Sync插件可以同步你的VSCode配置到Github Gist,當你更換電腦重新搭建VSCode環境的時候,直接使用該插件拉取你之前同步的配置即可,不至於讓你一切重新開始

Gist可以簡單理解為是保存代碼片段的小倉庫

2. 新手教程

2.1 新手下載安裝

點擊擴展按鈕,搜索Setings Sync並安裝,會自動彈出以下界面

image-20220219102645988

點擊LOGIN WITH GITHUB按鈕,輸入你的用户名和密碼進行授權

如果你從未創建過任何Gist,順利的話你會看到如下界面

image-20220219104045804

這是在告訴你

在你的賬號裏沒找到任何的Gist,點擊SKIP這個按鈕,會為你自動創建一個Gist用來同步VSCode配置

如果你曾經創建過Gist,會列出所有的Gist,你選擇其中一個進行同步配置即可。

如果你是一個新手,從來沒有進行過Settings Sync插件的配置以及Token的折騰,到這一步大概率就可以進行配置上傳了。

得益於VSCode和Github同屬於一個東家(微軟),系統會為你自動配置好Gist ID令牌Token,點擊EDIT CONFIGURATION,看一下自動給你生成的配置信息

image-20220219105619646

image-20220219105521276

如果你的「獲取令牌」處的令牌為空,不着急,先試一下上傳配置功能是不是能用,能用的話就不用管了

上傳配置的快捷鍵,上傳一下試試吧

Windows:Shift + Alt + U

MacOS:Shift + Option + U

2.2 驗證配置成功

如果VSCode已經告訴你同步成功了,那就是成功了。你要偏不信,那就登錄你的Github,點擊你的頭像,再點擊Your gists

image-20220219105943003

配置已經成功上傳到Gist了

image-20220219110013220

點擊進入這個Gist,看一下地址欄後邊的一串數字,這個就是Gist ID(就是上文提到的自動給你配置的信息),插件只有知道這個信息才知道將配置同步到哪個Gist

image-20220219110258309

到此為止,如果你配置成功了,那跳過第3、4部分,看看如何拉取配置就可以了。

3. 如果上述過程你不順利

如果你有特殊體質,安裝的過程中總是出點幺蛾子,那就接着往下看吧

這個插件需要的就是兩個信息而已

  • Gist ID
  • Token

如果系統沒有自動給你生成,那就自己動手

3.1 創建Gist

在Gist列表頁點擊右上方+按鈕,創建一個Gist

image-20220219111455964

image-20220219111614063

創建成功之後找到你的Gist ID

image.png

Gist到此為止,接下來獲取Token

3.2 創建Token

到Github上點擊你的頭像,點擊Settings,然後左側欄找到Developer settings,然後繼續點擊Personal access tokens

點擊Generate new token按鈕,寫上你的token説明(Note),選擇過期時間Expiration(我一般選永久,因為嫌麻煩),然後勾選gist選項(這一步很重要,不要漏!!!)。

image-20220218172134147

點擊Generate token按鈕生成Token,生成之後千萬記得保存一下,因為你只會看到這一次!

image-20220218172219040

3.3 配置插件

把這兩個信息填寫到插件的配置文件中就可以了。

大功告成!

4. 本人還有更加不順利的體驗

我在原來的電腦上明明是第一次安裝這個插件,我以為一切都會給我自動配置,然而當我同步配置的時候給我彈出這個錯誤提示

Sync: GitHub 令牌無效或已過期。請重新生成。

我都忘記什麼時候搞過Token了,所以我完整走了一遍第3步的流程,得到了Gist IDToken

然而!!!我的VSCode壓根不會出現以下這個界面了,不出現我就沒法配置插件啊。

image-20220219102645988

我想過重裝,然後抽了自己一個耳光,本來就是要同步這台電腦上的VSCode配置,卻要我重裝???

下面是解決步驟

4.1 找到Settings Sync插件的配置文件所在位置

在這裏插入圖片描述

  1. 點擊插件按鈕,找到Settings Sync這個插件,點擊右下方的齒輪

  2. 點擊Extension Settings按鈕,右側出現所有配置項

  3. 選擇Extensions——Code Settings Sync,出現該插件的所有可視化配置 在這裏插入圖片描述

  4. 點擊右上角的Open Settings(JSON)按鈕,看圖中我圈出來的部分,就是VSCode的配置文件所在目錄了 在這裏插入圖片描述

4.2 修改syncLocalSettings.json

進入Code/User目錄,和settings.json文件同級的有個syncLocalSettings.json文件,修改其中的token 在這裏插入圖片描述 然後就可以開心地同步配置了呀!


5. 拉取配置

在其他電腦上拉取同步配置的快捷鍵如下

Windows: Shift + Alt + D

MacOS: Shift + Option + D


完!