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.

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.

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

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

    • Dart-IDE VS Code Extension

  • 3. Install extensions.

• Step 4. Develop module projects in VS Code.

Info.

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

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

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.

    • Dart-Service should be running

    • Dart-Platform should be running and connecting with Dart-IDE(VS Code). For more information, please refer to Run a Module | Connect-Dart-IDE-to-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.

    

  • 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).

    • See more: Whitelist usage guide

      

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

• In case of using Build

  • Build a Module | Build-and-Install-a-Module

• In case of using Run

  • Run a Module | Run-your-Module

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.

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

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

    • Whitelist usage guide

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