• Download and install Visual Studio Code

• Install the AS3 & MXML extension for VSCode by Bowler Hat LLC. (Searching within VSCode is the easiest way to do this.)

• Open a folder in VSCode to use as your project's workspace

• Select Apache Royale SDK for workspace

• Set up project: (Note: Yeoman can be used to automate this step.) The linked project is no longer active and was created for FlexJS. It should be easy to make it compatible with Royale.

  project
  |
  + -- src
  |    |
  |    \ -- HelloRoyale.mxml
  |
  + -- asconfig.json
  

  • in 'asconfig.json':

    {
        "compilerOptions": {
            "source-map": true,
            "targets": [
                "JSRoyale"
            ]
        },
        "files": [
            "src/HelloRoyale.mxml"
        ]
    }

  • in 'src/HelloRoyale.mxml'

    <?xml version="1.0" encoding="utf-8"?>
    <js:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:js="library://ns.apache.org/royale/express">
    	<js:initialView>
    		<js:View>
    			<js:Label text="Hello World" x="100" y="100"/>
    		</js:View>
    	</js:initialView>
    </js:Application>

• Select Tasks > Run Build Task... to build. Or use the Ctrl+Shift+B keyboard shortcut (Command+Shift+B on macOS).

• Open bin/js-debug/index.html or bin/js-release/index.html in your browser and you should see "Hello World".

For instructions on more integrated debugging, please refer to the extension documentation for Chrome, Firefox or Node JS.