Skip to main content
Version: Next

ADE in Visual Studio Code

The ADE is build to work seamlessly with VSCode. Therefore we guide you to create VSCode Workspace Settings.

  1. Create a <project>/.vscode folder with mkdir .vscode

Configure the askui-shell​

  1. Create the <project>/.vscode/settings.json with the following content:
{
    "livePreview.customExternalBrowser": "Default",
    "terminal.integrated.profiles.windows":{   
        "askui-shell": {    
            "path": ["${env:ASKUI_INSTALLATION_DIRECTORY}\\Tools\\askui-shell.cmd"],
            "icon": "robot",
            "overrideName": true,
            "color": "terminal.ansiMagenta",
        }
    },
    "terminal.integrated.defaultProfile.windows": "askui-shell"
}
  • terminal.integrated.profiles.windows: Configures the askui-shell
  • terminal.integrated.defaultProfile.windows: Sets the askui-shell as default

Then the askui-shell is configured as the default terminal like this:

askui logo

Configure Jest Runner, ESLint & Live View​

Add the recommended extensions for VSCode by adding <project>/.vscode/extensions.json with following content:

{
    "recommendations": ["ms-vscode.live-server", "firsttris.vscode-jest-runner", "dbaeumer.vscode-eslint"]
}
  • ms-vscode.live-server: HTML Live Viewer for viewing annotations inside VSCode instead of, for example, having to jump out of VSCode and open it in a web browser.
  • firsttris.vscode-jest-runner: Jest Runner to start single test out of the IDE.
  • dbaeumer.vscode-eslint: ESLint plugin to show missing exec().

Then you can install the extension by clicking on Install under:

askui logo

Use Jest Runner​

You can start a workflow by clicking on Run inside a *test.ts-file:

askui logo

Use ESLint​

ESLint Plugin is showing you if you forgot an exec():

askui logo

Use Live Viewer​

The Live Viewer can show you the annotation without leaving VSCode:

askui logo