Actually, yes.
because the documentation that accompanies the Settings Sync plugin is nothing short of great.
It took me a few tries, myself (there’s a bit of special string copying that must be done and entered in a certain order), but I eventually got the syncing working, and now, I’m going to share how I did it, and some of the confusing parts that tripped me up at first.
Ok, let’s get set up with Settings Sync.
Settings Sync in ActionLike I said, the actual directions supplied by Settings Sync’s creator are pretty good, but since you’re here, I’ll go through them step-by-step and clarify a few points that I would have appreciated knowing the first time around.
Step 1: Install Settings Sync in VS CodeThis is the official plugin you’ll see in your own VS Code marketplace.
The obvious first step is to install Settings Sync into your VS Code terminal from the marketplace.
This is the icon you’ll see when you search for it.
Next up, you’ll need to head to your Github account.
Step 2: Generate a Personal Access Token From GithubThe way that Settings Sync works is through Github, it makes a private gist with all the VS Code info saved there, which is then accessible to anyone else who has the keys to access the gist.
So in Github, you’ll go to: Settings / Developer settings / Personal access tokens / Generate New Token** (see screenshot below).
Here’s a picture of my own VS Code settings sync gist.
As you can see, I already have a “vscode-settings-sync” token, but for the purposes of this article, I clicked the “Generate new token” button to walk through the steps.
Once you’re in the generation of the token, name the token something easy to remember and click the checkbox next to “Create gists”.
That’s all you have to do before you create the token.
All you have to click is the `gist` box when creating the token.
After your new token is generated, copy the token hash to your computer clipboard (or Sublime or notes or somewhere), you’ll never be able to access this string again in the future.
Copy the access token hash for future use.
With that done, we’re ready to head back to VS Code now.
Step 3: Upload Your VS Code SettingsSync your settings with update / upload settingsOnce back in VS Code, open up the command palette with command + shift + p (for Macs), and start typing in sync: and you should see the following list of options.
Click the first one: Sync: Update/Upload Settings and you’ll be prompted to add the Github token you just copied from your newly created gist.
This is when you enter the hash token from Github.
Now you’ve entered the token, all your current VS Code settings should be uploaded, and the OUTPUT terminal in VS Code will show a message similar to the screenshot below.
Verify it worked from the output in the VS Code terminal.
You can see my settings and extensions files were uploaded along with all of the extensions I’m currently using in my own VS Code setup.
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 like cloudSettings.
But before you close this output terminal: copy the Github token and Gist ID generated by the upload — you’ll need these to download your settings on other machines.
Put it somewhere you’ll be able to access it from the new machine you’ll be downloading the settings to (Slack, Google Docs, etc.
).
You need to keep this git and token somewhere where you’ll be able to access it again on another machine, like Slack, Sublime, etc.
Now, we’re ready to move on to the new VS Code IDE that needs these settings.
Step 4: Download Your Settings on a New MachineStart up your new VS Code machine, and you’ll follow the same first step as uploading the settings: open up the command palette with command + shift + p, then start typing in sync:, but this time, you’ll select the Sync: Download Settings option from the list.
Download the settings to your new VS Code set up this way.
After you’ve selected that, Sync Settings will prompt you to enter first your Github personal access token — this is the token you copied from the terminal output created when you uploaded your VS Code settings to Settings Sync.
First enter the Github token.
Then, you’ll be asked to enter the Gist ID, also provided from the output terminal (this is the part that tripped me up the first time, I didn’t realize I needed both the token and ID, the first time around).
It resulted in my having to reset my Settings Sync and do it again from the original computer to generate a new token and ID, not a big deal, but a bit of a pain.
Then enter the gist ID.
After that, your original settings should download to VS Code without an issue.
Step 5: Restart Your Editor & EnjoyYou’re done!.At this point, you may need to close the VS Code editor completely and reopen it for all the changes to take effect, but that should be it.
With one big thing knocked off your to-do list, getting your IDE right how you want it to be, you can get on with everything else that comes with setting up a brand new machine.
If only it were all so easy.
????And here’s a final fun fact, if you want to share these VS Code settings across a team of developers and machines, you can even make a public Gist that they can all access, more info on that is available here, under the “Create Public Gist to Share Settings” section.
ConclusionThere’s nothing that feels as good when developing software (especially JavaScript) as a fully configured IDE like VS Code.
And nothing more painful than trying to remember all the little nuances, plugins and tweaks you did to get it to that state of perfection.
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 let’s face it, if Github goes down, we’ve all got bigger problems than what our VS Code configurations were) and access them from any other machine as long as you have the personal access token and Gist ID.
Check back in a few weeks, I’ll be writing about Reactjs or something else related to web development, so please follow me so you don’t miss out.
Thanks for reading, I hope this helps you safeguard yourself and your VS Code settings from future accidents, 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!If you enjoyed reading this, you may also enjoy some of my other blogs:Keep Code Consistent Across Developers The Easy Way — With Prettier & ESLintThe Absolute Easiest Way to Debug Node.
js — with VS CodeHow ESLint Makes Me a Better React DeveloperReferences and Further Resources:Visual Studio Code: https://code.
visualstudio.
com/Settings Sync Documentation: http://shanalikhan.
github.
io/2015/12/15/Visual-Studio-Code-Sync-Settings.
htmlSettings Sync: https://marketplace.
visualstudio.
com/itemdetails?itemName=Shan.
code-settings-syncSettings Sync, Github: https://github.
com/shanalikhan/code-settings-syncVS Code Marketplace: https://marketplace.
visualstudio.
com/vscode.. More details