VS Code Extension - webOS Studio

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
• Project Wizard

How to Install

To install the extension, open VS Code and do the following:

1. Navigate to View > Extensions.
2. Search for webOS Studio in the search bar and click the Install button. Once the installation is completed, you will see the icon in Activity Bar.
3. Click the icon to see the user interface of the extension:

How to Use

The extension is designed on the basis of the typical workflow followed in webOS OSE app/service development. See the documentation in the marketplace.

FAQs

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

A. Supported types are as follows:

Type	Description
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	Description
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.