Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›Create a new project in…

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Command line terminal
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Android
    • iOS
    • Linux
    • macOS
    • Windows
    • Web
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • Alert
  • Application
  • AssetLoader
  • Button
  • Callout
  • Check
  • ComboBox
  • HDividedBox / VDividedBox
  • Drawer
  • Form
  • GridView
  • GroupListView
  • Header
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • haxedef options
  • Install Prerelease Builds
Edit

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

  • Install Feathers UI from Haxelib
  • Install the Feathers UI Extension Pack for Visual Studio Code

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:

  • A standard OpenFL project.xml file
  • A src folder for Haxe source files
  • A default icon
  • A build task for compiling the project
  • A launch configuration for debugging

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

  • Visual Studio Code documentation
  • OpenFL/Lime project.xml format
Last updated on 11/5/2020
← Moonshine IDEAndroid →
  • Prerequisites
  • Create a project
  • Run the project
  • Build the project
  • Troubleshooting
    • Error: Lime completion setup failed. Is the lime command available? Try running "lime setup" or changing the "lime.executable" setting.
    • Error: Command failed: lime display html5
    • Error: Could not find haxelib [library name], does it need to be installed?
    • Error: Failed to create project. New project folder is not empty.
    • Error: Failed to create new Feathers UI project. Open an empty folder before running this command.
  • Further Reading
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Join Github Sponsors
  • Make a Donation
Haxe / OpenFL
  • Documentation
  • API Reference
  • Samples
  • GitHub
  • Issue Tracker
ActionScript / Starling
  • Documentation
  • API Reference
  • Samples
  • GitHub
  • Issue Tracker
Feathers SDK (Starling)
  • Documentation
  • GitHub
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Copyright © 2021 Bowler Hat LLC — Illustrations by unDraw.