Skip to end of metadata
Go to start of metadata
This is a getting started guide for developing with Dart language in WebStorm.

Dart built-in support in WebStorm includes:

  • Coding assistance (syntax highlighting for Dart code, completion, code validation and quick-fix options)
  • Refactoring
  • Powerful code navigation
  • Package management
  • Running and Debugging Dart web apps
  • Running Dart command line apps
  • Unit testing for Dart apps
  • Quick Dart code compilation to JavaScript

In this tutorial

Configuring SDK

To start using Dart in WebStorm you need to specify the path to Dart SDK.

Go to Settings | Dart, and then edit the path to the SDK location on your computer. You can download the latest Dart SDK from dartlang.org.
You can specify the Usage scope for Dart SDK. By default it is used for the whole project, but you can limit the scope to certain directories if appropriate:

Customizing Code Formatting and Code Style

In Settings | Code Style | Dart, you can configure formatting for Dart code, for example, indents, spaces before and after operators and arguments, and more.
In Settings | Editor | Colors & Fonts | Dart, you can create a custom theme for Dart files by selecting fonts and colors for code elements:

Package management

You can install or update the packages required for the project from pub (pub.dartlang.org) right from the context menu of your project’s pubspec.yaml file:

Debugging Dart web apps

Dart code can be executed only in Dartium browser. Make sure that Dartium with JetBrains IDE Support extension is installed on your computer.

Select Debug file from the context menu of your html file which reference to the Dart file you want to debug. WebStorm will automatically detect the Dart project and start the debugging session with Dartium:

You can debug your Dart code the same as JavaScript code: put breakpoints, check variables, and execute your code step-by-step:

Open in Dartium

To preview your project in Dartium, select Open in Dartium from the context menu of your html file with the reference to your Dart files. The browser will start and the page will open.

Compile Dart to JavaScript

You need to Compile Dart code to JavaScript to run your project in all browsers. This action is available in the context menu for any Dart file.

In the dialog window, edit the name and the location for the output JavaScript file.
Check Minify to get a minified js file and a source map as the output:

Edit the reference in the html to the JavaScript file. Edit or create a new Run/Debug configuration in the toolbar to debug your project in Chrome or Firefox now:

Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.