VS Code Desktop

Develop any repository or Devbox in your VS Code Desktop app and enjoy uninterrupted use of all the extensions and keybindings you’ve already configured. The CodeSandbox extension provides seamless interaction with all core features allowing you to retain the efficiency and collaboration of CodeSandbox in the comfort of your own setup.

Open your project from the web editor

You can jump to VS Code at anytime from the browser, as shown below.

We also support opening the branch using Visual Studio Insiders.

Open your project from VS Code Desktop

Once the extension is installed, you can open a Devbox or repo branch from the Dashboard section, as shown below.

You will only be able to select from a list of repositories that have been imported to CodeSandbox. If you don’t see your project in the list, check your dashboard on CodeSandbox to make sure everything is set up there first.

If, at any point, you want to switch to the CodeSandbox editor, simply click ‘Open in CodeSandbox’ under the ‘Control Panel’.

Control Panel

The control panel contains actions for managing branches, opening a PR, and evaluating VM usage.

DevTools

Just like in the CodeSandbox editor, you can access running ports to view code changes in the browser. The available ports are listed in the panel. Clicking on a port will open a tab in your default browser.

Live Collaboration

Collaboration is one of the core CodeSandbox features. Users who are active on a devbox or repository branch are on the same VM. That means that all the changes made by users active on the VM will be visible in real-time.

View collaborators

Once you are connected to the branch, you will be able to see a list of teammates who are active on the branch. You can also see the list of collaborators and the environment they are working from.

In this case, the displayed user is active in both VS Code and the CodeSandbox editor.

Multiplayer Changes

Changes made to a file are reflected in every user's editor. You can click on a collaborator's name to focus on the file and line that they are working on.

Reviewing PRs in VS Code

You can review PRs directly from VS Code while connected to CodeSandbox. To do this, you should install the CodeSandbox GitHub App. With this app, every PR will have a link to open the branch in VS Code.

We also recommend installing the GitHub Pull Request (opens in a new tab) extension and configuring it as a default extension in your user settings (as outlined below). With this extension, you can post comments on GitHub directly from your editor.

Settings & Extensions

Default Workspace Extensions

You can create the file .vscode/extensions.json in your repository to define the default extensions that should be installed for the repository. An example:

{
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}

This will make sure that Prettier and ESLint are installed whenever someone opens the branch in VS Code.

Default User Extensions

If you have any personal extensions you want in every branch, you can define those in your VS Code settings under the setting id remote.SSH.defaultExtensions. To change this setting, you can open VS Code settings (CMD/Ctrl + ,) and search for remote.SSH.defaultExtensions.

You can copy your favourite VS Code extension ids, and put them in that setting. From then on, these extensions will be automatically installed in your branches.

VS Code Setting Sync

To sync your settings and keybindings between branches, you can enable VS Code Setting Sync. To learn more about how to set this up, you can check the VS Code Docs (opens in a new tab).

FAQs

What to do about that recurring trust modal?

This modal shows up every time you launch a project folder in a new container. Since every branch will be opened with a unique SSH url, VS Code will ask you to verify that you trust the connection. This is an important security notice used to confirm that the user understands the connection being established before opening the code. You can read more about the modal in the VS Code blog (opens in a new tab).

Do I have to be connected to a live session on CodeSandbox in order to work on a branch?

It is possible to work in an “un-synced” state. In order for CodeSandbox features to work, the branch needs to be established on a remote connection AND connected to Pitcher (see 'How it works' for more information).

Who can access my code?

Only people on your CodeSandbox team with permission to access the repository may join as collaborators. Repository permissions are carried over from GitHub. To add someone new to the team, provide access on GitHub and add them to the CodeSandbox. From there, they can access the code in the browser or follow the steps above to use VS Code.