How to Sync VS Code Settings Across Your Machines

It's your setup, wherever you are...
Sandy Sandy (3)
30 minutes

You spent some time getting your VS Code environment just as you want it. What if your machine is unavailable and you need to use another? Luckily, VS Code is free and a slim 236MB download. You'll be up and running again in no time. So no problem, right?

Well yes, except that all your settings, shortcuts, and extensions are now missing. The ones you've been tweaking almost daily to get things perfect, like moving the search box from the sidebar to the footer. You could remember all the settings, shortcuts and extensions, but it's still going to take a while to set them up.

When synchronizing multiple machines, the task becomes even harder. In such cases, it makes sense to automate the process.

Getting started

This guide assumes that you know that VS Code is a lightweight code editor, and that you already have it installed on at least one machine. You will also need a GitHub account because your settings will be stored in a secret GitHub Gist.

There are a few extensions for syncing settings in VS Code, and a new built-in function (currently in 'preview').

We are going to install the well-established and tested Settings Sync extension by Shan Khan. It's been going for years and installed by millions.

Read on to find out how to backup and synchronize your VS Code environment in 9 short steps, with the minimum of fuss.

VS Code ×1
github×1

Howchoo is reader-supported. As an Amazon Associate, we may earn a small affiliate commission at no cost to you when you buy through our links.

VS Code Extensions Market Place
  1. Launch the Extensions Marketplace by the button in the sidebar, as shown in the image above.
  2. Type the word Setting into the search bar at the top.
  3. Identify the Settings Sync entry in the list and click Install.

Next, you will connect the extension to GitHub.

A dialog box with two buttons; Login and Edit

Settings Sync will display setup instructions in the Editor Window when it has installed.

  1. Click the LOGIN WITH GITHUB button as shown in the image above.

Next, you will open GitHub inside VS Code.

A VS Code dialog box authorising external websites

Settings Sync needs to access GitHub from within VS Code.

  1. Click the Open button as shown in the image above.
GitHub authorisation dialog

GitHub needs you to authorize Settings Sync.

  1. Click the Authorize shanalikhan button as shown in the image above.
Two messages from Settings Sync

Sync Settings should now be installed. As this is a first-time installation*, there's no existing Gist to select.

  1. Check that the Success! message has appeared in your web browser and close the tab.
  2. A message with the heading Select Your Existing Gist will appear in the VS Code Edit Window. Click the blue SKIP button.

A new Gist will be created automatically in Step 7.

VS Code Settings Menu
  1. Click the Manage button on the VS Code sidebar.
  2. Choose Command Palette from the pop-up menu.
Settings Sync commands
  1. Type sync into the Command Palette search bar.
  2. Click the command Update/Upload Settings.

The extension will automatically create a record of your current VS Code settings and upload it to a new secret Gist at GitHub.

In the next step, you will check that the new file has been created.

A GitHub menu and JSON file

Settings Sync works by creating a JSON file that lists information about your VS Code environment. The file is rebuilt from the current environment when you issue the Update/Upload command (see Step 7). You should do this every time that you make a significant change to your setup.

The simplest way to verify the file is to open it in GitHub.

  1. Sign-in to GitHub and click the account avatar in the top right of the UI.
  2. Select Your gists from the dropdown menu.
  3. Find a recent entry for cloudSettings and open the file. Check the date and the metadata to make sure it is a correct record of your setup.
Someone using a laptop in a cafe

Because the settings are stored on GitHub, installing them in VS Code on multiple machines is easy.

  1. Install VS Code and follow the steps in this guide until Step 5. You should then see a list of existing settings files retrieved from GitHub.
  2. Choose a file (usually the most recent). Your current machine's VS Code will be updated with your preferred settings.

For additional help, refer to the extension's notes.

We hope that this guide has saved you some serious VS Code hassle! Don't forget to let your friends know how easy it is to keep your settings safe, whatever happens.

What Shortcuts are and how to use them!
5 minutes

At the Apple Keynote at WWDC 2018, Apple announced the Shortcuts app for iOS. Yet, many Apple iPhone users don't use the Shortcuts app or don't know what it's all about.