Development "Getting Started" Guide

[antoinne85]

First, off, what a fantastic piece of software. Getting a ton of use out of the VSCode plugin.

However, I'd like to get more familiar with the code and there are some tweaks I'd like to try out. I've pulled the source, built and run (as described in dev.md). 👍 But I'm struggling to figure out what steps I need to take to actually get started developing on the project.

I was kind of expecting that once I had the source, I'd run some launch configuration that cracked open the VSCode extension development host, make tweaks and debug, but there seems to be more to it than that.

If someone could give me some guidance on how to take my first steps, I'd be happy to get them written up neatly and contribute them back for future contributors.

[danmarshall]

Hi Tony, thanks for the appreciation 👍 .
First, you'll want to do a full build: npm run build.
To run/debug the extension, open the packages/vscode-sanddance folder in VsCode. From there you should be able to F5.

[antoinne85]

Hey, @danmarshall, thanks for the quick response!

I did as you suggested, and that definitely works. I think there's one other hurdle I have to jump before I'm off to the races.

It seems like packages/vscode-sanddance is referencing the build output of npm run build when debugging, and so I'm limited to debugging only the parts of the extension that are specific to VSCode (without the ability to step into all the code that actually does all the magic).

I suspect it's because I came at this from the wrong direction and that when developing on the project your team uses a different approach, perhaps launching a different project and going from there.

Maybe I should, instead, ask this question:
If I wanted to get my feet wet with something small just to get oriented, like tweaking the maximum bin size from 20 to 21, which project should I launch so that I can hit a breakpoint in code that controls things like that?

My apologies if this should be obvious, I've not really worked on a project that's structured in quite the same way before.

[danmarshall]

No apology necessary Tony. This is a monorepo, which has multiple interdependent packages. We use a tool called Lerna to help manage simultaneous development of separate packages. You might notice each subfolder under packages has its own package.json file. Lerna links these together on your local machine so you can treat other packages as if they had been published to npm.

I currently don't have VsCode set up for breakpoint debugging in the browser. Just because in my experience with other projects I have seen sourcemaps get out of sync. I also expect sourcemaps to be challenging in this project, given that each subproject goes though its own build pipeline. Bottom line, I debug in the browser. But I'd also be happy to help to try and get it to work with VsCode's debugger.

Start with npm start. This will watch for TypeScript changes and automatically recompile. You will need to manually refresh your browser to see changes.