VS Code PRO-TIP: Code Profiles (multi-environment development)
Tags: vscode, productivity, tips
Published: 2019-10-24 09:36:35

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://twitter.com/jsjoeio "jsjoeio twitter"): **[https://dev.to/jsjoeio/how-to-create-code-profiles-in-vscode-3ofo](https://dev.to/jsjoeio/how-to-create-code-profiles-in-vscode-3ofo "article about vs code profiles")** in which he explained the implementation of [@avanslaars](https://twitter.com/avanslaars "avanslaars twitter profile") 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:
```bash
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:
```bash
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-ruby`folder 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:
```bash
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:
```bash
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.