Just When You Thought Visual Studio Code Couldn’t Get Any Better, It Did

VS Code — the best JavaScript IDE available today

My Optimum Work Setup & 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.

It really is such a pain to start over…

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 my talk.

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 LiveShare 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).

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

VSCode 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.

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 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