yesmeck / vs-codesandbox

Bring CodeSandbox into your favorite editor

CodeSandbox for VS Code

This VS Code extension brings CodeSandbox into your favorite editor, allowing you to create, edit sandbox on CodeSandbox right from VS Code.

Getting Started

1. Install the extension.
2. Open the Command Palette (Ctrl/Cmd+Shift+P) and type "codesandbox login".
3. Copy authorization code to the input
4. Restart VS Code
5. Open the Command Palette (Ctrl/Cmd+Shift+P) and type "codesandbox create".
6. Wait seconds.
7. Have fun.

Available Commands

• Login (codesandbox.login)
• Create sandbox (codesandbox.createSandbox)
• Rename sandbox (codesandbox.renameSandbox)
• Open sandbox (codesandbox.openSandbox)
• Preview sandbox (codesandbox.previewSandbox)
• Show in web editor (codesandbox.showInWebEditor)

License

MIT

vs-codesandbox's Issues

Unable to save file, can't remove project from editor.

I can't save file and remove the project from the editor.

command 'codesandbox.*' not found

Any codesandbox commands (vscode ctrl + shift + p) result in the following error:

Command 'Codesandbox: Show in web editor' resulted in an error (command 'codesandbox.showInWebEditor' not found)

Version: 1.63.2
Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3
Date: 2021-12-17T15:31:24+02:00
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 5.14.21-210.current

Codesandbox version 0.0.8

VSCode Workspace Trust feature breaks extension

I'm trying to create a new Sandbox, but when my editor switches to the newly created window, VS Code tells me that the workspace is running in "restricted mode", which is a result of a new feature in VS Code called Workspace Trust.

I can opt to "trust" the workspace, but having done so, none of the auto-generated files are added to the sandbox. Is there a way around this? Perhaps one to say "this plugin and anything it generates is trusted"?

I can easily edit my codesandbox files, but how do i save it. Whenever i do it, it shows an error

Issue Type: Bug

Okay, so first when you create a sandbox, and edit it files and then preview it in web browser using the command, it doesn't update the sandbox

Extension version: 0.0.8
VS Code version: Code 1.58.0 (2d23c42a936db1c7b3b06f918cde29561cc47cd6, 2021-07-08T06:54:55.083Z)
OS version: Windows_NT x64 10.0.19043
Restricted Mode: No

System Info

Item	Value
CPUs	Intel(R) Pentium(R) CPU 6405U @ 2.40GHz (4 x 2400)
GPU Status	2d_canvas: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on rasterization: enabled skia_renderer: enabled_on video_decode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	3.81GB (1.04GB free)
Process Argv	--crash-reporter-id c0ef8949-9aba-4760-8b47-012d6cdffabf
Screen Reader	no
VM	0%

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383:30185418
pythonvspyt602:30300191
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492cf:30256860
pythonvspyt639:30300192
pythontb:30283811
pythonvspyt551:30311712
vspre833:30321513
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
pythondataviewer:30285071
vscus158:30321503
pythonvsuse255:30335481
vscod805:30301674
pythonvspyt200cf:30331938
vscextlangct:30333562
binariesv615:30325510
vstea450:30335276
bridge0708:30335490

Create project command creates project from a new account

When you run create project command (after logging in), it will create the project on an account with the same name as mine but no profile picture and I can't edit the sandbox from the browser (it says its not mine)

Embed in webview?

Any possibility of actually embedding the codesandbox into VSCode itself?

Unable to save file

复现步骤

• 安装插件
• codesandbox login
• codesandbox create
• 询问 Photos 访问权限：拒绝
• 询问 Calendar 访问权限：拒绝
• 询问 Contacts 访问权限：拒绝
• 编辑 index.js
• cmd + s 保存失败

为啥会需要 Photos/Calendar/Contacts 的访问权限？

I'm not able to open a existing code from my repo

When I tried to open an existing project, the extension not recognize it.
I tried with URL, the code, and part of the URL and doesn't work

Examples:

• https://codesandbox.io/s/relaxed-meninsky-0ftro
• relaxed-meninsky-0ftro
• 0ftro

The link for the extension doesn't work

https://marketplace.visualstudio.com/items?itemName=yesmeck.codesandbox shows 404

unable to open sandobox

Hi after i type open sandobox comand, plugin prompts me to select sandbox but there is no list, nor way enter box name/ID.

[Bug] Can't preview if the project contains server

Hi, @yesmeck ,

Huge thanks to you for this great repo, it's brilliant! 👍 Your plugin has greatly improved my work experience.

Here's a question, I'm not sure this is an issue, it's more like a new feature about codesandbox, I don't know the current API of CSB can support this function. And I would be happy to sponsor the development of this feature, if you link this repo to any sponsorship site.

Details

If a codesandbox project contains a server, it cannot be previewed correctly.

Here is an example of the next.js project, note that there is a server contorl panel on the left side of the project dashboard, If I open this project on locale vscode, it will not work correctly.

links

Doesn't read sandbox folders

I only have sandboxes in folders. None are listed when trying to open a sandbox.

Hot reload not working not working for react application

To reproduce do the following:

1. Create react application using vs-codesandbox
2. Open the preview link using vs-codesandbox extension
3. Open the App.js file and change any text
4. Now open the preview changes will not reflect unless you reload manually