statelyai / xstate-tools

Public monorepo for XState tooling
183 stars 37 forks source link

Add quickstart section to vscode docs #103

Open violabg opened 2 years ago

violabg commented 2 years ago

I do you open the visual editor from vscode?

davidlav commented 2 years ago

I was also very frustrated that the documentation doesn't even address how to open the extension because it's not obvious at all.

The way I found it was by click on the "Feature Contributions" tab within the Extensions page of VS Code

image

where I saw four commands. To run them, open the Command Pallet (View > Command Pallet) and type "xstate" and you'll see the four of them appear.

Note that the "Open Inspector" command confusingly opens the older "XState Visualizer" while "Open Visual Editor" opens the "XState Editor" (it would be nice if those namings were consistent) which will likely modify your code when you open it without any sort of prompt, so make sure you've saved your work before doing so.

And if you try either of the above commands and get a "Could not find a machine at the current cursor." error, make sure your text cursor in your editor is actually placed in a machine definition object and then try running it again.

Hope this helps.

violabg commented 2 years ago

thanks, it worked, it should be highlighted on the docs.

davidlav commented 2 years ago

it should be highlighted on the docs.

I'd open the issue back up until it is.

mattpocock commented 2 years ago

Interesting! I think it's more obvious when you have code lens enabled. I'll keep this issue open to add a quickstart section to the docs.

davidlav commented 2 years ago

@mattpocock Just to give you some user context, Webstorm is my daily driver and I only pull out VS Code for specific situations, like using this extension (which is fantastic btw, don't mean for this to come off as critical). But this is the first I've ever heard of code lens, and I just had to Google how to turn it on (apparently it was off in my installation).

All this is just to say that I wouldn't assume that your users necessarily have code lens enabled and, even if they did, would know exactly where to look to find the commands to open the editor and inspector. I wouldn't take any of that for granted when writing your docs. Thanks again!

mattpocock commented 2 years ago

Absolutely! We need a quickstart for sure.

mattpocock commented 2 years ago

Fixed by #113