Microsoft MakeCode

Extension Authoring and VS Code

So far, when I’ve created extensions for MakeCode,[1] I’ve coded the directly in the Monaco editor that is built into MakeCode / PXT. That’s certainly worked for me - surprisingly well, I’ll admit. Sometimes, though, the Monaco editor can be a little limiting. In those cases, I’d like to switch to something a little bit more powerful.

Based on what I see in the GitHub repos, it looks like primary development for PXT is done in Visual Studio Code. I’m comfortable working with local copies of PXT and running the server locally, but I’m curious as to how you use VS Code in tandem with those local copies of PXT to author extensions.

So, for those of you who use VS Code to author extensions: What is your routine when you’re developing an extension?

Thanks as always!


[1] While all of my extensions have been for MakeCode Arcade, I imagine this could be done with any of the PXT-based products.

2 Likes

I typically do all of my development in the monaco editor. The workflow is better in other MakeCode targets (Adafruit and micro:bit specifically), because those editors work with the pxt CLI but we don’t have a great story yet for Arcade. This is something we’re hoping to improve in the future.

1 Like

Sadly I just copied code to VS Code, and run the formatting routine there. Both MakeCode and VS Code are very limiting in what they can do.

MakeCode: basically useless in code style. Debug output rarely useful in case of crashes. Tests fail to run. (I have some test cases that crashes MakeCode but has no problem in production.)

VS Code: with no PXT support, VS Code is just an editor with code formatting facilities. Need to become familiar with all the false lint reports of syntax errors. (Unless we get a good setup, which is not worth the effort to build.)

BTW, the routine:
(1) code in PXT and test it
(2) format code in VS Code
(3) update pxt.json
(4) commit and add tag (e.g. “v1.0.0”)

@lwchkg to get rid of the error squigglies in vscode, the best way is to clone this repository:

I’d recommend cloning that next to the project you’re working on, so you’re file directory looks something like this:

pxt-common-packages/
my-arcade-project/

Then edit the tsconfig.json in the arcade project to add all of the code in pxt-common-packages. It should look something like this:

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": true,
        "outDir": "built",
        "rootDir": "."
    },
    "include": [
        "./*.ts",
        "../pxt-common-packages/libs/*/*.ts"
    ]
}

That should get rid of most of the linting errors.