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, ...