Syncing and configuring profiles in VS Code
This option is deprecated. The better way, in my opinion, is to use the buildin (preview) feature for Settings Profiles: Syncing and configuring profiles in VS Code Revisited
Introduction
While VS Code has a built in options for syncing your settings, it can be limited and does not allow you to easily switch between multiple profiles with different settings and different extentions loaded. When I first attempted to set this up I used different shortcuts for VS Code pointing to different folders for the user settings and extension storage. While this works, it is also pretty inefficient: Some extensions you might have in more profiles and this setup causes them to be downloaded multiple times. Disk storage is cheap, but it can get cumbursome. Especially when you want to be able to reuse your setup over multiple machines.
For the second attempt I found the VS Code extension ‘Extensions profiles’. This extension was written with the exact idea in mind and uses two other extensions to make the magic work, ‘Settings Cycler’ and ‘Settings Sync’. Links to the extensions can be found in the Sources section below
Installation
For the initial installation we will complete all the needed settings for the first profile. My advice is to follow these steps and only add new profiles after the initial setup is complete.
Extensions profiles initial setup
Install the Extension Profiles extension (and you might as well install Settings Cycler and Settings Sync as well) Especially if you have a (fairly) clean install of VS Code you can just download and install the exentsion into your VS Code. This should automatically setup the correct folder structure and will name the current profile as Default
If this does not work and you get a permissions error, you can fairly easy create the folder structure yourself:
- In %userprofile%.vscode create an empty folder profiles
- Move the exension folder from %userprofile%.vscode into the subfolder profiles
- Rename the extensions folder. I created first an empty folder Default as a standard profile with almost no extensions but you can of course name it something else
- Start a cmd windows with Administrator priviliges and run mklink /D %USERPROFILE%.vscode\extensions %USERPROFILE%.vscode\profiles\Default (or whatever name you decided to give your first profile)
- Start VS Code
Settings Cycler
After installing the Settings Cycler extension into VS Code, you can use this to apply configuration specific to the active profile. For instance you can change to a different theme or apply different colors. For instance I like to set the Activity Bar to a different color, depending on the active profile as a visual reminder that I am in a certain profile.
See the extension information for more details, but as an example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"settings.cycle": [
{
"id": "Default", // must be unique
"overrideWorkspaceSettings": false,
"values": [
{
// other settings...
"workbench.colorCustomizations": {
"activityBar.background": "#2c2c49"
}
}
]
}
]
Important is that:
- id has to be unique and has to be the same name as the profile folder
- Under values you can add any settings that are unique for this profile. Note that these values override settings outside of the ‘settings.cycle’ settings in the settings.json.
Settings are not removed however, so if you add ‘activityBar.background’ only in one profile, upon switching the settings is created, but when switching back to the other profile the settings keeps applied. So any setting that you need to be different between profiles, you need to specify with the correct value to prevent unexpected consequences. I would advise to have every values section under a profile contain the same settings with the correct value for that specific profile.
Settings Sync
By using the Settings Sync extension you can sync each profile you created before to its own Github gist. This allows you te easily sync one or more of the profiles you created with other machines. A gist can be made private or public. If you create a gist to be public you can even share the VS Code profile with your friends or colleagues. Keep in mind that even a private gist is not secret. If you send someone the url to it, or someone happens upon it, they will be able to see the content.
With this in mind, we first have to update a local configuration file to prevent the extension from uploading unrelated files. Not sure why this happens, might be a bug. The solution seems relatively simple.
Open this file: %appdata%\Code\User\syncLocalSettings.json and edit the ignoreUploadFolders to look like this:
1
2
3
4
5
"ignoreUploadFolders": [
"workspaceStorage",
"History",
"globalStorage"
],
After you install the extension, the ‘Welcome to Settings Sync’ page will open, every time you start VS Code, until you configure the settings.
To configure, open the welcome page and:
- Press the login with Github button and login
- Accept the Authorization prompt to allow the extension access to gists
- Close the browser and go back to VS Code
If you did already have gists in your github account, the exention will ask you which one to download. Otherwise it will give you a skip button. Lets presume this is the first time you use the extension. So, to continue, open de command palette and select Sync: Update/Upload Settings. It will give you a warning that this will force upload the settings to the gist (but thats ok, since there is nothing there)
If you open Settings.json you will see that a new option has been added:
1
"sync.gist": "<GistIdentifier>"
Now, because we want to sync each profile to its own gist, we have to copy this sync.gist setting to the settings.cycle setting of the currenlty active profile.
So, this section should now look something like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"settings.cycle": [
{
"id": "Default", // must be unique
"overrideWorkspaceSettings": false,
"values": [
{
"sync.gist": "<GistIdentifier>",
"sync.autoDownload": true,
"sync.autoUpload": true,
"sync.forceDownload": false,
"sync.forceUpload": false,
"sync.quietSync": false,
"sync.removeExtensions": true,
"sync.syncExtensions": true,
// other settings...
"workbench.colorCustomizations": {
"activityBar.background": "#2c2c49"
}
}
]
}
]
Besides sync.gist the other settings are more or less optional. For me I want autoDownload and autoUpload and syncExtensions and removeExtensions active. So I add in all the settings in each profile and set them as needed (though all my profiles have the above settings. This completes the basic settings for the first profile
Create additional profiles
Now, to the important part. All the work we have done so far is only really useful if we can actually create additional profiles!
I find the best way to start is to first, manually, create a new empty gist for use by this profile. You can do this from the github portal, by pressing the ‘+’ right next to your profile settings.
- Give the json a description
- Create a file (you cannot create an empty gist), just call it test.json and type ‘{}’ as content.
Once created, if you check your browsers URL box, the identifier is the last part of the URL.
Create a new settings.cycle section by copying the default profile and change the gistIdentifier to the one you just created. Also change any other settings relevant for you, like the activityBar.background in the example below
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
"settings.cycle": [
{
"id": "Default", // must be unique
"overrideWorkspaceSettings": false,
"values": [
{
"sync.gist": "<GistIdentifier>",
"sync.autoDownload": true,
"sync.autoUpload": true,
"sync.forceDownload": false,
"sync.forceUpload": false,
"sync.quietSync": false,
"sync.removeExtensions": true,
"sync.syncExtensions": true,
// other settings...
"workbench.colorCustomizations": {
"activityBar.background": "#2c2c49"
}
}
]
},
{
"id": "Profile2", // must be unique
"overrideWorkspaceSettings": false,
"values": [
{
"sync.gist": "<NewGistIdentifier>",
"sync.autoDownload": true,
"sync.autoUpload": true,
"sync.forceDownload": false,
"sync.forceUpload": false,
"sync.quietSync": false,
"sync.removeExtensions": true,
"sync.syncExtensions": true,
// other settings...
"workbench.colorCustomizations": {
"activityBar.background": "#0d0d35"
}
}
]
}
]
To create the new profile you can just use the following command palette commands:
- Profiles: Clone
- Profiles: Create
If you have a fairly empty profile (maybe the default profile if your started from a clean install), I advise using the Profiles: Clone command on the default profile (or whichever other profile). If you use create (or just create an empty folders in the profiles folder), remember that you will have to install the Settings Sync and Settings Cycler extensions into these, otherwise the profiles won’t fully function.
If you copy/create the profile folder manually you have to restart VS Code before it picks it up
Test the setup by swapping to the newly created profile. Make sure to open the command palette and selecting Sync: Update/Upload Settings to force upload the settings once
Keep in mind that Settings Sync will upload several configuration files to the gist as part of the sync, but most importantly the settings.json and extensions.json. These files are downloaded (and locally overwritten) everytime you swap profile. This means that when you add additional profiles, you need to update the settings.cycle section in all the profiles. If you do not do this you may end up overwriting the wrong gist with the wrong data.
So, to prevent this, you have two options:
- Copy the settings.cycle section to the clipboard
- Rotate through all the profiles and replace the settings.cycle section Or:
- Edit settings.json in each (associated) gist and replace the settings.cycle section here
Switching profiles
Switching profiles is easy, there are two possibilties:
- Using the command palette and chosing Profiles: Switch
- Or you can press the little cogwheel in the statusbar with the name of the currently loaded profile
Setting up an addition or new machine with the configured profiles
Basically you follow the same steps as we initially followed:
- Install the extensions: Extension Profiles, Settings Cycler and Settings Sync
- Important: Open this file: %appdata%\Code\User\syncLocalSettings.json and edit the ignoreUploadFolders to look like this:
1 2 3 4 5
"ignoreUploadFolders": [ "workspaceStorage", "History", "globalStorage" ],
- Clone the created default profile and create each profile that you want available on this machine (which does not need to be all of them), using the command palette Note: Sometimes clone does not work the first time. As a work around you can just create an empty random profile. After this the clone command works. You can remove the random profile.
- Go to the ‘Welcome to Settings Sync’ tab
- Login to github
- Select the gist that belongs with the active profile (likely Default at this stage)
- Use the command palette and issue Sync: Download Settings
You only have to do this for one profile, because now we have a settings.json file which already contains all the needed information for the other profiles. So as long as you created (cloned) the specific profile folder, you can now switch to it and it will setup the workspace for this profile, including downloading needed extensions
Sources
- https://marketplace.visualstudio.com/items?itemName=cyberbiont.vscode-profiles
- https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler
- https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync