onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
3.73k stars 228 forks source link

[bug] Should detect when vscode or cursor is not installed #318

Open Kitenite opened 2 months ago

Kitenite commented 2 months ago

Describe the bug

Nothing happens when viewing in code without vscode or cursor installed. We should detect and warn the user when this happens. Maybe a toast?

leikoilja commented 2 months ago

same to me. on the other note, is that a requirement that VScode is used? what if i m using a different editor (nvim), does that mean onlook cannot modify source files?

leikoilja commented 2 months ago

is there are any specific steps on how to link VSCode to Onlook? turns out i had VS code on my mac (silicone), but onlook probably does not discover it. clicking "open in VSCode" does nothing (even if i have vscode window open). and any change i do via onlook UI are not "discovered":

image
Kitenite commented 2 months ago

@leikoilja can you confirm that onlook is set up with you project? If it is, you should see the top right corner of the frame be checked. If not, you can set up your project by running npx onlook setup in the project root. More information here.

Set up correctly:

Screenshot 2024-09-13 at 1 31 25 PM

Not set up:

Screenshot 2024-09-13 at 1 32 10 PM

Write to code will still work regardless of your IDE. Please let me know if this helps :)

leikoilja commented 2 months ago

thanks @Kitenite for the reply, it indeed has failed to automatically hook into my nextjs project. running npx onlook setup has placed the config into an incorrect place: image after manually fixing it - it works now 🥳 thanks

Kitenite commented 2 months ago

@leikoilja , oh I see. We need to be better about finding the config object. Also, I noticed you have Onlook plugin added twice on lines 12-16.

Opened a ticket for this bug. Thank you! https://github.com/onlook-dev/onlook/issues/356