WebStorm 2016.3 Help

Preparing for Dart Development

On this page:

Before you start

Make sure the Dart plugin is enabled. The plugin is bundled with WebStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.

Downloading the Dart tools

To have all the tools for developing both server-side and client-side applications, download the Dart SDK and the Dartium browser in which you can run Dart code without previously transpiling it into JavaScript. The Dart SDK incorporates the Dart Virtual Machine, the Dart Libraries, and all the background command line tools, the most important of them being the dart2js transpiler and the Dart-specific pub package manager.

Learn more about Dart development tools at the Dart Download Page.

Configuring Dart support in a project

To develop a Dart application you need to tell WebStorm where the Dart SDK and the Dartium executable file are located. If you are using the Dart project template, WebStorm will ask you to specify these settings during the project creation. Alternatively you can specify these paths at any time later on the Dart page of the Settings dialog box.

These settings are specific for each project. This means that you can have several Dart SDKs and Dartium installations in WebStorm and switch between them from one project to another.

Next, you need a project with Dart-specific structure. If you are using the Dart project template, WebStorm establishes the required folder structure for you automatically. Alternatively, you can add and arrange the necessary folders manually.

Creating a Dart application stub

During project creation, WebStorm can generate a stub for developing Dart applications. The project structure is set up and some sources are generated based on the external Dart templates downloaded upon your request.

  1. In the left-hand pane, choose Dart.
  2. In the right-hand pane:
    1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
    2. Specify the paths to the Dart SDK and to the Dartium executable file. WebStorm detects and displays the Dart version. If the SDK was downloaded within the Dart Editor Bundle, the path to Dartium is also detected and filled in automatically.
    3. To have annotations verified and assertions checked, select the Start Dartium in checked mode check box. Learn more about Dartium command line flags at https://www.dartlang.org/tools/dartium/.
    Click Create when ready.

If necessary, you can open the Dart page of the Settings dialog box by clicking the Settings button and configure command-line options and a custom user data directory for Dartium.

Configuring Dart support in an existing project

Besides creating a Dart project from the very beginning, you can configure Dart support in a project at any stage of its development.

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X, and click Dart under Languages & Frameworks.
  2. Select the Enable Dart support in project <project name> check box whereupon all the fields below become available.
  3. In the Dart SDK Path text box, specify the location of the downloaded Dart SDK. Type the path manually or click the Browse button browseButton.png and choose the path in the dialog box that opens.

    If WebStorm recognizes the Dart SDK correctly, it displays the revision number of the detected SDK in the Version read-only field.

  4. In the Dartium Path text box, specify the location of the Dartium executable file. In the Dartium browser, you can run Dart code without previously transpiling it into JavaScript. Type the path manually or click the Browse button browseButton.png and choose the path in the dialog box that opens. If the SDK was downloaded within the Dart Editor Bundle, the path to Dartium is also detected and filled in automatically. Learn more about Dart development tools at the Dart Download Page.
  5. To have annotations verified and assertions checked, select the Start Dartium in checked mode check box. Learn more about Dartium command line flags at https://www.dartlang.org/tools/dartium/.

Developing several Dart projects (packages) within one WebStorm project

If your application consists of several Dart projects (packages), you can develop all of them within one single WebStorm project. To attach a Dart project (package) to an existing WebStorm project you need to add its root folder as a content root.

To add a Dart project (package) to an existing WebStorm project:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X, and click Directories under Project: <project name>.
  2. In the right-hand pane which shows a list of already existing content roots, click Add Content Root. Then in the dialog box that opens, choose the root folder of the Dart project (package) to be attached.

See Also

Last modified: 22 March 2017