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 Prettier - Code formatter from Prettier
For Chrome Debugging, Install Debugger for Chrome from Microsoft
For Firefox Debugging, Install Debugger for Firefox from Firefox DevTools

Adding the custom code style formatter

We have designed our code style formatter for Java for other code we use the prettier formatter

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

Open you settings.xml file (if you don't have one create one in .vscode/settings.json
Paste the following snippet into the settings.xml file to select prettier as you default formatter for ts, js and html (leave the first and last curly braces if your file is not empty)

{
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

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)

Start the compiler in watch mode with source maps npm run build:sourceMap or npm run watch:sourceMap
Click on the Run and Debug tab and select in the dropdown Debug Chrome
Navigate to OpenRobertaWeb/src and set breakpoints in your desired files.
Chrome will stop at the the breakpoints whenever they are reached and you can use vs-code to continue, step into, ...