VSCode Profiles: Optimize Your Coding Environment
Tags: vscode, programming, productivity
Published: 2023-07-16 16:27:55

_This article was originally posted on the [Headway blog](https://www.headway.io/blog/vscode-profiles-optimize-your-coding-environment). Visit us at [headway.io](https://headway.io) to see how we're making waves. 🏄‍♀️_

You may often work on multiple projects that require different settings, extensions, and configurations. Keeping track of all these customizations can be time-consuming and frustrating. Especially if you switch between projects.

This is where VS Code profiles come in. 

### Here’s what we’ll cover

- What VS Code profiles are
- The benefits of using them
- How to create them
- Switching between them
- Sharing them

## What are VSCode profiles?

Profiles are a useful feature in VS Code that allow you to save and switch between different sets of preferences and configurations. This allows for easy switching between development environments without manual adjustment of settings.

Sharing your setup without profiles requires creating a `.vscode` folder containing a `settings.json` file for your editor settings and an `extensions.json` file for recommended extensions. To share this setup, you need to copy the `.vscode` folder to each workspace you want to use these settings.

### Project profiles can have separate sets of

- Settings
- Keybindings
- Extensions
- Color themes

## How can a profile benefit development?

### React and Ruby example

Profiles allow you to keep these environments separated.

If you are working on a project with a React front end and a Ruby back end, you might want to have different extensions and settings for each. For a React front-end project, you might want to install extensions such as [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). For a back-end project using Ruby, you might want to install extensions such as [Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby) and [Solargraph](https://marketplace.visualstudio.com/items?itemName=castwide.solargraph).

### Efficient workspace management

Profiles let you create workspaces with unique configurations and preferences for each project or task, keeping you organized and productive with dedicated environments and necessary settings.

### **Customized development environments**

Customize your development environment by creating different profiles with the extensions and settings you need for front-end and back-end development. Switch between profiles depending on your current task.

### **Collaboration**

When working in a team, you can share your profiles with your colleagues, which can help ensure consistency across development environments. This can be particularly useful if you're working on a project with a specific set of requirements, as everyone can use the same profile to ensure a consistent development experience.

### **Quick and easy setup**

If you need to set up a new development environment, you can import a profile that you've already created, rather than starting from scratch. This can save you time and effort by providing a pre-configured environment that you know works well. 

**Core profiles**

A core profile can save time and effort when onboarding new developers. The profile will include standard configurations and preferences, so developers don't have to adjust each setting or extension. A core profile promotes consistency and reduces errors by ensuring all developers use the same settings and configurations.

### **Troubleshooting**

When encountering issues in your development environment, you can create a new profile and test different configurations and settings without affecting your other profiles. This can help you identify and resolve issues, without having to undo changes to your main profile.

## How to create and edit profiles

If you haven't created a profile yet, VS Code saves your current configuration as the `Default` profile.

1. To create a new profile, you can use
    1. The **File** > **Settings** > **Profiles** > **Create Profile** menu item (**Code** > **Settings** > **Profiles** > **Create Profile** on macOS).
        
        ![vscode-create-new-profile-preferences-menu](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c43fe7b249d052d81868a_vscode-create-new-profile-preferences-menu.png)
        
    2. The Profile command menu via the **Manage**
     gear button in the lower right of the Activity bar.
        
        ![vscode-create-profile-manage-gear](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644fccc4d942e454e5f215e5_vscode-create-profile-manage-gear.png)
        
    3. The **Profiles: Create Profile** command from the Command Palette.
        
        ![vscode-create-profile-command-palette](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644fcd1b21fa0896fe9bb069_vscode-create-profile-command-palette.png)
        
2. You can then choose to create a new profile based on the current profile or an empty profile. You are then prompted to enter a name for your new profile.
    
    ![vscode-create-profile-name](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644fcd48873a175ee66bd3e1_vscode-create-profile-name.png)
    

### Contents

![vscode-profile-contents-menu](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644fcd9f4668994b0965757b_vscode-profile-contents-menu.png)

A profile can include:

![vscode-profile-contents-list-example](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c453bd06aa447d5e6f223_vscode-profile-contents-list-example.png)

- **Settings** - In a profile-specific `settings.json` file.
- **Extensions** - You can remove extensions from the profile by unchecking their entry in the Profiles view.
- **UI state** - View layout (positions), visible views and actions.
- **Keybindings** - In a profile-specific `keybindings.json` file.
- **Snippets** - In a profile-specific `{language}.json` files.
- **User Tasks** - In a profile-specific `tasks.json` file.

When creating a new profile based on the Default Profile, VS Code populates the profile-specific configuration files from the user configuration files. It doesn't automatically include workspace-specific settings in a new profile.

### Display

You can easily see the name of your current profile in various places throughout the VS Code UI. This can be helpful in keeping track of which profile you are currently using.

- Title bar
    
    ![vscode-profile-display-options](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c458085ab159e3912ffde_vscode-profile-display-options.png)
    
- **File (Code** on macOS**)** > **Settings** > **Profiles**
    
    ![vscode-profile-settings-menu](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644fcde87ad00ff866a65d65_vscode-profile-settings-menu.png)
    
- **Manage** gear button hover

If you haven't created a profile yet, VS Code doesn't display any profile name.

The **Manage** gear button displays a badge with the first two letters of the active profile so you can check which profile you are running.

![vscode-settings-icon](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c461d6d1dcf704e6069bf_vscode-settings-icon.png)

### Temporary profile

Temporary Profiles are useful if you want to try a new configuration or test an extension without modifying your default or existing profile. Restarting VS Code reenables the current profile for your workspace.

You create a Temporary Profile via the **Profiles: Create a Temporary Profile** command in the Command Palette. The Temporary Profile starts as an Empty Profile and has an automatically generated name (such as **Temp 1**). You can modify the profile settings and extensions, use the profile for the lifetime of your VS Code session, but it will be deleted once you close VS Code.

![vscode-temporary-profile-options](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c48511e9bad6bab3c72a8_vscode-temporary-profile-options.png)

## Managing profiles

You can find many settings for managing profiles by searching for `Profiles` in the Command Palette.

### Editing

You can edit a profile by following the same process as you would to change any VS Code configuration. You can install, uninstall or disable extensions, modify settings, and customize the editor's UI layout just as you normally would. These changes will be saved in your currently active profile.

### Workspace associations

When you create or select a profile, it becomes associated with the current workspace. The workspace's profile is active whenever you open that folder, and if you open another folder, the profile switches to that folder's associated profile if one has been set or remains on the last used profile.

**For instance**

If you generate a front-end profile for your React workspace, and a back-end profile for your Ruby workspace, each profile will be linked to the corresponding workspace. Therefore, every time you access that workspace, the associated profile will be loaded.

### Switching profiles

If you prefer using the keyboard, you can use the **Profiles: Switch Profile** entry in the Command Palette. Alternatively, you can assign a shortcut to the **Profiles: Switch Profile** command to open the Profile switcher directly. 

For a more visual approach, you can click on the **Manage** gear button in the lower-left corner of the window, then select "Profiles" from the dropdown menu. This will open the Profiles view, where you can select a profile to switch to. You can also access the Profiles view by going to **File** (**Code** on macOS) > **Settings** > **Profiles**. 

## Sharing profiles

Once you created the perfect profile for your workspace, you may find it helpful to share that profile with your team or fellow developers.

You can export a profile using the **Profiles: Export Profile** command from the Command Palette or the **Export Profile…** option from the Profile settings menu. You will see the Profiles view with the contents of the active profile and an **Export** button. You can unselect various elements of the profile such as extensions or configuration files before you export the profile.

![sharing-vscode-profiles](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c48a33de83bdd6cc4ad57_sharing-vscode-profiles.png)

When you select **Export**, you are prompted for the profile name and whether you want to export to a [GitHub gist](https://docs.github.com/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists) or your local file system.

![export-vscode-profile-options](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c48c9c707cf061587455b_export-vscode-profile-options.png)

### **Save as a GitHub gist**

If you choose to save a profile to GitHub (you'll be prompted to log into GitHub if you are not already), a dialog will appear that gives you the option to **Copy Link** so you can share your profile gist URL with others. The GitHub gist is marked as **Secret**, so only those with the link can see the gist. You can manage your profile gist in the same way manage all other GitHub gists.

![vscode-profile-github-gist](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c4901fe8d893db937985b_vscode-profile-github-gist.png)

### **Save as a local 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`.

### Import

Once you export your profile, you want to share with your teammates how to import that profile into their workspace.

You can export a profile using the **Profiles: Import Profile** command from the Command Palette or the **Import Profile…** option from the Profile settings menu. You will be presented with an option to provide the URL to a GitHub gist or import from a local file.

![import-vscode-profile](https://assets-global.website-files.com/5d7678efce0c5739c9bc3bf1/644c492fd06aa41228e73420_import-vscode-profile.png)

Paste the URL or select a local file and you will see the Profiles view. Here you can choose to unselect some profile elements if you do not want to import them.  Select the **Import Profile** button and you will now be using the imported profile.

## Try them for yourself

VS Code profiles are a powerful feature that can greatly improve your development workflow. By allowing you to save and switch between different sets of preferences and configurations, profiles can help you stay organized, save time, and work more efficiently.

So if you haven't tried using profiles yet, consider giving them a try and see how they can benefit your development work.

Thank you for reading, and happy coding!

---

**Source material:**

- [Visual Studio Code Documentation - User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings)
- [Profiles in Visual Studio Code](https://code.visualstudio.com/docs/editor/profiles)