Skip to main content
Skip table of contents

Developing Modules with VS Code

If the Dart-IDE is a challenging development environment due to unfamiliarity, you can develop the module using VS Code.

The following is a guide on how to edit and build projects created in Dart-IDE using Visual Studio Code (VS Code).

  • Dart-IDE VS Code Extension

  • There are numerous free IDEs available, with one of the most widely used options being Visual Studio Code, commonly referred to as VS Code. It is a source-code editor developed by Microsoft.

image-20240104-075010.png

Note

  • Doosan Robotics does not guarantee official support for external IDEs.

  • This guide does not provide following instructions.

    • how to install VS Code.

    • how to install Node.js or handle npm.

    • How to code a Module.

Guides for using VS Code

  • Step 1. Create New Project in Dart-IDE.

    • 1. Access to https://ide.drdart.io/

    • 2. Select the Blank Preset(Default) and Click the Next button.

    • 3. Fill out the Information of the project and Click the Finish button.

image-20240104-070324.png
image-20240104-070637.png
image-20240104-070648.png

  • Step 2. Open the Dart-IDE Project folder in VS Code.

image-20240104-072613.png

  • Step 3. Install the Doosan Dart-IDE and React Extension in VS Code Extension.

    • 1. Select Extension menu in the left bar in VS Code.

    • 2. Search the word Doosan Dart-IDE and React.

    • 3. Install extensions.

image-20240104-073144.png
image-20240828-065212.png

  • Step 4. Develop module projects in VS Code.

image-20240104-073604.png

Info.

  • If you want to check the UI Preview in Dart-IDE, click the FileRefresh button or re-open the file to update changes. No need to refresh for build only.

image-20240104-081155.png

  • Step5. Build or Run in Dart-IDE extension.

    • 1. Click the Install and Update Library button for library(npm package) installation.

    • 2. Click the Check library available in Dart-Platform button for checking library whitelist.

    • 3. Click the Build Project button or the Build&Run Project button for building the project.

external_build_plugin.png

The descriptions of each functions are as follows:

  • Build

    • Build Project: Build the project to generate a module(*.dm) file.

      • Dart-Services should be running.

    • Build & Run Project: Build and run with the module installation at the Dart-Platform.

    • Stop Build: Stop the build.

  • Check Library

    • Install and Update Library: Install and update your library(npm package).

      CODE
      [project directory/package directory] npm install

      Additionally, when adding a new library in the package.json, the following popup will appear, allowing you to install and update the library automatically.

      image-20240902-020715.png
    • Check library available in Dart-Platform: Verify if there are libraries added to your package that are not registered in the our whitelist("devDependencies" property in the package.json).

  • Build Option

    • Enable syntax check when build

    • Select dm save path: Specify the save path for the module (*.dm) file.

You can build or run in Dart-IDE website either.

Tips for VS Code

The following are tips for Dart-IDE based on version 2.2.0.

  • Tip. The connection status can be verified in the status bar at the bottom of the VS Code.

image-20240902-000510.png

  • Tip. Do not make any changes to the .dart-ide file within the project folder.

    • If this file gets corrupted, the project may not open in Dart-IDE.

  • Tip. When importing the dart-api, use the format import {} from 'dart-api'.

    • When using VS Code, the import path is automatically generated as import {} from '../libs/dart-api'. In such cases, Dart-IDE may encounter an error in reading the library.

CODE
//No error at UI Preview and can build in Dart-IDE.
import { BaseModule, ModuleScreen, ModuleScreenProps, System, ModuleContext } from 'dart-api';

//Error at UI Preview and cannot build in Dart-IDE.
import { BaseModule, ModuleScreen, ModuleScreenProps, System, ModuleContext } from '../libs/dart-api';

  • Tip. When adding packages to package.json, please note the following constraints:

    • Only packages whitelisted by Doosan Robotics can be added to package.json.

    • If the node_modules folder is included in the project directory, Dart-IDE website will fail to build. Please remove node_modules when building with Dart-IDE website.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.