VS Code
Open any branch directly in your local VS Code and use all the extensions and keybindings that you’ve already configured. On top of this, all editors can collaborate seamlessly, so your team members can follow your steps on VS Code without leaving the Web Editor.
Open your branch in VS Code
You can jump to VS Code at anytime from the browser
We also support opening the branch Using Visual Studio Insiders.
Alternatively, you can do all your work in VS Code without accessing CodeSandbox on the web
- Open the extension
- Sign in if you haven’t already
- Select the ‘Projects’ panel and select the project you want to work on. From there you can open a new branch or select an existing branch to open
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 ‘Branch Control Panel’
DevTools
Just like in the CodeSandbox editor, you have access to 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
View collaborators
Once you are connected to the branch, you will be able to see a list of teammates that are active on the branch. You can see the list of collaborators as well as the environment they are working from.
In this case, I am active in both VS Code and the CodeSandbox editor.
Multiplayer Changes
Changes that are made to a file are reflected in the editor of every user. Select the name of a collaborator 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 GitHub App of CodeSandbox. With this app, every PR will have a link to open the branch in VS Code.
We also recommend to install the GitHub Pull Request (opens in a new tab) extension, and configure it as a default extension in your user settings (as outlined here). With this extension you can put 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
In case you have any personal extensions that you want to have 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 here (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 here (opens in a new tab).
Do I have to be connected to 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 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 permissions to the repository may join as a collaborator. 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.
More Questions?
For questions and support, please use the community Discord server (opens in a new tab).