Importing into Visual Studio Code

Visual Studio Code can be downloaded for free from here.

Setup extensions

• Go to the Extension tab
• Install Java Extension Pack from Microsoft
• Install tsfmt - TypeScript Formatter from eternalphane
• For Chrome Debugging, Install Debugger for Chrome from Microsoft

Adding the custom code style formatter

We have designed our code style formatter for Java, Javascript and Typescript code.

Java

• Go to File | Preferences | Settings search formatter
• You should find Java > Format > Settings: Url
• Paste Resources/formatter/openRobertaJava.xml to use our eclipse code formatter.

Javascript and Typescript

• Select tsfmt as default formatter

Importing into Visual Studio Code

• Navigate to File | Open Folder and select the openroberta-lab repository you previosly cloned.
• Click on Run and Debug and click on create a launch.json file
• Paste the following

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Launch ServerStarter",
            "request": "launch",
            "mainClass": "de.fhg.iais.roberta.main.ServerStarter",
            "args": "-d server.admin.dir=./Resources -d server.staticresources.dir=./OpenRobertaServer/staticResources -d robot.crosscompiler.resourcebase=../ora-cc-rsc"

        },
        {
            "name": "Launch Chrome Debugger",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:1999/index.html",
            "webRoot": "${workspaceFolder}/OpenRobertaServer/staticResources",
        }
    ]
}

Debugging the openroberta-lab (front-end)

Just javascript

• Simply click on the Run and Debug tab and select in the dropdown Debug Chrome
• Navigate to OpenRoberta/staticResources/js/ and set breakpoints in your desired file.
• Chrome will stop at the the breakpoints whenever they are reached and you can use vs-code to continue, step into, ...

Also typescript

• Do the same as before, just make sure to run npx tsc --watch --sourceMap or npx tsc --sourceMap in TypescriptSources folder
• Now you can set breakpoints in typescript-files and debug there, too