Video: Create a Feathers UI project in Visual Studio Code


Full text

We're going to create our first Feathers UI project in Visual Studio Code.

First, let's set up the extensions that we need.

Switch to the Extensions view. Then, search for Feathers UI in the Marketplace.

Let's install the Feathers UI Extension Pack.

This pack installs the Haxe programming language extension, the Lime extension for OpenFL projects, and (of course) the Feathers UI extension.

Just click the Install button to get all three in one single step. If you prefer, you can choose to install each of these extensions individually.

Now, we're ready to create a project.

Go to the File menu, and choose Open Folder… (on macOS, choose Open…).

Create a new, empty folder with the name of your project somewhere on your computer. Let's call it HelloWorld. We'll open this folder as the root of our Visual Studio Code workspace.

Next, go to the View menu, and choose Command Palette….

Then, search for the Feathers UI: Create new project command. Make sure that the command is selected in results the list, and then run it by pressing Enter.

This will open a terminal and run the new-project command using the Feathers UI command line interface.

Let close that and look at the Explorer view where we can see the new project's files. These include:

To debug the project, start by setting the OpenFL target platform in the status bar. Let's choose HTML5/Debug.

Switch to the Run and debug view, and click the button with the ▶ play icon to compile and launch the project.

For the HTML5 target, this will launch the Google Chrome web browser. There it is!

Back in Visual Studio Code, let's build the project only, without launching it.

From the Terminal menu, choose Run Build Task…. This will open a terminal and compile your project.

We can find the compiled output in the build folder, under the name of the active OpenFL target platform. Here's the HTML5 target's output.

Awesome! Visual Studio Code is all set up for Feathers UI development.