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 排版