webOS Studio - VS Code Extension

webOS OSE provides an extension for Microsoft Visual Studio Code (VS Code), webOS Studio, to help developers easily develop webOS OSE apps/services (web apps, Enact apps, JS services).

Key Features

webOS Studio provides the following key features:

  • Creating apps and services from templates
  • Packaging, installing, launching, and debugging apps and services
  • Running ESLint on Enact apps
  • Assisting the use of webOS-related APIs through content assist and auto-completion
  • Supporting previews of apps (Web and Enact)
  • Managing connected webOS devices
  • Managing images for VirtualBox Emulator
  • Analyzing IPK files
  • Providing Project Wizard for GUI-based project configuration

How to Install

To install the extension, launch VS Code and do the following steps:

  1. Navigate to View > Extensions.
  2. Search for webOS Studio in the search bar
  3. Click the Install button.
Installation steps for webOS Studio

Once the installation is completed, you will see the webos Studio icon in Activity Bar icon in Activity Bar.

How to Use

Click the webos Studio icon in Activity Bar icon to see the user interface of the extension:

Interface of the webOS Studio extension

The extension is designed on the basis of the typical workflow followed in webOS OSE app/service development. See the user guide (VS Code marketplace).


Q. What are the different types of projects that can be created in the extension?

A. Supported types are as follows:



Basic Web App

Creates a sample HTML "hello world" app that has a standard webOS OSE file system.

Hosted Web App

Creates a sample HTML app with an example to show some external page in-app with standard webOS OSE file system.

Web App Info

A dummy web app, which contains only appinfo file to use with any already developed HTML app.

Basic Enact App

Creates an enact Sample app as per selected template.

JS Service

A simple JS service with a service file.

JS Service Info

A dummy service info directory, which is used for reference of standard service information.

Q. What is "Add webOS library", and when is it needed?

A.This feature adds webos-service library to your project. The webos-service library is to call LS2 APIs in the app/service. But we strongly recommend using WebOSServiceBridge API instead of webos-service library.

Q. I have not added any device in the KNOWN DEVICE view, yet I can see the device named emulator.

A. By default, emulator is added in the KNOWN DEVICE view. This emulator is running on the local system. If you an emulator instance is not already set up, go to the EMULATOR MANAGER view and add the emulator instance.

Q. Getting an error while packaging the app, when my folder path contains special characters.

A. Workspace path and name should not contain any escape or special characters, it can trigger errors on add, package, install operations.

Q. How to resolve errors in Notification Area?

A. A list of the errors:



ERROR! Failed to get the device list.

Some dependent packages are not available on the local system.

To resolve this issue, install the packages either manually or by clicking Yes when prompted (if you previously closed the prompt without installing, click the refresh button in the KNOWN DEVICE view to get prompted again).

ERROR! Failed to list the applications installed on <device>

The device is not running.

ERROR! Failed to list the applications running on <device>

The device is not running.

ERROR! Please check IP address or port of <device>

The device is not reachable.

ERROR! Unable to find the Virtual Box

Update the environment path variable to point to the VirtualBox installation directory.

ERROR! Packaging App Failed. Details As follows: <errMsg>

Failed to package the app due to one of the following:

  • Check the ID format. Only lowercase letters(a-z), digits(0-9), minus signs, and periods are allowed.
  • Check the version format. It should be something like 1.0.0.
  • Only a valid app can be packaged. Make sure the directory includes 'appinfo.json'.
  • Some dependent resources (such as images, libraries, and modules) that are required for the project are missing. Add manually or through the npm command.