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. Also 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 then 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: https://dev.to/jsjoeio/how-to-create-code-profiles-in-vscode-3ofo in which he explained the implementation of @avanslaars by which we can use different profiles of same vs code. I worked on it and its amazing. Now I can have as many vs codes as many different 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 following codes:
cd
mkdir code_profiles
cd code_profiles
mkdir code-ruby
cd code-ruby
mkdir exts
mkdir data
This code snippet will created 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 extensions, 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 everytime, 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 vue 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.
Latest comments (8)
Thanks for sharing your work, but now this is built-in vscode with settings profiles: code.visualstudio.com/updates/v1_6...
I work on multiple languages and on different machines, and each machine used by more than one person. This is a save for me.
This is great, thanks a lot man,
Thanks for the share. Excelent explanation, it's almost the same approach that I've used on this series:
dev.to/equiman/series/8983
I've created "flavors" for React, Node, .Net, and Arduino.
Hope it helps others!
Amazing! Thank you so much for sharing! I've been searching for a solution like this one for a long time. :) Can I translate it to brazilian portuguese with the proper credits to you?
Sure spread it as much as you can.
Wonderful, I've been looking for a solution like that. I loved it so much I made a little CLI automating the creation and opening of these profiles, planning to get it to publish to npm and Github soon as soon as I clean up the code a bit and.
Update: it's been a while, but I've finally had some time, rewrote my tool from scratch, and I'm planning to publish it hopefully quite soon.
Oh wow, that is so cool. Thanks for sharing that!