Maintain Multiple VSCode Configurations
If you find yourself with different needs in VSCode for different scenarios, like switching from your day-to-day coding setup to higher contrast and larger fonts for presenting at your local meetup (or recording screencasts), manually changing your configurations can be tedious and error prone. In this lesson, we'll use some CLI flags for VSCode to launch a new instance of VSCode that looks for your extensions and data in a non-default directory. Once configured, we'll setup an alias to launch your new configuration with a single word command so you don't need to use those CLI flags every time.
Instructor: [0:00] I'll start by issuing the code command in the terminal. Rather than letting it use the default directories for extensions on my user data, I am going to pass in flags and specify new directories for both of those items.
[0:12] We'll start with the extensions directory flag. I am going to give that a relative path to presentation/exts. Now, I am going to pass in a second flag for the user data directory. I am going to give that a relative path to presentation/data.
[0:40] I'll present it around that. That's going to load up a brand-new default instance of VS Code. It has none of my customizations, doesn't have my color theme, no extensions. It's what you get out of the box with the fresh install.
[0:55] I am going to set up this instance of VS Code, just like it would any other new environment.
[1:01] I'll start. I'll go up to code, preferences, color theme and just to make sure this is super obvious, I'm going to use the high contrast theme and now, I go to my settings. I'm going to bump up my font size because I want to use this for presentations. I'll take that from 12 to a 16. I'm going to close that, the settings and I'm just going to create a new file.
[1:27] I can confirm them. My font size is nice and big. I think I'm good. At this point, I'm going to quit out of Visual Studio. Anytime I want to run Visual Studio with that configuration, I just have to re-issue this command where it point to my new extensions directory and my user data directory.
[1:50] We'll see that it opens up Visual Studio Code with my increased font size and my high contrast color theme. Obviously, remembering this command and being able to type it in every time we want to launch Visual Studio Code in a different configuration. It's going to be a little bit inconvenient.
[2:09] Instead of trying to remember the command, I'm going to copy this line and then I'm going to open up my profile. In my case, this is going to be my home directory and it's going to be .zhsrc but yours may be in your bashrc or your bash profile. Wherever you can set up aliases, you're going to come in and we're going to create an alias here.
[2:33] I'm going to alias and I'm going to call this present and the value is going to be that code command with some slight adjustments. I'm going to come back, and I want to make sure that this works from anywhere on my machine. So, I need to make sure that this relative paths that we used before will work from any directory.
[2:55] We're going to make them relative to the home directory and because they're in this code profiles sub-directory, I'll just add that and then the rest of the path remains to presentations/exts for the extensions directory. I'm going to make the same adjustment here. We're going to point to that code profiles directory and then under that, it will be presentation/data.
[3:22] With that done, I can write this out. Now I'm going to need the source to basically reload that profile in and make sure that command is available. So I run source and I'll just point to that SHRC file. Now that present alias should be ready to use.
[3:42] Let's navigate up into my project's directory, and I'm going to open up the sample project. I'm just going to run present, pointing it to the current directory. The project opens up and our instance of Visual Studio, that's using that high contrast color theme.
[4:04] Now, I can maintain this copy of Visual Studio with its own settings, its own color theme, its own extensions, keep that separate from another instance that I might use for my day-to-day work.