Settings Sync Extension for Visual Studio Code
Tags: vscode, tools, extensions
Published: 2020-01-28 19:32:28

---
title: Settings Sync Extension for Visual Studio Code
published: true
tags: vscode, tools, extensions
canonical_url: https://www.jamesqquick.com/blog/settings-sync-extension-for-visual-studio-code
cover_image: https://www.jamesqquick.com/static/be8cf8cf22f5881d523c206632f954b3/af144/cover.png
date: 2020-01-28 00:00:00 UTC
---

{% youtube f-uzUsHTQ8s %}

> [Learn everything you need to know about Visual Studio Code, the most popular editor in Web Development](https://www.udemy.com/course/learn-visual-studio-code/)


The beautiful thing about Visual Studio Code is how easy it is to customize, but what happens if you get a new computer? You have to take the time to install all the same extensions, manually copy over settings and keybindings, etc.

> One extension can sync all of your settings in seconds!

Well, you don't have to do that anymore! We are going to use the [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) extension to take care of that for you. This way, no matter what computer you are on, you can get your instance of VS Code synchronized with all of your settings right away!

> **The only thing you need is a Github account.**

## Installing the Extension

The first thing you'll need to do is install the extension. You can do this by searching inside of the extensions tab in VS Code. You can find the icon in the side panel on the left that looks like four squares (with one a little bit off on its own).

[![Settings Sync Extension in VS Code](https://www.jamesqquick.com/static/eb15be459bbf84cb2df81da9762098f2/971c4/1.jpg "Settings Sync Extension in VS Code")](/static/eb15be459bbf84cb2df81da9762098f2/0568d/1.jpg)

## Configuring the Extension

After you install, you'll now need to configure the extension. Luckily, there is an information tab that opens up after installing to help you get started. On the new informational tab, choose "Login with Github".

[![Settings Sync Extension in VS Code Informational Window](https://www.jamesqquick.com/static/13033d824ff00969c8740d46ac19542e/971c4/2.jpg "Settings Sync Extension in VS Code Informational Window")](/static/13033d824ff00969c8740d46ac19542e/ff1a9/2.jpg)

VS Code might double-check that you want to navigate to a webpage. Choose "Open".

[![Github Confirmation](https://www.jamesqquick.com/static/903390cdca65a20a1ba647b6c12170e3/971c4/3.jpg "Github Confirmation")](/static/903390cdca65a20a1ba647b6c12170e3/13ead/3.jpg)

After logging in successfully with Github, the extension will show you what copies of settings you have already stored. At this point, you probably don't have any. In mine, you can see I already had one created. If it's your first time, choose "Skip".

[![Settings Sync Extension Existing Settings Gists](https://www.jamesqquick.com/static/cb6d9fa44fe861036b684a83d6be92c0/971c4/4.jpg "Settings Sync Extension Existing Settings Gists")](/static/cb6d9fa44fe861036b684a83d6be92c0/0568d/4.jpg)

By choosing skip, this will allow you to create your first Github Gist to store your settings. For demo purposes, I'm going to install my favorite theme, [Cobalt 2 theme from Wes Bos](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2). This way, after I save my settings and then download them, I can verify that the extension works. You don't necessarily have to follow this step if you have already customized VS Code in some way (settings, snippets, themes, extensions, etc.).

[![Cobalt 2 Theme VS Code](https://www.jamesqquick.com/static/1633211070e37380267f5990ab3bf207/971c4/5.jpg "Cobalt 2 Theme VS Code ")](/static/1633211070e37380267f5990ab3bf207/ff1a9/5.jpg)

## Saving Your Settings to Github

Since you are already connected to your Github account, you're ready to save off your settings inside of a Github Gist.

> [Github Gists](https://help.github.com/en/enterprise/2.13/user/articles/about-gists) are a quick way to share snippets of code

To save those settings to Github, you'll need to open the Command Palette (`Command+Shift+P` on Mac and `Control+Shift+P` on Windows). Then search for `Sync: Update/Upload Settings` and press enter/return.

[![Updated/Upload Settings with Settings Sync Extension](https://www.jamesqquick.com/static/3193bc40bcc1e14aab8f70089de564eb/971c4/6.jpg "Updated/Upload Settings with Settings Sync Extension")](/static/3193bc40bcc1e14aab8f70089de564eb/0568d/6.jpg)

You'll then see a popup in the bottom right-hand corner explaining that this action will replace the existing settings. Since you don't have any existing settings, click "Yes" to continue.

[![Updated/Upload Settings with Settings Sync Extension Yes or No](https://www.jamesqquick.com/static/0085ee08bc6414f52f883a97570f8406/971c4/7.jpg "Updated/Upload Settings with Settings Sync Extension Yes or No")](/static/0085ee08bc6414f52f883a97570f8406/13ead/7.jpg)

After this, you can open up your gists to see the newly updated settings. To view your gists, hit the dropdown menu in your profile icon in the top right of Github and choose "Your Gists".

[![Your Gists Menu in Github](https://www.jamesqquick.com/static/1ab925f3a6fca76c634f8ae48045a696/e3813/8.jpg "Your Gists Menu in Github")](/static/1ab925f3a6fca76c634f8ae48045a696/e3813/8.jpg)

Here, you can see that my Gist was successfully uploaded and the settings include the Cobalt 2 theme.

[![Saved Settings Gist in Github](https://www.jamesqquick.com/static/3542ede13ef4040b6c80f3ec4f1a5114/971c4/9.jpg "Saved Settings Gist in Github")](/static/3542ede13ef4040b6c80f3ec4f1a5114/0568d/9.jpg)

## Downloading Settings

Now that you know how to save your settings in a Github Gist, I'll show you how to download them. For demo purposes, I reset my instance of VS Code to simulate starting with a fresh instance.

First, you would need to install the extension as above and login with Github credentials. After doing so, you'll again be presented with a list of existing settings Gists. After choosing the correct one (I've got three but most likely you'll on have one), you'll get notified that that Gist has been associated with your Settings Sync extension.

[![Existing Settings Gists](https://www.jamesqquick.com/static/8d1640b0ea4de6812ca8e2dfedae6649/971c4/10.jpg "Existing Settings Gists")](/static/8d1640b0ea4de6812ca8e2dfedae6649/13ead/10.jpg)

From here you need to open the Command Palette again (`Command+Shift+P` on Mac and `Control+Shift+P` on Windows). Then search for `Sync: Download Settings` and press enter/return.

[![Command Palette Download Settings](https://www.jamesqquick.com/static/07a07144dc7d44f00fe10841bc04362a/971c4/11.jpg "Command Palette Download Settings")](/static/07a07144dc7d44f00fe10841bc04362a/0568d/11.jpg)

In my personal instance, I've got around 50 extensions installed as well as custom settings, snippets, and keybindings. Mine took a few minutes to complete everything.

But BOOM. In just a few minutes, you've got all of the settings I care about in a brand new instance of VS Code!

[![Settings Download Successful](https://www.jamesqquick.com/static/4932601f4736008dc79fab43c2a74bb2/971c4/12.jpg "Settings Download Successful")](/static/4932601f4736008dc79fab43c2a74bb2/cc30c/12.jpg)