loading...

How to Create Code Profiles in VSCode

jsjoeio profile image Joe Previte (he/him) Updated on ・3 min read

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:
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"

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

Posted on by:

jsjoeio profile

Joe Previte (he/him)

@jsjoeio

helping developers learn quickly @freeCodeCamp alum Instructor @eggheadio

Discussion

markdown guide
 

Nice trick Joe, I created an extension this week to do just that! Profile Switcher allows you to save a bunch of profiles and swap between them from within vscode 😁

 

Woah! Spooky timing - I'll have to check it out and share it with the team at egghead - I'm glad you found my post 😄

 

Really 👻!

I was preparing to write a blog about it today on here as well 🤣

Would love to hear what you all think of it and look to collaborate and make it better for everyone.

 

Thanks for sharing this but I messed it up. Was just trying to see how this works quickly — to answer a question on Twitter and the command code --user-data-dir is potentially destructive. I opened on my desktop and now there are a whole bunch of files there as well as that the article mentions nothing about going back and what was the default user directory?

My normal VSCode setup is all broken now. Looks like that VSCode is still using Desktop as the user directory instead of whatever was the normal default and I have no idea what was that.

Truly lost here. :(

Kindly, mention in your article that the command is potentially destructive.

 

OK. So, it looks like you have to open VSCode with a simple code command for it to reset the user directory — where ever it is set to default since the docs certainly don't mention anything about what is the default here.

 

Hi Ahmad! Sorry to hear about the trouble you had 😢

But it sounds like you were able to figure it out? Is there anything you'd like me to add to the post to better clarify using this method as an alias vs using the regular code command?

 

What is the benefit of this approach over workspaces? This seems like manual work when a VSCode workspace can be saved with per-workspace settings, extensions, etc. You simply re-open the workspace and pick up where you left off.

 

Yes, that's true. But based on my understanding, aren't workspaces tied to your repository in the .vscode/ directory?

So the advantage to this approach is you can launch any project by using this command, without having to manually change the workspace settings.

 

You can use "Save Workspace As" and save it anywhere you would like. Then open the .code-workspace file to open it from anywhere.

Oh, now I see what you're saying. Save it somewhere and then with each project, you load the workspace. So it's never tied to a repository. Smart!

 

Never really explained what a Code Profile is.

Just different versions of applied settings?

 

Sorry, Henry. I will add a definition at the top! But yes, it's just a different settings configuration.

 

Thanks for helping me improve the post! 🙏🏼

 

Do the profiles allow for enabling different language extensions such that one can have a Python or PHP or Document Editing profile?

 

Yes! I didn't cover that in this article but if you take a look at Andy's repo, you can see how he does it:

github.com/avanslaars/code-profiles