How to Create Code Profiles in VSCode

This post piggybacks off of the work done by @avanslaars who is a fellow instructor at egghead.io. He shared this in the egghead Slack sometime ago and I never got around to setting this up myself.

Now, I'm setting up a new laptop and decided to give it shot. Following Andy's repo here, I'm going to walk you through the process so you can follow along.

Before we begin, a "code profile" is essentially a different settings.json configuration. You can also customize which extensions load per code profile but that's beyond the scope of this article.

1. Create a code_profiles directory

The first thing we need to do is create a place to store our "profile settings". It doesn't have to be called code_profiles, but we're going to use that term since Andy does and it sounds nice.

He keeps his at the root of his computer so we'll do the same:

# From the root of your computer ~/
mkdir code_profiles

After your done, cd into that directory:

cd code_profiles

2. Create your first profile

Since I'm going to be using this for egghead recordings, I'm going to create a new directory called egghead:

# mkdir name-of-profile
mkdir egghead

Then cd into that directory:

cd egghead

3. Add your settings.json

VSCode is expecting a data directory with a User subdirectory. In there, we'll place our settings:

# -p will create parent directories as needed
mkdir -p data/User

After those are created, change into that new User subdirectory and create your settings.json file:

# Go into that directory
cd data/User

# Create your settings file
touch settings.json

Then open up your settings.json file and add in your settings. I'll add a modified version of what Andy has in his:

{
  "editor.tabSize": 2,
  "editor.quickSuggestions": false,
  "editor.parameterHints": false,
  "editor.suggestOnTriggerCharacters": false,
  "editor.hover": false,
  "editor.fontSize": 18,
  "editor.tabCompletion": true,
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Night Owl",
  "editor.cursorBlinking": "solid",
  "editor.cursorStyle": "line",
  "editor.minimap.renderCharacters": false,
  "terminal.integrated.fontSize": 16,
  "explorer.openEditors.visible": 0
}

4. Test your new code profile

Now let's make sure we did everything right. Assuming you've already set up VSCode to [launch from the command line](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line, we can launch our new profile by running:

# replace CODE_PROFILE_NAME with the profile name used earlier
code --user-data-dir ~/code_profiles/CODE_PROFILE_NAME/data

And if it worked, you should see VSCode open with your settings:

5. Create an alias for your profile.

I don't know about you, but I don't want to have to remember code --user-data-dir ... so let's take Andy's advice and create an alias.

I'm using zsh so I'm going to add this alias to my .zshrc file like so using the keyword "teach":

# replace CODE_PROFILE_NAME with the profile name used earlier
alias teach="code --user-data-dir ~/code_profiles/CODE_PROFILE_NAME/data"

Now, when you want to use this code profile, all you have to do is type:

teach ~/projects/lesson

Woohoo! And that's it.

Special thanks to @avanslaars for sharing this. Here's a link to his code_profiles repo where I learned how to do this.

NOTE: If you are using VSCode in Portable mode, there is a known bug where the flag user-data-dir does not currently work (special thanks to @myfonj for pointing this out).