[GH-ISSUE #313] [request] VS code extension #113

Closed
opened 2026-03-16 13:28:31 +03:00 by kerem · 23 comments
Owner

Originally created by @arangates on GitHub (Nov 19, 2019).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/313

shipping as Vscode extension might be the best place to start getting initial traction

Originally created by @arangates on GitHub (Nov 19, 2019). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/313 shipping as Vscode extension might be the best place to start getting initial traction
kerem 2026-03-16 13:28:31 +03:00
Author
Owner

@liyasthomas commented on GitHub (Nov 19, 2019):

@arangates would you like to contribute to making a VS code extension..? I don't have any in-hand experience on making a VS Code extension.

<!-- gh-comment-id:555453527 --> @liyasthomas commented on GitHub (Nov 19, 2019): @arangates would you like to contribute to making a VS code extension..? I don't have any in-hand experience on making a VS Code extension.
Author
Owner

@deadbirdi commented on GitHub (Nov 23, 2019):

@arangates How are you imagining this looking and working? Just trying to wrap my head around the UI/UX.

<!-- gh-comment-id:557831154 --> @deadbirdi commented on GitHub (Nov 23, 2019): @arangates How are you imagining this looking and working? Just trying to wrap my head around the UI/UX.
Author
Owner

@ghost commented on GitHub (Nov 25, 2019):

@sneakycrow I can imagine making it a tab similar to markdown preview https://github.com/shd101wyy/vscode-markdown-preview-enhanced

<!-- gh-comment-id:557966750 --> @ghost commented on GitHub (Nov 25, 2019): @sneakycrow I can imagine making it a tab similar to markdown preview https://github.com/shd101wyy/vscode-markdown-preview-enhanced
Author
Owner

@FatDoge commented on GitHub (Nov 25, 2019):

Yep, it should has a GUI like the web version, people may choose it rather than a command line version postwoman.

<!-- gh-comment-id:558087422 --> @FatDoge commented on GitHub (Nov 25, 2019): Yep, it should has a GUI like the web version, people may choose it rather than a command line version postwoman.
Author
Owner

@ghost commented on GitHub (Nov 26, 2019):

maybe build a desktop version too.
https://github.com/mimecorg/vuido

<!-- gh-comment-id:558765401 --> @ghost commented on GitHub (Nov 26, 2019): maybe build a desktop version too. https://github.com/mimecorg/vuido
Author
Owner

@deadbirdi commented on GitHub (Nov 26, 2019):

maybe build a desktop version too.
https://github.com/mimecorg/vuido

This sounds rad. Could you create a second issue for it so we can track it @fibric

<!-- gh-comment-id:558851554 --> @deadbirdi commented on GitHub (Nov 26, 2019): > maybe build a desktop version too. > https://github.com/mimecorg/vuido This sounds rad. Could you create a second issue for it so we can track it @fibric
Author
Owner

@deadbirdi commented on GitHub (Nov 26, 2019):

@liyasthomas I'll take a shot at this. I haven't ever built a VSCode plugin before though. So if there's someone with more experience with then they can take it. Otherwise I'll try to flex my learning muscles 💪

<!-- gh-comment-id:558852285 --> @deadbirdi commented on GitHub (Nov 26, 2019): @liyasthomas I'll take a shot at this. I haven't ever built a VSCode plugin before though. So if there's someone with more experience with then they can take it. Otherwise I'll try to flex my learning muscles 💪
Author
Owner

@deadbirdi commented on GitHub (Nov 27, 2019):

@liyasthomas Feel free to assign the issue to me. I'm going to get started on some tutorials for making a VS Code plugin today and get started on this specific plugin sometime after Thanksgiving.

<!-- gh-comment-id:559254462 --> @deadbirdi commented on GitHub (Nov 27, 2019): @liyasthomas Feel free to assign the issue to me. I'm going to get started on some tutorials for making a VS Code plugin today and get started on this specific plugin sometime after Thanksgiving.
Author
Owner

@andreujuanc commented on GitHub (Nov 29, 2019):

I can help you out @sneakycrow :)

<!-- gh-comment-id:559719899 --> @andreujuanc commented on GitHub (Nov 29, 2019): I can help you out @sneakycrow :)
Author
Owner

@deadbirdi commented on GitHub (Dec 6, 2019):

@andreujuanc That sounds awesome! I'm actually unsure I can contribute the time right now or for the foreseeable next few months. @liyasthomas can you go ahead and un-assign me from the task! Sorry, I just had a bunch of personal stuff come up recently!

<!-- gh-comment-id:562594203 --> @deadbirdi commented on GitHub (Dec 6, 2019): @andreujuanc That sounds awesome! I'm actually unsure I can contribute the time right now or for the foreseeable next few months. @liyasthomas ~~can you go ahead and un-assign me from the task!~~ Sorry, I just had a bunch of personal stuff come up recently!
Author
Owner

@liyasthomas commented on GitHub (Dec 6, 2019):

Okay. I can understand.

<!-- gh-comment-id:562595157 --> @liyasthomas commented on GitHub (Dec 6, 2019): Okay. I can understand.
Author
Owner

@Kradirhamik commented on GitHub (Dec 7, 2019):

Looking forward for this! I'm not so good at coding, but I'm alright at testing if useful ;)

<!-- gh-comment-id:562884570 --> @Kradirhamik commented on GitHub (Dec 7, 2019): Looking forward for this! I'm not so good at coding, but I'm alright at testing if useful ;)
Author
Owner

@vieirin commented on GitHub (Jan 2, 2020):

I have no experience in vscode extensions, but I don't believe it's that hard, so I could help on this, platformio starts a whole ide over vscode, for example.
I think it's a good reference for this

<!-- gh-comment-id:570283660 --> @vieirin commented on GitHub (Jan 2, 2020): I have no experience in vscode extensions, but I don't believe it's that hard, so I could help on this, platformio starts a whole ide over vscode, for example. I think it's a good reference for this
Author
Owner

@ac2epsilon commented on GitHub (Jan 3, 2020):

AFAI .. -IAC? -AIC? never remembered them, damn, anyway. What is the main obstacle to vsce? You're right and it's not as difficult (as nothing too heavy on earth), but here are three rocks on the way: 1. Limitations. Because vsc is a hosted environment, you have some rules and restrictions. For example, no SVG in the project except blah blah. But you love your SVG, don't you? 2. Integration. As Eclipse uses swt, the same thing happens with vsc. You must follow the instructions and follow the API to make your vsce look natural and work properly. Own menus, own notifications, own status bar, right? Unpredictable screen space that the user can change at any (rest assured, inappropriate) time . 3. UX. Due to the built-in nature of the plugins, they are criminally restricted on the screen. As for today's PW, which we all know and love, it must be completely rewritten and any component reviewed. As a result, my view is simple: if and when an application becomes vsce, it should be a separate project that can only have a few snippets of the fullscreen version / Or we have to stay limited to vsce-compatible features (oh, no, it's just a terrible alternative). So Fork & Shine!

<!-- gh-comment-id:570635729 --> @ac2epsilon commented on GitHub (Jan 3, 2020): AFAI .. -IAC? -AIC? never remembered them, damn, anyway. What is the main obstacle to vsce? You're right and it's not as difficult (as nothing too heavy on earth), but here are three rocks on the way: 1. Limitations. Because vsc is a hosted environment, you have some rules and restrictions. For example, no SVG in the project except blah blah. But you love your SVG, don't you? 2. Integration. As Eclipse uses swt, the same thing happens with vsc. You must follow the instructions and follow the API to make your vsce look natural and work properly. Own menus, own notifications, own status bar, right? Unpredictable screen space that the user can change at any (rest assured, inappropriate) time . 3. UX. Due to the built-in nature of the plugins, they are criminally restricted on the screen. As for today's PW, which we all know and love, it must be completely rewritten and any component reviewed. As a result, my view is simple: if and when an application becomes vsce, it should be a separate project that can only have a few snippets of the fullscreen version / Or we have to stay limited to vsce-compatible features (oh, no, it's just a terrible alternative). So Fork & Shine!
Author
Owner

@liyasthomas commented on GitHub (Jan 3, 2020):

Wow! That's a neat clarification. I guess I know how this will end.

Edit: I changed my mind. I'll be working on this feature since it's the mose requested feature
🙌🏼

<!-- gh-comment-id:570643726 --> @liyasthomas commented on GitHub (Jan 3, 2020): Wow! That's a neat clarification. I guess I know how this will end. Edit: I changed my mind. I'll be working on this feature since it's the mose requested feature ✨🙌🏼
Author
Owner

@liyasthomas commented on GitHub (Jan 4, 2020):

Can we make use of WebView in VS code extension? @RandomFractals any thoughts?

<!-- gh-comment-id:570786311 --> @liyasthomas commented on GitHub (Jan 4, 2020): Can we make use of [WebView](https://code.visualstudio.com/api/extension-guides/webview) in VS code extension? @RandomFractals any thoughts?
Author
Owner

@RandomFractals commented on GitHub (Jan 4, 2020):

yes! I would recommend that route as there are no other options to do it for custom editors or views in vscode.

You might need to refactor and retrofit some of your web app parts to reuse them for this effort.

However, keep in mind vscode webviews are your typical node.js web apps and things should work well if they work in a browser.

You just get an option to hook up to vscode explorer, do custom outlines, config settings, fs hooks, etc. that you don't typically get in a browser experience.

<!-- gh-comment-id:570786627 --> @RandomFractals commented on GitHub (Jan 4, 2020): yes! I would recommend that route as there are no other options to do it for custom editors or views in vscode. You might need to refactor and retrofit some of your web app parts to reuse them for this effort. However, keep in mind vscode webviews are your typical node.js web apps and things should work well if they work in a browser. You just get an option to hook up to vscode explorer, do custom outlines, config settings, fs hooks, etc. that you don't typically get in a browser experience.
Author
Owner

@RandomFractals commented on GitHub (Jan 4, 2020):

@liyasthomas if you are just starting with vscode ext. dev, a few pointers:

  1. don't use that cat demo. It's a really bad webview ext. example.

  2. Join this slack workspace where you can ask questions about vscode ext. dev:

https://vscode-dev-community.slack.com/

It's not the official vscode team slack, but there are some members from that team on it.

Overall, it's a very vibrant and warm dev community. I do congregate there a lot :)

Good luck!

<!-- gh-comment-id:570786922 --> @RandomFractals commented on GitHub (Jan 4, 2020): @liyasthomas if you are just starting with vscode ext. dev, a few pointers: 1. don't use that cat demo. It's a really bad webview ext. example. 2. Join this slack workspace where you can ask questions about vscode ext. dev: https://vscode-dev-community.slack.com/ It's not the official vscode team slack, but there are some members from that team on it. Overall, it's a very vibrant and warm dev community. I do congregate there a lot :) Good luck!
Author
Owner

@liyasthomas commented on GitHub (Jan 4, 2020):

Lol, i was just going through the cat demo and I was like.. "how immature this demo is..".

Thanks for the link 🙌🏼👍

<!-- gh-comment-id:570787003 --> @liyasthomas commented on GitHub (Jan 4, 2020): Lol, i was just going through the cat demo and I was like.. "how immature this demo is..". Thanks for the link 🙌🏼👍
Author
Owner

@RandomFractals commented on GitHub (Jan 4, 2020):

haha! yeah, it's done by the cat lovers & it's a shame that most devs starting on vscode extensions get to that page first.

My recommendation is you pick a similar http proxy/client with webview extension from vscode marketplace and clone it to get started since they don't support paid extensions and pretty much all of them are OSS with links to github repos you can peruse.

There are a bunch of them, but none are like your postwoman. Btw, I love the name!

<!-- gh-comment-id:570787709 --> @RandomFractals commented on GitHub (Jan 4, 2020): haha! yeah, it's done by the cat lovers & it's a shame that most devs starting on vscode extensions get to that page first. My recommendation is you pick a similar http proxy/client with webview extension from vscode marketplace and clone it to get started since they don't support paid extensions and pretty much all of them are OSS with links to github repos you can peruse. There are a bunch of them, but none are like your postwoman. Btw, I love the name!
Author
Owner

@ac2epsilon commented on GitHub (Jan 4, 2020):

Rather interesting two things: does it technically possible to make "vsce" target in Nuxt AND does it possible to mix contexts of vsc electron and separate vue pwa? I m happy to learn new, do if you can - I cross fingers for yous success

<!-- gh-comment-id:570822202 --> @ac2epsilon commented on GitHub (Jan 4, 2020): Rather interesting two things: does it technically possible to make "vsce" target in Nuxt AND does it possible to mix contexts of vsc electron and separate vue pwa? I m happy to learn new, do if you can - I cross fingers for yous success
Author
Owner

@RandomFractals commented on GitHub (Jan 5, 2020):

@ac2epsilon you seem to talk a lot about vscode like you know it. have you tried creating an extension for it? I have not seen 1 in your github profile.

As I have mentioned above:

However, keep in mind vscode webviews are your typical node.js web apps and things should work well if they work in a browser.

You just get an option to hook up to vscode explorer, do custom outlines, config settings, fs hooks, etc. that you don't typically get in a browser experience.

So, you can use nuxt and vue as postwoman does for your custom vscode webview extensions & with proper packaging you can hook into vscode fs, settings, configs, etc. & many extensions have done so.

For example, SandDance vscode extension is just a wrapper of their web app: https://github.com/microsoft/SandDance/tree/master/packages/vscode-sanddance It's done in react but same logic should apply for vue web apps...

Also, you don't have to wire into vscode status bar, menus, etc. if you don't want to and many http client extensions don't: https://marketplace.visualstudio.com/search?term=http%20client&target=VSCode&category=All%20categories&sortBy=Relevance

For the best dev UX I would recommend you do tho.

<!-- gh-comment-id:570898779 --> @RandomFractals commented on GitHub (Jan 5, 2020): @ac2epsilon you seem to talk a lot about vscode like you know it. have you tried creating an extension for it? I have not seen 1 in your github profile. As I have mentioned above: > However, keep in mind vscode webviews are your typical node.js web apps and things should work well if they work in a browser. > > You just get an option to hook up to vscode explorer, do custom outlines, config settings, fs hooks, etc. that you don't typically get in a browser experience. So, you can use nuxt and vue as postwoman does for your custom vscode webview extensions & with proper packaging you can hook into vscode fs, settings, configs, etc. & many extensions have done so. For example, SandDance vscode extension is just a wrapper of their web app: https://github.com/microsoft/SandDance/tree/master/packages/vscode-sanddance It's done in react but same logic should apply for vue web apps... Also, you don't have to wire into vscode status bar, menus, etc. if you don't want to and many http client extensions don't: https://marketplace.visualstudio.com/search?term=http%20client&target=VSCode&category=All%20categories&sortBy=Relevance For the best dev UX I would recommend you do tho.
Author
Owner

@liyasthomas commented on GitHub (Apr 2, 2020):

Closing due to inactivity.
VS code extension for PW is not in development road map.

<!-- gh-comment-id:607557925 --> @liyasthomas commented on GitHub (Apr 2, 2020): Closing due to inactivity. VS code extension for PW is not in development road map.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/hoppscotch#113
No description provided.