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