VS code integration

[HRajoliN]

🚀 Feature Request

📝 Description

As a beginner, I need and prefer to work with ResponsivelyApp instead of other available stuff like Sizzy, but I can not integrate it with VSCode.

✨ Describe the solution you'd like

✍️ Describe alternatives you've considered

[open-collective-bot[bot]]

Hey @HRajoliN :wave:,

Thank you for opening an issue. We will get back to you as soon as we can. Have you seen our Open Collective page? Please consider contributing financially to our project. This will help us involve more contributors and get to issues like yours faster.

https://opencollective.com/responsively

We offer priority support for all financial contributors. Don't forget to add priority label once you become one! :smile:

[jjavierdguezas]

what do you mean by "integrate it with VSCode" ? could you please elaborate?

[HRajoliN]

Thank you for your reply, I mean how can I see the effect of new codes in the ResponsivelyApp and use its Hot-Reloading feature when I change my code in VSCode.

[jjavierdguezas]

I understand you Right now if you are working with static html files you can open them in responsively and edit them with VSCode, every time you save in vscode it will be reloaded in responsively If you are working with some kind of frontend framework like react, you probably start a server for development, just use that server url in responsively and that should do it Is there another scenario that I am missing? Do you have a specific and relevant set of actions/features for integrate responsively with VSCode to think about creating an extension? All ideas are welcome!

[HRajoliN]

I understand you Right now if you are working with static html files you can open them in responsively and edit them with VSCode, every time you save in vscode it will be reloaded in responsively If you are working with some kind of frontend framework like react, you probably start a server for development, just use that server url in responsively and that should do it Is there another scenario that I am missing? Do you have a specific and relevant set of actions/features for integrate responsively with VSCode to think about creating an extension? All ideas are welcome!

In fact, it does not show a live update to changing the codes and I should refresh the Responsively browser. I have tried to define it as my browser in the Live-Server extension of VSCode but unfortunately, whenever I run the server I get this error " Windows cannot find ' directory of ResponsivelyApp in windows '. Make sure you typed the name correctly, and then try again. " Although, I did the instruction of Live-Server step by step to define new browser (ResponsivelyApp instead of Chrome) it didn't work.

[ertoorule]

what about integrate to monaco editor inside of app! its posible? or not? guess extra 10mb app size!

[jjavierdguezas]

I understand you Right now if you are working with static html files you can open them in responsively and edit them with VSCode, every time you save in vscode it will be reloaded in responsively If you are working with some kind of frontend framework like react, you probably start a server for development, just use that server url in responsively and that should do it Is there another scenario that I am missing? Do you have a specific and relevant set of actions/features for integrate responsively with VSCode to think about creating an extension? All ideas are welcome!

In fact, it does not show a live update to changing the codes and I should refresh the Responsively browser. I have tried to define it as my browser in the Live-Server extension of VSCode but unfortunately, whenever I run the server I get this error " Windows cannot find ' directory of ResponsivelyApp in windows '. Make sure you typed the name correctly, and then try again. " Although, I did the instruction of Live-Server step by step to define new browser (ResponsivelyApp instead of Chrome) it didn't work.

I just tested it and it seems to work

Opening a file in responsively and using hot reload:

Using live server

Could you please check it again?, Do you have a specific scenario that we have not taken into account?

If you need more help I am glad to guide you, please reach me on slack if you want

[jjavierdguezas]

what about integrate to monaco editor inside of app! its posible? or not? guess extra 10mb app size!

this could be interesting, maybe we need to discuss it. If we are going to consider it we need to be very specific with the scope, because we are not going to implement vscode within responsively

what do you think @manojVivek ?

[jjavierdguezas]

I have tried to define it as my browser in the Live-Server extension of VSCode but unfortunately, whenever I run the server I get this error " Windows cannot find ' directory of ResponsivelyApp in windows '. Make sure you typed the name correctly, and then try again. " Although, I did the instruction of Live-Server step by step to define new browser (ResponsivelyApp instead of Chrome) it didn't work.

About this, just remember that responsively is not a browser, so maybe it won't work where a regular browser will. Anyway we are working on improving the execution of responsively via CLI, so perhaps after #605 several scenarios will start to work where the url to open is passed as the first argument. When that works make sure to use the full path where Responsively is installed (should be %LOCALAPPDATA%\Programs\Responsively-App\ResponsivelyApp.exe) as the name of the browser, or have that folder in the Windows environment variable PATH and use ResponsivelyApp as browser name and it should work.

[manojVivek]

this could be interesting, maybe we need to discuss it. If we are going to consider it we need to be very specific with the scope, because we are not going to implement vscode within responsively

what do you think @manojVivek ?

I think this will be an overkill for what Responsively is trying to solve. Going the editor route is not going to end unless Responsively becomes an IDE 😄. The current Live CSS Editor is one step in that direction, but the screen real-estate just doesn't allow it naturally, IMHO.