How to Create Code Profiles in VSCode

Joe Previte (he/him) - Jun 27 '19 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

After your done, cd into that directory:

cd code_profiles
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then cd into that directory:

cd egghead
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

And if it worked, you should see VSCode open with your settings:
screenshot of vscode with new 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"
Enter fullscreen mode Exit fullscreen mode

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

teach ~/projects/lesson
Enter fullscreen mode Exit fullscreen mode

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).

. . . . . . . . . . . . . .