Support 3rd party VSCode extensions

[techniq]

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.

[alanhamlett]

👍

[cuduy197]

👍

[EricSimons]

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!

[techniq]

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.

[EricSimons]

@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

[techniq]

• 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!
• 👍

[techniq]

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

[jikkujose]

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

[alanhamlett]

https://github.com/prettier/prettier

[vegarringdal]

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

[vegarringdal]

@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

[xianghongai]

@EricSimons

Nice!
how to get stackblitz extensions in VSCode?

[Ivanca]

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.

[kevindqc]

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!

[mmcintyre123]

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 that would certainly be a tremendous improvement, I can probably speak on behalf of many people (judging by comments I've read in various forums) that it would be even better to have a VSCode extension (perhaps this project presents a good starting point?) that allows you to open a stackblitz project in your local editor, and see the same instant updates in the browser. Perhaps this could be accomplished with something like VSCode's LiveShare, allowing the existing browser editor to be connected to a local VSCode editor. This would eliminate the need to support extensions in browser, and would allow users to work from their existing dev environments, which to my mind is infinitely preferable to spending the hours it would take to come close to replicating my local dev setup in another place - only to have to make inevitable workflow adjustments anyway. That's my two cents!

[purplem1lk]

Thank you for your patience - We are launching new core technology into beta next month that should resolve this issue so this will be closed accordingly. If this issue persists, feel free to tag me or ask to reopen this issue with screenshots of the error. Thank you! :)

[texastoland]

@purplem1lk Any supporting documentation?

[mkamalkayani]

@purplem1lk I would like to install some vs code extensions in the stackblitz. Is there any way to get updates on the new core technology you have mentioned?

[techieyann]

@purplem1lk is the new core technology ever going to be publicly available? Not being able to use emacs key-bindings is literally the only thing keeping me from being able to use stackblitz regularly.

[edmbn]

@purplem1lk next month was on May, will we have any news on this? Even on commander paid plan we don't have access to this features. Thank you.

[AaronStackBarnes]

I am happy to pay but I cant use this without vim hotkeys, and I reallllyyyyyy want to use this.

[DmitryEfimenko]

Why is this issue closed? I don't see the extensions support on stackblitz...

I'd love to work on Angular projects with Angular Language Service (extension) enabled.

@purplem1lk - pinging you as requested.

[Kitsutsuki-98]

I think this got removed? can't see the addons icon on the left

[liana-p]

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

[Darkle]

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

• https://www.youtube.com/watch?v=Ea1zJD5uQRg
• https://stackblitz.com/codeflow

[fvsch]

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.

[alanhamlett]

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?

[samdenty]

@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.

[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

[samdenty]

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 👍

[janpio]

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.

[Hussseinkizz]

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

[samdenty]

@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)