Microsoft MakeCode extension for vscode.devThis repo contains a vscode web extension for creating and editing MakeCode Projects. Using the extensionCreate a new project
Import a share link
Run your project in the simulatorTo run your project in the simulator, run the "MakeCode: Simulate project" command. This will also start a file watcher that will automatically reload the simulator whenever you change a file. To use your keyboard to control the simulator, make sure you have the simulator pane focused. Viewing the simulator consoleAll serial messages and exceptions from the simulator are printed in vscode's output view pane.
Managing your project assets (images, tilemaps, animations, etc.)The asset explorer can be accessed by clicking the MakeCode logo located in vscode's "Action Bar". Inside the explorer, there are collapsible sections for each type of project asset.
Creating an assetTo create a new asset, hit the "Create File" icon next to the asset type in the asset explorer. Editing assetsTo edit an existing asset, click on its name in the asset explorer. To duplicate or delete the asset, click on the icons that appear next to its name when you hover over it. To rename the asset, change its name in the text input that appears in the bottom of the asset editor. If you don't see the text input, you may need to increase the width of the pane that the asset editor is in (this is a known bug). Referencing your assets inside your codeTo reference an asset you've created inside your code, use one of the tagged templates that MakeCode defines:
Adding a dependency to your projectTo add a MakeCode extension to your project, add an entry in the dependency map inside your project's For example, to add the character-animations extension the entry should look like this:
After you save Local development of pxt-vscode-webPrerequisites:
After you clone the repo, install the dependencies with yarn:
Running the extension locallyTo run and debug the extension locally, open the extension in vscode and press F5. To debug the webviews in the extension host, run ctrl+shift+i to open the dev tools. Running the extension in the browserTo run the extension in the browser, run:
Creating a vsix fileTo create a vsix file, first install vsce:
Then use vsce to package the vsix
ContributingThis project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA. This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments. TrademarksThis project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies. |