Synchronize VS Code settings with Setting Sync9 min read

Reading Time: 7 minutes

As software developers, we spend most of our time writing or debugging code and to do so the most important tool that we use everyday is the IDE. My favourite IDE by far is Visual Studio Code, and with millons of active users, I’m not the only one who shares this thought. With innumerable extension and plugins available in its extension marketplace, you can customize VS code in any way you want and if you are like me, you have already installed many extensions, themes, icon packs and tweaked the settings and keyboard shortcuts to make VS code work just as you like it.

The Problem

We all take our time perfecting our development environment, tweaking the settings, keyboard shortcuts and extensions just the way we like it. You may remember a few things that you have installed, but its certainly difficult to remember all of them. Let’s say you are switching your old workstation to a new. Re-creating this environment again from scratch may turn into a cumbersome and time consuming task.

Another such usecase can be to share your VS code settings with all your friends or colleagues. Lets say you work with a team of developers and want every developer to have a consitent development environment throughout the team with standard entensions like JSlint, Gitlens or Prettier all tweaked to work specific to your codebase. Asking every developer in team to setup their environment manually by downloading a set of extensions and changing a few settings can leave room for some error.

The Solution

A simple solution to both the problems mentioned above is to have a backup of your VS code settings on the cloud. Having a backup of all the environment settings can definetly save a lot of your time while setting up a new system from scratch, and will also protect the settings data in case if your local enviroment settings are lost.

Also while working in a team, instead of asking every developer in the team to download a set of extensions and change the settings manually, you can just ask every developer on the team to simply download the settings, and their developement environment would be set automatically. One such extension allows usto do just that, its called ‘Settings Sync’.

Settings Sync

Setting Sync is a free VS code plugin that allows you to synchronize settings, snippets, themes, file icons, launch, keybindings, workspaces and extensions across multiple machines using GitHub Gist.

It’s surprising how easy it is to setup this extension. You just download the extension, create a Gist on github, and use that gist to upload the settings to github, that’s it. You can use this gist along with a token generated by Setting Sync at the time of upload to download the exact same settings on a different machine. Yes, its that easy, and the documentation that accompanies the Settings Sync plugin is also clear and easy to follow.

Setting up Settings Sync

Let’s now move to step by step installation and configuration of Setting Sync.

Step 1: Install Settings Sync in VS code

The first step is to install Settings Sync into your VS code. You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or simply use the shortcut (Ctrl+Shift+X). Search for “Settings Sync” and install it.

Step 2: Generate a Personal Access Token From Github

Settings Sync uses Github to save all your VS code settings and data. So next up, you’ll need to head to your Github account.

Step 3: Upload VS code settings

In your VS code, open command palette by pressing Ctrl + Shit + P, type this command Sync: Update/Upload Settings and select it.

You’ll be prompted to add the Github token you just copied from your newly created gist. Paste it and press enter.

Now, that you have entered the token, all your settings should be uploaded, and the OUTPUT terminal in VS Code will show a message similar to the screenshot below.

As you can see, all the settings and extensions were sucessfully uploaded. You should also be able to go to your gists in Github and verify the settings are there. It will be stored in Gists under a file name cloudSettings.

Before you close the output terminal, copy the Github Token and Github Gist first. The Github token will be same as the one copied earlier, but the Github Gist will be uniquely generated at the time of upload. You can also find the Github Gist in the bottom left notification section of VS code. Both these access token will be required when we try to download the settings to a different machine.

Step 4: Download the Settings to a new machine

Start VS code on your new machine, and install Settings Sync extension in it. Once it’s installed, press Ctrl + Shift + P and enter the following command: Sync : Download Settings.

You will be prompted to enter your Github Token. This is the token you copied from the terminal output created when you uploaded your the settings to Settings Sync.

Next, you’ll be prompted to enter your Gist ID, this refers to the Github Gist, which we also copied from the output terminal. Paste it here and press enter.

Once done, all your orignal settings will be downloaded and set automatically.

Step 5: Final Steps

You’re all set! You might have to restart VS code for the newly downloaded extensions to take effect.

The workflow can be further automated the settings like, auto upload and download of settings, adding new files to be uploaded and ignore some files etc. You can find all the detailed list of settings here.

Finally lets see how you can make your settings public and share them with a team of developers.

Share settings with a team

By default, Settings Sync creates a private gist, which only you can access but if you want to share your Gist with other users, you can create a new public Gist.

A private Gist cannot be converted to a public one, so if you have already created a private Gist, you’ll have to create a new public one.

To create a new public Gist, instead of using the normal command to upload the settings, you must first press Ctrl + Shift + P then select the command Sync : Advance Options, then from the list that appears next, select Share Settings with Public GIST.

At this point VS code will show you a warning as shown in the image below, click ‘Yes’ and continue.

Once done, you’ll get an output similar to the one before. Copy the Gist ID and share it with the team. Other users can give your Gist Id to download the Gist, but they cant upload their settings on your Gist.

Conclusion

Developing with knowning that you always have a backup to revert back to in case of an accident is a big sigh of relief. Now, with the help of the Settings Sync plugin, you don’t have to remember all those things, or spend hours recreating them on a new machine, you can simply save them to Github cloud and access them from any other machine as long as you have the personal access token and Gist ID.

Thanks for reading, I hope this helps in improving your workflow, it only takes a few minutes to do, but it can save you hours of reconfiguration. Please share this with your friends if you found it helpful!

Other Articles

Home Automation Using NodeMCU and Google Assistant In Under $20