VS Code Tips & Tricks

In this episode, we would use the “Settings Sync” extension to synchronize all our settings, themes, snippets, extensions and every other setup across multiple machines. Settings Sync is an important extension because setting up softwares from scratch everytime you’re on a different machine is not a fun task. Plus, you could forget some configurations.

The Settings Sync extension solves this problem by storing all your VS Code configs inside a GitHub gist. So when you get on a different machine, you could download this config and the extension synchronizes and installs everything saved in that gist.

Go ahead and install it. The Settings Sync configuration page would be opened after successful install. For this extension to work, it needs GitHub Token and GitHub Gist Id.

You can edit the configuration manually by providing an access token and a Gist ID. But we would use “Login with GitHub” to automatically create a GitHub access token which gives the extension permission to create gists. Go ahead and click “Login With GitHub”.

This opens up a browser windows which shows us that the extension(app) needs access to our GitHub account to create Gist. Authorize this access by clicking on the button. Upon a successful authorization, head back to VS Code.

Back in VS Code, we have everything configured. So clicking on “Edit Configuration” shows us that we now have our GitHub access token linked with this extension. The GitHub gist would be created when we upload our settings. Let’s do that now.

Open up the command palette and search for “sync”. These are different commands for this extension. Select “Upload Settings”. Then press Ctrl + Shift + U to open up the Output view. Select “Yes” to replace any existing gist.

The upload has been completed and the Output window shows us everything that has been installed. And these are the list of all the extensions installed on my system and everything has been uploaded to the gist.

And you can see that this extension created a secret gist and here is the gist id. Let’s head over to our Gists page on GitHub to see what this file looks like. And you can see a new gist has been created called: cloudSettings. In here, we have all the whole information of our extensions and settings uploaded.

This is the extensions.json file which contains all the extenstions we have installed. You can see the bracket-pair-colorizer and others. Scrolling down shows us the keybindings, that is our custom shortcuts. We also have our settings.json file uploaded to the GitHub gist.

Finally, we have the snippets which we created in previous episodes also uploaded to this gist. Let’s head back to VS Code.

To download this setup on another machine, all you have to do is to follow the same steps we covered in this episode and make sure you login with the GitHub account which you used to upload these settings.

Next, open up the command pallete and search for “sync”. Select “Download Settings”. I won’t be selecting this command on this machine but if you execute it on another machine, it would sync your settings, extension, configuration and every other thing. Finally, you reload VS Code for all the whole configurations to be synchronized.