VSCode PRO-TIP: Code Profiles (multi-environment development)

I work in Ruby on Rails, NodeJS, VueJS. The problem I faced using a code editor is to use different ones for different programming languages. So, I went for sublime text for Ruby on Rails, Visual Studio Code for NodeJS and Visual Studio Code Insiders for VueJS development.

It was a hectic job to maintain different editors to what extensions I should use and if I use one editor, then there becomes a great clutter of extensions and settings also mismatch for one language extension to the other. Furthermore, if an update of editor comes, then it will be updated to one type of language editor. For example, there are frequent updates of VS Code insiders than others and as insiders is beta program, there is always a tension whether the new editor will have a problem or not.

I stumbled upon an article by @jsjoeio:

How to Create Code Profiles in VSCode

Using code profiles in VSCode, you can load different settings depending on what you’re working on. This can be helpful for instructors, teachers and screencasters.

DEV CommunityJoe Previte (he/him)

In this, he explained the implementation of @avanslaars by which we can use different profiles of same VS Code. I worked on it and it’s wonderful. Now I can have as many VS Code instances as many types of works I do and still, I have main VS Code remaining for just viewing folder or file in the raw editor.

Install VS Code and activate CLI

Install the latest simple VS Code in the system. Now activate the CLI by hitting cmd+shift+p and run Shell Command: Install 'code' command in path. By this, you will be able to run code in your terminal. This is the most important as code profiles can only work by running in command line.

Code Profile

The basic concept of code profile can be better understood by understanding how VS Code actually works. VS Code makes two folders in system’s library one is exts where all the extensions and their versions are downloaded and stored and the other is data folder where all the user data of code, including settings, are saved.

The main concept behind code profiles is that why not we make these two folders different and call those folders of extensions and settings according to our project settings. So if I want to use VS Code for Ruby on Rails I created a separate folder of extensions and settings for ruby and call code in command line with providing VS Code where to find extensions and settings. So next time if I want to use VS Code for NodeJS I would call the same VS Code but with a different folder of extensions and settings. Lastly, I can call simple VS Code to get simple bare bone VS Code.

Create first profile

In terminal enter the following codes:

cd
mkdir code_profiles
cd code_profiles
mkdir code-ruby
cd code-ruby
mkdir exts
mkdir data

This code snippet will create code_profiles in home directory of system and within that code-ruby and within code-ruby add folders exts and data.

Now in terminal run:

code --extensions-dir ~/code_profiles/code-ruby/exts --user-data-dir ~/code_profiles/code-ruby/data

This command will run code with extensions folder specified in code-ruby folder and user data as well in the provided folder. Now every extension, themes, and settings will save in our code_profiles -> code-rubyfolder and won’t change the main VS Code settings or extensions.

Terminal alias command

As this command is long enough to use every time, we will use the power of aliases in bash profile. So go in bash profile file and add the following code:

alias code-ruby="code --extensions-dir ~/code_profiles/code-ruby/exts --user-data-dir ~/code_profiles/code-ruby/data"

Save file and restart the terminal.

Now in terminal go to working folder for ruby and run instead of code . Write:

code-ruby .

This will open the folder with ruby extensions and settings you saved.

Second Profile

The same methodology is applied to have VueJS based VS Code editor by adding another folder named code-vue and then same steps just calling code-vue instead of code-ruby. Also create new bash profile alias named code-vue.

Conclusion

By using this procedure we can create as many VS Code instances as we like according to our development needs without bloating the main code editor.

Let me know in comments about the code profile or need any help.

Happy Coding!