Create a Feathers UI project in Visual Studio Code

With a few free extensions, Visual Studio Code may be configured as a fully-featured development environment for Feathers UI projects built with Haxe and OpenFL.

Prerequisites

Create a project

  1. From the File menu, choose Open Folder… (On macOS, choose Open…).
  2. Create a new, empty folder for your project somewhere on your computer.
  3. Select the empty folder, and open it.
  4. Go to the View menu and choose Command Palette…. You may also use the Ctrl+Shift+P keyboard shortcut (Command+Shift+P on macOS).
  5. Run the Feathers UI: Create new project command.

This will run the CLI new-project command in Visual Studio Code's terminal. The newly created project will include the following defaults:

Run the project

Visual Studio Code's debugger supports many of OpenFL's target platforms.

  1. In Visual Studio Code's status bar, choose a target platform. For instance, you might choose HTML5/Debug.

  2. From the Debug menu, choose Start Debugging (or use the F5 keyboard shortcut).

  3. For the HTML5/Debug target, the project should launch in the Chrome web browser. For other targets, a different runtime or executable will launch.

    If your project does not launch in a browser, check the Problems panel or the Terminal panel for errors.

Build the project

You can build a project without launching it in a debugger.

  1. In Visual Studio Code's status bar, choose a target platform. For instance, you might choose HTML5/Debug.
  2. From the Terminal menu, choose Run Build Task…. You may also use the Ctrl+Shift+B keyboard shortcut (Command+Shift+B on macOS).
  3. The compiled project output may be found inside the bin folder. For example, the HTML5/Debug target compiles to the bin/html5/bin folder.

Troubleshooting

How to fix some issues that you may encounter.

Error: Lime completion setup failed. Is the lime command available? Try running "lime setup" or changing the "lime.executable" setting.

This error indicates that OpenFL's setup process is not yet complete. Open a terminal and run the following command.

haxelib run openfl setup

Error: Command failed: lime display html5

This error may indicate a problem in your project.xml file. Check for additional error messages after this one that provide more context.

It may also indicate that OpenFL's setup process is not yet complete. Open a terminal and run the following command.

haxelib run openfl setup

Error: Could not find haxelib [library name], does it need to be installed?

This error indicates that one or more of your project's dependencies is not installed. In a terminal, run the haxelib install command with the name of the missing library. For example, run the following command to install Actuate.

haxelib install actuate

You may need to close and re-open your workspace folder after installing a new dependency.

Error: Failed to create project. New project folder is not empty.

This error indicates that the Feathers UI: Create new project command was run in a folder that contains one or more files. If the folder appears empty, it may contain hidden files.

Error: Failed to create new Feathers UI project. Open an empty folder before running this command.

This error indicates that the Feathers UI: Create new project command was run without a workspace folder open in Visual Studio Code. Go to the File menu and choose Open Folder… (or choose Open… on macOS) to open a folder.

Further Reading