1

I'm a full-stack developer (PHP + JS).

I want one VS Code for backend and one VS Code for frontend.

I saw a green VS Code in a tutorial but I don't know how to install two VS Code together.

Gino Mempin
  • 25,369
  • 29
  • 96
  • 135
mansuppper
  • 31
  • 1
  • 4
  • 6
    Why do you need 2? You can open 2 different windows of VS Code, 1 window with the backend workspace, and 1 window for the frontend workspace. Each workspace can have its own extensions (linters, formatters, etc.) and settings. – Gino Mempin Jun 19 '21 at 13:17
  • 1
    I think needing 2 installations is an XY problem. If you just need 2 separate windows or workspaces, see: [How do I open multiple instances of Visual Studio Code?](https://stackoverflow.com/q/29964825/2745495) and [Open multiple Projects/Folders in Visual Studio Code](https://stackoverflow.com/q/30234146/2745495) and [Separate Visual Studio Code workspace with different extensions for different programming languages](https://stackoverflow.com/q/61850069/2745495). – Gino Mempin Jun 19 '21 at 13:28
  • Also: https://code.visualstudio.com/docs/editor/workspaces – Gino Mempin Jun 19 '21 at 13:31
  • 1
    You don't need two versions of VSCode, that is silly... Just open two instances! – JΛYDΞV Jun 19 '21 at 13:55
  • 1
    If you are using VS Code for multiple purposes (code editor, log reader, database client, etc.), it's useful to have multiple instances with different profiles (settings, extension, etc.) – HamedH Aug 17 '21 at 14:25
  • Yes, all try that you can use workspaces, insiders etc. But, on a Mac, the https://code.visualstudio.com/docs/editor/portable approach means you can have a dock icon for the dev version. I use VSCode as my "finder" to see all my files (and view/edit them), so this is ultra-handy. – val Dec 08 '22 at 17:38

4 Answers4

3

Your Solution is workspace:

You just need to use VS Code's workspaces so you don't need to install two vscodes. just change the workspace and that's it. you can install different plugins for different workspaces.

BUT

If you are curious about the green icon vscode that you mentioned, read the rest of my answer.

Visual Studio Code Insiders

There is a beta version of vscode called Visual Studio Code Insiders.

It includes the latest features and bug fixes, but new features may or may not be stable.

It has a green icon.

you can sign in with a different account and use it for the front-end and download all the plugins that you need.

you can download it from here:

https://code.visualstudio.com/insiders/

Visual Studio Code portable

The portable vscode is also another way to have multiple vscodes.

read more info here https://code.visualstudio.com/docs/editor/portable

you can change the portable vscode icon color to green pink or what ever you want

Raskul
  • 1,674
  • 10
  • 26
  • why do you need to use insiders with a different account, it uses a completely different storage for extensions `.vscode-insiders` – rioV8 Jun 19 '21 at 13:20
  • As far as i know, workspaces are mainly presets of folders / root folders of projects you work on. And not separate installations with different plugins & settings. – Sagive Dec 22 '21 at 04:46
1

You don't need to install multiple copies of VS Code.

You just need to use VS Code's "workspaces":

A Visual Studio Code "workspace" is the collection of one or more folders that are opened in a VS Code window (instance).
...

The concept of a workspace enables VS Code to:

  • Configure settings that only apply to a specific folder or folders but not others.
  • Persist task and debugger launch configurations that are only valid in the context of that workspace.
  • Store and restore UI state associated with that workspace (for example, the files that are opened).
  • Selectively enable or disable extensions only for that workspace.

If you are coming from other IDEs, a "workspace" is the same as a "project" or a "solution".

You just have to setup 2 workspaces:

  • 1 workspace for your frontend codes/project
  • 1 workspace for your backend codes/project

Then just open 2 windows for each of your workspace:

Select menu File → New Window from the menu and then open the other folder in the new window.

enter image description here

The advantage of this is it allows sharing of extensions, keyboard shortcuts, and other settings between your frontend and your backend workspaces. For example, you have Git-related extensions and settings. With 2 installations, you'll have to track and sync these common settings every time something changes. With just 1 installation + workspaces, the settings are shared.

If you're concerned about having different extensions for backend and frontend, see my answer here: Separate Visual Studio Code workspace with different extensions for different programming languages. VS Code supports that as well. For example, enable PHP linter extensions only for the backend workspace and JS linter extensions only for the frontend workspace.

The other answer about using VS Code Insiders can work, but the Insiders version is not meant to be used for that. It's mainly used to check/test new features of VS Code before they are released to the stable versions. Some things may not be working or missing there (since it's not the "Stable" build).

Gino Mempin
  • 25,369
  • 29
  • 96
  • 135
1

You can have any number of portable instances of VS Code. Just download it from https://code.visualstudio.com/docs/editor/portable , then extract and put it in some folder.

For easy accessing, you can create a link of 'Code.exe' inside extracted folder and pin it to the taskbar.

You can also make each one have a different icon color and theme by using instructions from this answer: https://stackoverflow.com/a/68816831/6339469

HamedH
  • 2,814
  • 1
  • 26
  • 37
0

You can do the following to get two Instances of VS code at the same time.

The First Solution: use VS code Stable and VS code Insider [I put the link below]

Insider Vscode

Vscode & Vscode Insider Together

The Second Solution: Use the web version of these two versions

Vscode.dev

insiders.vscode.dev

The Third Solution: Add a new window by right-clicking on the program icon or via the VSC file menu and the option to add a new window [Below Pics]

Via File Menu Inside Vscode

Via Righ Click On Vscode Open And Click On New Windows

The Fourth Solution: Use the Project Manager extension [Link Below], with the help of which you can add several folders to your VS code and move to your desired project in a few seconds with each click.

Project Manager Vscode Extension

Project Manager Vscode Extension Image

The Fifth Solution: You Can Also Use Binaries of VS Code Like VSCodium [Link Below]

VSCodum

Milad Fathy
  • 11
  • 5