VS Code — the best JavaScript IDE available today
My optimum work setup, and how I play with fire
I’ve had my current, work-issued MacBook Pro for just under two years, and as you might imagine as a software developer, I’ve installed a lot of stuff on it. Some things, like tools I use regularly, I remember, but most things I’ve installed on it, I probably don’t. It’s the install-once-globally-and-then-never-have-to-think-about-it-again mentality.
And I know this is a dangerous game to play, because while I’m usually careful with my personal effects, things happen. Coffees get spilled, laptops slip to the floor, OSs get corrupted, and other people can be less conscientious with themselves and their stuff.
At that point, I have a problem, I have a new or freshly reset laptop devoid of all my personal settings, plugins, random installs and preconfigured tooling that makes development easier and more fun. Especially when it comes to my IDE (Visual Studio Code) — I have it tweaked and set up just how I like it, and in a blink, it could all be gone.
In that moment, I am reminded of just how painful set up and configuration is. Apparently, I must block this out of my memory every time I have to go through it, because let’s be honest, it’s just a big pain.
This article won’t walk through perfectly restoring your entire machine to the state it was before the incident, that’s beyond the scope of this post.
This article will, however, show you how to perfectly recreate your Visual Studio Code IDE settings without starting over from scratch and spending hours on it.
Let’s get going.
Settings Sync to the rescue
If you haven’t read any of my previous posts here and here about VS Code, I would highly encourage you to do so. It’s an incredible IDE that’s free AND it trumps WebStorm in almost every way, which is not free, I might add (and which I used before).
One of my favorite things about VS Code is the extension marketplace that’s absolutely chock-full of useful plugins people have rolled themselves and felt the need to share with the rest of us developers, mostly for free as well. Bless these people.
These extensions are some of the things that make VS Code such a delight to develop with — they help make it my own editor too. My color theme (Night Owl), my list of must-have plugins (Prettier with auto format on save enabled, among others), my sidebar of useful doohickeys (Docker, GitLens), not to mention Live Share and the ever-growing list of features the VS Code team keeps releasing each month. I could go on…
When faced with the possibility of losing (or even trying to transfer) my carefully developed VS Code setup to another machine, I knew there had to be a way to do it gracefully. Some enterprising developer somewhere had faced the challenge I was now facing and had figured out a way to sync their settings across machines.
I just knew the solution had to be out there, and so, I asked the internets, and it brought back Settings Sync (formerly known as Visual Studio Code Settings Sync).
Settings Sync
I wish this cute little cloud came in a larger image size for this post, but alas.
🌴💪 Synchronize your Visual Studio Code Settings Across Multiple Machines using Github GIST 💪🌴 — Settings Sync, GitHub
This plugin, free in the VS Code marketplace is exactly what its Github description says it is: a tool that can sync your VS Code settings across as many machines as you please (complete with palm tree emojis and all), and Github’s gists make it possible.
And it syncs everything:
- Settings file
- Keybinding file
- Launch file
- Snippets folder
- VS Code extensions & extensions configurations
- Workspaces folder
Sounds good in theory, but is it really as easy as its made out to be? Actually, yes. because the documentation that accompanies the Settings Sync plugin is nothing short of great.
Ok, let’s get set up with Settings Sync.
Settings Sync in action
Like 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 Code
This 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 (PAT) from GitHub
The 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 settings
Sync your settings with update / upload settings
Once 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 gist 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 machine
Start 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 and enjoy
You’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.
Conclusion
There’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 React or something else related to web development, so please follow me so you don’t miss out.
If you’d like to make sure you never miss an article I write, sign up for my newsletter here: https://paigeniedringhaus.substack.com
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.
References & Further Resources
- Visual Studio Code
- Settings Sync documentation
- Settings Sync extension in VS Code marketplace
- Settings Sync, GitHub
- VS Code Marketplace
Top comments (0)