Maintain Multiple VSCode Configurations

I split my time in VSCode between writing code and presenting programming lessons. Because of this, I need to maintain multiple configurations. One has all the settings and extensions I find useful for getting code written. The other is focused on sharing with others. It has higher contrast, larger fonts, and disables settings that could be distracting for an audience.

Manually changing your configurations can be tedious, inconsistent, and error prone. In this article, we'll look at what it takes to create and use multiple VSCode configurations.

Initial Setup

All we need to do to create a distinct setup is start an instance of VSCode that stores user data and extensions in a non-default location.

Once we have settings stored in this new location, we'll have the option to open VSCode using either the default options or this set of distinct options.

First make sure you have the VSCode terminal commands installed.

You can do this from VSCode by launching the command palette (cmd + shift + P on mac), typing "shell command", and selecting the "Shell Command: Install 'code' command in PATH" option.

We'll start by creating a parent directory to hold all of our non-default profiles. I'll call this code_profiles and put it in my home directory (~/).

mkdir ~/code_profiles

With that created, I'll move into that new directory.

cd ~/code_profiles

And now we need to launch VSCode and specify new directories for extensions and user data. To do this, we'll open VSCode from the terminal and pass in the --extensions-dir and --user-data-dir flags.

code --extensions-dir ./presentations/exts --user-data-dir ./presentations/data

For this example, I'm creating a profile specifically for presenting, so I'm asking VSCode to put user data and extensions in subdirectories of a shared presentations directory.

From here, you can install extensions and update settings as appropriate for how you'll use this profile. For presentations, I'll bump up the font size, choose a theme with good contrast and install extensions that make it easy to quickly parse the code on screen, like this indent rainbow extension, for example.

You don't have to get it all setup at once. You can continue to add extensions and change settings anytime you run VSCode with these directories specified.

Setup an Alias

In order to use VSCode with your new settings, you need to open VSCode with the same command we used earlier.

code --extensions-dir ./presentations/exts --user-data-dir ./presentations/data

This works, but it isn't the most convenient approach, especially if you use this approach to create several profiles for different needs.

To make this easier for ourselves, we'll create an alias for our shell. I use ZSH, so my alias will go in my ~/.zshrc file. Yours may need to go into your bashrc or bash_profile.

I'll create an alias, ensuring to target the directory using a path that includes my home directory (~/) so I can run this from anywhere.

# ~/.zshrc (or bashrc, or bash_profile, etc)

alias present="code --extensions-dir ~/code_profiles/presentations/exts --user-data-dir ~/code_profiles/presentations/data"

Once you've created your alias you can restart your terminal, or reload your profile with source ~/.zshrc (or bashrc, bash_profile, etc.).

With this alias in place, we can navigate to a project directory like cd ~/projects/my-awesome-blog, and then run present . and your project will be opened in VSCode with your presentation settings applied.

Conclusion

Now you have the ability to maintain 2 distinct configurations for VSCode. You can continue to install and update extensions and tweak settings while maintaining these distinct configurations. If you want or need to customize your environment for even more specific uses, you can just follow the same process and create additional configurations with their own aliases for convenience.

If learning with video is your thing, I created a video lesson on this topic on egghead.io.