Tips & tricks: Sync VS-Code extensions list, editor settings and add it to source control.

As a back-end developer, PHP focused, I use PhpStorm as my favorite IDE, because of all its powerful features list, beside that I have my own personal preferred UI customization settings that I apply like color theme, font and code templates. And since it is my personal customization, I use a PhpStorm feature to either sync the settings to my JetBrains account or you can export them and you manage that yourself, and I do that because I have invested a lot of time, finding the perfect font, theme color and settings to increase my productivity with code templates adjustments and make it comfortable for myself and eye since I spend on it a lot of time.

But for all my front-end and DevOps projects, I use VS-Code as the extensions to manage such projects are more powerful, but then after spending and investing some time to make it feel like what I wanted it to be, I started thinking okay, I have done so many customization, but I need to save those settings somewhere, this is where I found that VS-Code doesn’t support such a thing natively yet.

After searching for a way on how to achieve that goal, I found this simple but yet powerful extension where you can find it in the market place which is called Settings Sync, this awesome extension enables you to not only sync your UI customization settings but also installed extensions, which in my opinion very handy so that you don’t have to do that manually, and as mentioned on the extension page, there is a whole list of items that are synced as well i.e.:

All extensions and complete User Folder that Contains

1. Settings File
2. Keybinding File
3. Launch File
4. Snippets Folder
5. VSCode Extensions & Extensions Configurations
6. Workspaces Folder

How does the extension work?

The extension requires you have:

1. Github account.
2. Create a github access token for the plugin.
3. Create Gist for the extension and provide its Id in the config to be used to upload your settings.

Next, you configure the plugin and supply the GistId and your github access token, restart VS-Code then it will work out of the box to upload existing settings and/or download already existing ones.

You can find more about the setup of the extension on its page Settings Sync page.

Why use this plugin?

Personally, beside of having everything automatically synced when you change any settings in your VS-Code,I see an added benefit which is that you have all your extensions list and settings source controlled with a different commit for every change you make and that gives you the added benefit of when you mess up something, you can rollback.

NOTE: At the time of writing this blog, I found that VS-Code team are working on syncing the settings natively but currently it is only available for the daily builds as insiders edition.