VS Code Profiles - Manage configurations easily for different environments and workflows
Tags: vscode, tooling, productivity, webdev
Published: 2023-03-31 10:10:55

---
description: Have you ever wanted a custom setup in VS Code for a particular environment or a workflow? Now, there is a simpler way!
cover_image: https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-custom-workflow-project-configuration-profile/cover.jpg
"canonical_url": "https://www.roboleary.net/vscode/2023/03/29/vscode-workflow-environment-configuration-profile.html"
---

Have you ever wanted a custom setup in VS Code for a particular workflow or environment?

Well, you're in luck! Today, I will show you how to do this *inside* VS Code with ***profiles***. ✨

Profiles were added to VS Code in February 2023 [(v1.7.6)](https://code.visualstudio.com/updates/v1_76). Previously, people did this configuration *outside* of VS Code and had to do some command-line wrangling to make their own system. For example, Joe Previte created a [teaching workflow for his egghead courses](https://dev.to/jsjoeio/how-to-create-code-profiles-in-vscode-3ofo). This method can get messy if you are not careful! ⚙️🤕⚙️

## What is a profile?

Profiles enable a user to save a configuration set including ui state,settings, and extensions. It can capture preferences that can help you switch between contexts. You can switch between profiles easily. 🔄

You can create 3 types of profiles:
1. *A profile based on the current profile*. This is a duplicated copy of your current configuration. Use the command **`Profiles: Create from Current Profiles`** to create it.
1. *An empty profile*. This is a clean slate. Use the command **`Profiles: Create Empty Profile..`** to create it.
1. *A temporary profile*. A temporary profile is useful for experimentation. It creates an empty profile with an automatically generated name such as *Temp 1*. You can use the profile for the lifetime of your VS Code session. It will be deleted once you close VS Code. Use the command **`Profiles: Create Temporary Profile`** to create a temporary profile.

Profiles can be synced across machines. You can export them and share them with colleagues to coordinate your work.

This was a missing piece of the setup for VS Code for a long time in my opinion.

## What can a profile include?

A profile can include:

- **UI state**: View layout, visible views, and actions.
- **Settings**: A profile-specific `settings.json` file.
- **Extensions**: You can add or remove extensions from a profile.
- **Keybindings**: A profile-specific `keybindings.json` file is created.
- **Snippets**: A profile-specific `<<language>>.json` file is created.
- **User Tasks**: A profile-specific `tasks.json` file is created.

When a profile is created, it is creating a separate set of configuration files. It creates a folder in your user configuration folder named after your profile. Depending on your platform, the folder will be located in:
- Windows: `%APPDATA%\Code\User/profiles`
- MacOS: `$HOME/Library/Application/Support/Code/User/profiles`
- Linux: `$HOME/.config/Code/User/profiles`

## Use cases for profiles

The primary use case is for work modes, in my opinion. If you find yourself doing a **particular type of work**, you could benefit from this. Activity such as demonstrations, screencasting, reviewing pull requests, or writing docs have different requirements.

A secondary use case is for **particular environments**. If you have a fullstack project, it may be useful to have a *frontend* and *backend* profile to switch to a different UI layout and have certain actions more prominently available. Maybe you want your Ruby on Rails projects to be set-up differently than other Ruby projects.

I would issue some caution with creating profiles for languages and frameworks that you use, you could quickly get into a habit of overspecializing. Remember, it is possible to have language-specific settings in your global settings file! If some configuration is tied to a language, it may be better to put the configuration in there. I spoke about this in a previous article, *[Customize your VS Code setup for a project, or for a language](https://www.roboleary.net/vscode/2020/09/17/vscode-workspace-settings.html)* if you want to learn more about that. It is something that people often are not familiar with.

A good rule of thumb is to only create a profile if you find yourself wanting to have the same configuration between projects, and it is *not* tied to a particular language.

One exception to the rule of thumb is that some extensions can always be loaded and you may not want this. This is *not* common because extensions are conditionally loaded, usually only when they are needed. It is usually only extensible extensions such as linters that are always loaded because they can be configured to be used by more languages or file types. I spoke about this in a previous article, *[VS Code - How many extensions should I use?](https://www.roboleary.net/2021/08/10/vscode-how-many-extensions-should-i-use.html)* if you want to learn more about the topic.

If you want tighter control, a profile can gives you that power. I would try to avoid micromanaging though!

## Creaing a "Teaching" profile

Let's return to [Joe Previte's "Teaching" workflow](https://dev.to/jsjoeio/how-to-create-code-profiles-in-vscode-3ofo) that he created outside of VS Code. It should be instructive (pardon the pun) to do this with a profile, and compare my efforts and the outcome with what Joe did. Joe made his custom configuration in 5 steps. Let's see how we fare!

Essentially, we want a minimal configuration. We want to be close to stock installation to be as simple and distraction-free as possible for students. We want to make text bigger and hide the minimap. We will have a short set of settings like so:

```json
{
    "editor.fontSize": 18,
    "terminal.integrated.fontSize": 16,
    "window.zoomLevel": 1.25,
    "editor.minimap.enabled": false
}
```

Before we create a new profile, let me show you my default configuration for reference. Below is a screenshot of editing a markdown file, this post, with my current config.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-custom-workflow-project-configuration-profile/default-configuration.jpg" alt="Editing a markdown file with my current config" width="957" height="1047" loading="lazy">

We will **create an empty profile** because we want to start from zero.

Open the Command Palette (`Ctrl`+`Shift`+`P`) and run the `Create Empty Profile..` command. You will be prompted for a name. I will name the profile as "Teaching".

You will see the UI flash and we are now in our new profile.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-custom-workflow-project-configuration-profile/empty-teaching-profile.jpg" alt="Editing a markdown file with the new teaching profile active" width="957" height="1047" loading="lazy">

Everything looks different now because we have reverted back to the base settings!

Let's edit our profile by changing the settings. Run the command **`Preferences: Open Current Profile Settings (JSON)`** to open the `settings.json` for the "Teaching" profile. Paste in the aforementioned settings and save. You will see the text increase in size and everything is zoomed in now.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-custom-workflow-project-configuration-profile/teaching-profile.jpg" alt="My teaching profile configuration with settings changed to increase the size of everything." width="958" height="1046" loading="lazy">

Mission accomplished for our simple use case! 🙌

We did it in just 2 steps! Although, Joe uses the command-line for opening a project with his configuration. You can do this too without any extra effort!

## How do I identify what profile I am using?

The primary means of identification is via the settings icon on the Activity Bar (the bar on the side). It has a badge with an abbreviation of the profile name.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-workflow-environment-configuration-profile/profile-badge-sidebar-position.jpg" alt="Highlighting the profile badge on the manage activity item on the sidebar. Since I am using my Teaching profile, it has the text 'TE' in the badge." width="957" height="1047" loading="lazy">

You can see "TE" for my teaching profile.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-workflow-environment-configuration-profile/profile-badge.png" alt="The profile badge on the manage activity item. It features the first 2 letters of the profile you are using. It has the text 'TE' in the badge since I am using the Teaching profile." width="141" height="140" loading="lazy">

This approach has a number of shortcomings. What if you prefer to hide the Activity Bar? What if you have profiles that have names that begin with the same 2 letters?

If you would prefer to show the profile on the status bar, you can use the [***Profile Status* extension**](https://marketplace.visualstudio.com/items?itemName=robole.profile-status).

<img src="https://www.roboleary.net/assets/img/blog/vscode-profile-status/profile-status-extension.png" alt="The status bar item provided by the Profile Status extension says 'Profile: Teaching'." width="1119" height="1048" loading="lazy">

## Switching profiles

You can quickly switch between profiles with the **`Profiles: Switch Profile`** command. The command will presents a dropdown listing your available profiles. Pick one and it will change your configuration.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-custom-workflow-project-configuration-profile/switching-profile-dropdown.png" alt="Switching profile in VS Code through the 'Profiles: Switch Profile' command. The dropdown shows the profiles to choose from. In my case, it is: default and teaching." loading="lazy">

The current profile is associated with the current workspace. When you open that folder again, it will open with the profile from your last session.

## How do I open a project from the command-line with a profile?

If you want to open a project direct from the command-line with your "Teaching" profile, you can use the `code` command with the **`--profile` option**. You supply the name of the profile as an argument, just like this:

```shell
# open a project with a profile
code ~/projects/teaching/website-tutorial --profile "Teaching"
```

## Editing a profile

One thing to keep in mind when you want to edit the settings of a profile is that there are multiple `settings.json` files. There is: default, user, current profile, and project. There is a command for each of these in the command palette.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-custom-workflow-project-configuration-profile/selecting-settings-json-from-command-palette.png" alt="There are 4 setting.json files that you can edit. The screenshot show the 4 command options from the command palette dropdown filtered by the text 'settings jso'." width="919" height="317" loading="lazy">

Make sure you run the **`Preferences: Open Current Profile Settings (JSON)`** command to open the `settings.json` for the current profile. If you are in your default profile, you will not see this command in the list.

You can open the profiles view to review the customizations for a profile with the **`Profiles: Show Contents`** command.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-custom-workflow-project-configuration-profile/profiles-view.png" alt="Profile view of teaching profile. This is opened with the 'profiles:show contents' command." width="351" height="355" loading="lazy">

Since I only edited the settings, my "Teaching" profile has just _Settings_ and _UI State_ listed. You will see entries for keybindings, tasks, and extensions listed here if you customised them!

If you expand the *UI State* node, there is a `globalState.json` entry. This is an in-memory JSON representation of your profile's UI State. This file does not actually exist on disk. Just in case you were wondering -- I wondered!

You can rename an existing profile via the **`Profiles: Rename..`** command in the Profiles menu.

You can delete a profile via the **`Profiles: Delete`** command.

You can import and export profiles with the **`Profiles: Import..`** and **`Profiles: Export..`** commands respectively. A profile can be exported as a [GitHub gist](https://code.visualstudio.com/docs/editor/profiles#_save-as-a-github-gist) or as file. If you chose to save the profile as a local file, a *Save Profile* dialog lets you place the file on your local machine. A profile is persisted in a file with the extension `.code-profile`.

## Syncing profiles

You can use the builtin [Settings Sync](https://code.visualstudio.com/docs/editor/settings-sync) feature to use your profiles across machines.

To add profiles to your sync, run the **`Settings Sync: Configure`** command. A drop down will appear showing configuration items to include in the sync, check the **Profiles** item.

<img src="https://www.roboleary.net/assets/img/blog/2023-03-29-vscode-custom-workflow-project-configuration-profile/settings-sync-profiles.png" alt="'Settings Sync: Configure' command dropdown with all configuration items selected to be synced such as: Settings, Keyboard Shortcuts, User Snippets, and so on. " width="1199" height="457" loading="lazy">

Don't forget to enable syncing, otherwise nothing will be synced! 😉

## Final thoughts

Profiles are a great addition to VS Code and can help you tailor your editor experience to work in different contexts and environments. You no longer need to go outside VS Code to create your own configuration sets. The editor integration means you can switch between contexts with ease, and benefit from other builtin features such as syncing and sharing. That's a signficant win in my book!

## Further reading

- [VS Code docs - Profiles guide](https://code.visualstudio.com/docs/editor/profiles)