Introduction
Most of us love Visual Studio Code for its versatility, extensibility, intuitive interface, and strong community support. It offers a customizable coding environment with a vast extensions marketplace, saving time and enhancing productivity. Its built-in features like code suggestions, Git integration, and debugging streamline workflows, making it a favorite among developers globally.
In fact, here are the Stackoverflow survey results regarding the Integrated development environment (IDE).
Check out the full list on the survey page.
While developers absolutely love Visual Studio Code, it does have a few drawbacks, especially when loaded with a bunch of extensions:
- Performance impact: Installing too many extensions can lead to increased memory usage and reduced performance. Extensions often require extra system resources, especially if they include complex features or are poorly optimized. This can result in slower startup times, laggy responsiveness, and occasional freezes or crashes.
- Conflicts and instability: Using multiple extensions simultaneously can lead to conflicts. These conflicts may arise due to dependencies or incompatible functionalities between extensions, resulting in unexpected behavior or instability within the editor. Diagnosing and resolving these conflicts can be challenging, particularly when dealing with many extensions sourced from different places.
Developers often navigate and work on multiple projects with different settings, extensions, and configuration requirements. Keeping track of all these customizations can be a frustrating experience at times.
Visual Studio Code profiles to the rescue.
Visual Studio Code profiles
Earlier this year, Visual Studio Code introduced Profiles, a much-awaited and powerful feature that allows developers to manage various configurations and settings for different development scenarios. With Profiles, you have the flexibility to define and switch between multiple sets of preferences, extensions, workspace configurations, and debugging settings within the VSCode editor, making it easy to adapt to different project needs.
Within project profiles, you can incorporate different combinations of settings, extensions, configurations, and more. While our focus will primarily be on settings and extensions, as they are the most commonly used. The same principles apply to the other elements as well.
The approach
Let's consider an example: In my personal projects that I work on during my free time, I extensively use React-based technologies. However, in my full-time work, I use the MEAN stack. To effectively manage my projects and leverage the full power of VSCode without encountering crashes or weird behaviors, I have to create two profiles, one for the react-based project and the other for the MEAN stack project.
Visual Studio Code comes with a default empty profile. I find it convenient to use this as a base profile that includes all the settings, extensions, themes, and other configurations I want in all my other profiles.
In my case, I want to have certain extensions like GitLens, Error Lens, and Turbo Console Log in both profiles because both projects involve Git and JavaScript. Additionally, I would love to use the GitHub Theme in both profiles.
Therefore, it's only logical to install all the shared extensions in a base profile and create any new profiles based on it. This approach saves you from starting from scratch each time you want to create a profile (or, even worse, creating a new profile based on a random one).
The same approach can be applied to settings as well. For instance, it is preferable to maintain consistency across all projects by using the same theme, UI state, or font-family.
Here's an illustrative diagram that demonstrates this practical approach.
The default profile
As mentioned earlier, when you install VSCode, it comes with a single profile called default.
Let's start by changing or adding some settings we want to use across the profiles. To access the settings, you can use the shortcut ⌘ + , for macOS users or Ctrl + Shift + P for Windows users.
Start typing "open settings" in the search bar and select Open User Settings.
This will open the user settings in the UI version. However, if you prefer the JSON version, which is often more convenient for editing, you can easily switch by clicking the Open Settings (JSON) icon in the top right corner.
This will open the settings JSON file. At this point, the file will be empty since your workspace currently utilizes the default configurations provided by Visual Studio Code.
Here are a few customizations you can make to modify the appearance of the IDE, which you likely want to affect all of your future profiles:
{
"editor.stickyScroll.enabled": true,
"editor.cursorBlinking": "solid",
"editor.cursorSmoothCaretAnimation": "on",
"editor.cursorStyle": "line",
"editor.fontSize": 12,
"editor.lineHeight": 20,
"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code",
"editor.fontWeight": "500",
"editor.minimap.enabled": false,
"editor.renderWhitespace": "none",
"editor.tabCompletion": "on",
"editor.tabSize": 4,
"editor.multiCursorModifier": "ctrlCmd",
"editor.suggestSelection": "first",
"workbench.editor.enablePreview": false,
"workbench.sideBar.location": "right"
}{
"editor.stickyScroll.enabled": true,
"editor.cursorBlinking": "solid",
"editor.cursorSmoothCaretAnimation": "on",
"editor.cursorStyle": "line",
"editor.fontSize": 12,
"editor.lineHeight": 20,
"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code",
"editor.fontWeight": "500",
"editor.minimap.enabled": false,
"editor.renderWhitespace": "none",
"editor.tabCompletion": "on",
"editor.tabSize": 4,
"editor.multiCursorModifier": "ctrlCmd",
"editor.suggestSelection": "first",
"workbench.editor.enablePreview": false,
"workbench.sideBar.location": "right"
}Feel free to add any additional settings based on your specific requirements and preferences. Customize the IDE to suit your needs and enhance your development experience.
In addition, it is beneficial to install certain general-purpose extensions across all your profiles. Extensions like the ones mentioned above can be useful regardless of your specific tech stack. Since I primarily work with JavaScript, installing something like JavaScript (ES6) code snippets can be useful.
You can customize these extensions according to your preferences in the settings.json file.
{
...
"workbench.colorTheme": "GitHub Dark",
"errorLens.fontSize": "13px",
"errorLens.fontWeight": "bold"
}{
...
"workbench.colorTheme": "GitHub Dark",
"errorLens.fontSize": "13px",
"errorLens.fontWeight": "bold"
}Now that everything is set up, we can create a new profile dedicated to the MEAN stack development that inherits all the customizations from the base profile. This way, we can quickly create a profile tailored for MEAN stack development without starting from scratch.
Create a new profile
To create a new profile, you can follow these steps. First, find the gear icon at the the Explorer pane's bottom. Then, hover over the Profiles option. You will notice that the default profile is currently selected. Click on "Create Profile".
A pop-up window will appear, presenting you with options. Choose the Using Current Profile option, which will create a duplicate of your currently selected profile. Additionally, you might notice a selection of predefined templates available for use.
Choose a name for your profile. In this case, let's name it "MEAN". Press Enter to see the current profile's settings, configurations, and extensions. You can deselect any settings or extensions that do not fit the profile you are creating. However, since the customizations we made are minimal, leaving all options selected for now is fine.
That's it! You have successfully created a new profile that inherits all the settings and configurations from the default profile. Now, you can install specific extensions useful for a MEAN stack project, such as Angular Snippets and Pretty TypeScript Errors. Also, adjust the settings according to your preferences and project requirements. You can tailor the new profile to suit your MEAN stack development needs.
You can easily check the active profile by looking at the gear icon. It shows a little badge with the first two letters of the profile name, so you can quickly see which profile is active. It's a convenient way to identify the active profile without any hassle.
Within the profiles section accessed through the gear icon, you will see options such as import and export a profile. This is incredibly useful when sharing your profile with your team, ensuring consistent workspace settings, and avoiding unnecessary conflicts. You can choose to export the profile as a file or, even better, export it to a GitHub gist, which can be accessed remotely by your team members.
You can also create a temporary profile to experiment with new configurations and test extensions without altering your default or existing profile. These profiles can be created on the fly using the "Profiles: Create a Temporary Profile" in the command palette. While using a Temporary Profile, you can customize settings and extensions within your current VS Code session.
Syncing your profiles across your devices
Syncing your VSCode profiles across devices ensures a consistent development environment and effortless access to customized settings and extensions. It eliminates the need to manually recreate profiles on different machines, allowing changes made on one device to be applied to others. This saves time and effort while maintaining a synchronized development setup.
We'll use the built-in Settings Sync feature to activate the Profiles sync. Search for Settings Sync: Configure in the command palette; check the Profiles item in the drop-down menu that appears.
Conclusion
In conclusion, VS Code's profiles improve performance, streamline project management, minimize distractions, and offer customization options. With easy creation and switching, profiles seamlessly integrate within VS Code, eliminating the need for external configurations.