Support 3rd party VSCode extensions

Any plans to bring VSCode extensions to stackblitz?

Having vim keyboard bindings would be great, as well as other extensions like vscode-styled-components for syntax highlighting of styled-components strings, prettier formatting, etc.

Currently codesandbox.io has Vim and Prettier support, but it seems like having VSCode extension support would open up a lot of functionality, but I'm sure some extensions could not be supported.

👍

Would love to support VS Code extensions — this might be a difficult one for us to pull off though. VS Code is (surprisingly) tied heavily to running in Electron/locally, so even getting the VS Code Dark Plus theme running in StackBlitz required custom setup.

However, we've been kicking around the idea of creating our own separate plugin system that's reasonably compatible with VS Code's. This would allow folks to port over extensions with relatively few hiccups, and it would ensure that all plugins are optimized to run super fast in-browser.

Would love to hear thoughts on this!

While supporting VS Code extensions directly would be amazing, I figured there would be some pretty big hurdles. I also expect there to be ongoing compatibility problems on an extension-by-extension basis to the point we'd probably need a "whitelist" or "approved/supported plugins". With that said, maybe it would be best to have a separate extension system (unless we could support 95% extensions without much compatibility issue).

I know there are some extensions/features I'd like to see available before I'd consider moving over from codesandbox.io like css-in-js syntax highlighting, prettier, and vim bindings.

@techniq

@techniq def agree with separate extension system idea; will be pleasantly surprised if it looks like we can support 95% of regular extensions :)

Regarding the other pts:

CSS in JS syntax highlighting -> might be able to make this happen. What libs are you using?
Prettier -> landing soon!
VIM -> would love to get this in; we're currently seeking folks to help create a Monaco extension

I primarily use styled-components, but have been experimenting with glamorous and emotion (basically all the glamor-based ones). I use vscode-styled-components in VSCode
Awesome!
👍

Btw, it looks like codesandbox uses codemirror and it's vim bindings

Prettier would be an awesome addition! If it can support styled-components, then this will be super good!

https://github.com/prettier/prettier

Any way its possible to get html code highlighting in ts/js now ?
Something like this?
https://github.com/mydesireiscoma/es6-string-html

@EricSimons

@EricSimons
Any chance we can get something like
https://github.com/mydesireiscoma/es6-string-html

since it also works by using comments it will be able to be used by anyone, js/ts or frameworks

@EricSimons

@EricSimons

Nice!
how to get stackblitz extensions in VSCode?

Without this I don't think Stackblitz can reach any kind of significant success. There should be a big read warning at homepage saying it doesn't support VScode extensions and that there isn't any equivalent way to extent the editor functionality.

I saw that VSCode Sept 2019 had this:

A new proposed API vscode.env.uiKind was added that allows an extension to figure out from what kind of UI the extension is being used from. In preparation for supporting running VS Code in a browser, the possible values are UIKind.Desktop and UIKind.Web.

Maybe it will be coming soonish!

Hello, I have an extension for the syntax of my scripting language that I wanted to install in Stackblitz but can't.

This would allow people to use stackblitz to work on their game directly in the IDE. Right now without syntax highlighting for script files it doesn't work great otherwise.

The extension just uses the standard features for providing syntax highlighting through textmate grammar files. It doesn't do anything fancy so I'd assume it's compatible

It looks like stackblitz now supports vscode extensions via the new Codeflow feature:

Hi all!

Just wanted to confirm that we support VS Code extensions in the StackBlitz Codeflow editor, which uses VS Code (unlike our classic editor).

Right now we support a selection of VS Code extensions, and are working on adding more.

Looks like Codeflow uses the VS Code Marketplace extension list, but only supports extension kind ui. That means extensions requiring a workstation (extension kind workspace) aren't listed in Codeflow's extension list. GitHub's web IDE loads extensions from Open VSX so we've been able to publish a web-only version of our plugin to Open VSX using extension kind ui.

Can Codeflow fallback to checking Open VSX when an extension is found, but of kind workspace?

@alanhamlett

@alanhamlett we're working on open vsix support - we have a branch where the downloading & installation of workspace extensions works.

Currently you can't see some extensions in the list because it's a hardcoded set of popular extensions.

Currently you can't see some extensions in the list because it's a hardcoded set of popular extensions.

Could you add WakaTime's extension to that list? It's been requested by some of our users.

https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime
https://open-vsx.org/extension/WakaTime/vscode-wakatime

@alanhamlett

Currently you can't see some extensions in the list because it's a hardcoded set of popular extensions.

Could you add WakaTime's extension to that list? It's been requested by some of our users.

https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

https://open-vsx.org/extension/WakaTime/vscode-wakatime

@alanhamlett
I'll try to add the wakatime extension tomorrow 👍

We at @prisma would appreciate a ping when there is some documentation about what needs to happen to get an extension StackBlitz compatible (or how to gate incompatible features for example). If needed we could also extract our visual features into a standalone extension.

Can't see exactly how I install an extension!!!

@algoflows

@algoflows we’rere working on adding extension VSIX side loading ability, so you can run any extension (you may have to test them first to see if they’re compatible)

Just wanted to confirm that we support VS Code extensions in the StackBlitz Codeflow editor, which uses VS Code (unlike our classic editor).

How can I choose the Codeflow editor when I start a new project? Or is Codeflow only available through pr.new?

Wakatime integration whould also be nice

G

Navigation Menu

Repository navigation

Support 3rd party VSCode extensions #3

13 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support 3rd party VSCode extensions #3

Description

Activity

alanhamlett commented on Aug 3, 2017

cuduy197 commented on Aug 4, 2017

EricSimons commented on Aug 6, 2017

techniq commented on Aug 7, 2017

EricSimons commented on Aug 7, 2017

techniq commented on Aug 8, 2017

techniq commented on Aug 8, 2017

jikkujose commented on Aug 16, 2017

alanhamlett commented on Aug 17, 2017

vegarringdal commented on Aug 27, 2018

vegarringdal commented on Aug 28, 2018

xianghongai commented on Jan 17, 2019

Ivanca commented on May 19, 2019

kevindqc commented on Oct 9, 2019

13 remaining items

liana-p commented on Oct 11, 2022

Darkle commented on Oct 15, 2022

fvsch commented on Jan 30, 2023

alanhamlett commented on Feb 4, 2023

samdenty commented on Feb 4, 2023

alanhamlett commented on Feb 4, 2023

samdenty commented on Feb 9, 2023

janpio commented on Feb 11, 2023

algoflows commented on Mar 1, 2023

Hussseinkizz commented on Jun 8, 2023

samdenty commented on Jun 8, 2023

effulgentsia commented on Sep 23, 2024

lu2000luk commented on Jan 2, 2025

jobayer110 commented on Dec 26, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions