IntelliJ IDEA 2017.3 Help

Dart

IntelliJ IDEA supports developing, running, and debugging Dart web and command-line applications providing code completion, error and syntax highlighting, code inspections and quick-fixes, search and navigation, refactoring, and much more. IntelliJ IDEA also integrates with the pub tool and the Dart Analysis Server.

Downloading the Dart tools

  1. Download and install the Dart SDK.
    The Dart SDK incorporates the Dart Virtual Machine, the Dart Libraries, as well as all the command line tools, including compilers (dart2js and dartdevc) and the pub tool.
  2. For web development, optionally download the Dartium browser.
    This browser provides native Dart support so you can run and debug Dart code without previously compiling it into JavaScript.

Learn more about the Dart development tools from Dart Official website.

Creating a new Dart application

If you have no application yet, you can generate a IntelliJ IDEA project with Dart-specific structure from a Stagehand template. Alternatively, create an empty IntelliJ IDEA project and configure Dart support in it as described in Starting with an existing Dart application below.

To create a Dart project from a Stagehand template

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Dart in the left-hand pane.
  3. In the right-hand pane, specify the paths to the Dart SDK and optionally to the Dartium executable file (Windows and Linux)/Dartium application (macOS). IntelliJ IDEA detects and displays the Dart version.

    To have a sample application created in the project, select the Generate sample content checkbox and choose the relevant Stagehand template from the list below. If you clear the checkbox, IntelliJ IDEA creates and empty project.

    Click Next.
  4. On the second page of the wizard, specify the project name and the path to the folder where the project-related files will be stored. When you click Finish, IntelliJ IDEA sets up the project structure and generates some sources based on the selected Stagehand template.

To create an empty IntelliJ IDEA project

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, again choose Static Web and click Next.
  4. On the second page of the wizard, specify the project folder and name and click Finish.

Starting with an existing Dart application

If you are going to continue developing an existing Dart application, open it in IntelliJ IDEA, configure Dart in it, and download the required dependencies as described in Managing Dart dependencies below.

If the application sources are already on your machine
Click Open on the Welcome screen or choose File | Open on the main menu. In the dialog that opens, select the folder where your sources are stored.

If the application sources are under version control

  1. Click Check out from Version Control on the Welcome screen or choose VCS | Check out from Version Control on the main menu.
  2. Select your version control system from the list.
  3. In the VCS-specific dialog that opens, type your credentials and the repository to check out the application sources from.

To configure Dart support in an existing project

  1. In Settings/Preferences dialog (Ctrl+Alt+S), choose Dart under Languages and Frameworks. The Dart page opens.
  2. Select the Enable Dart support for the project <project name> checkbox.
  3. In the Dart SDK Path text box, specify the location of the downloaded Dart SDK. Type the path manually or click browseButton.png and choose the path in the dialog box that opens. If IntelliJ IDEA recognizes the Dart SDK correctly, its revision number is displayed in the Version read-only field.
  4. For Dart web development: optionally specify the location of the Dartium executable (Windows and Linux)/Dartium application (macOS). Type the path manually or click browseButton.png and choose the path in the dialog box that opens. Learn more about Dart web tools from the the Dart Official website,
  5. In the Enable Dart support for the following modules area, select the checkboxes next to the names of the modules where you need Dart support.

Working with several Dart projects (packages) in one IntelliJ IDEA project

To attach a Dart project (package) to an existing IntelliJ IDEA project you need to add its root folder as a content root or as a new module.

To add a Dart project (package) to an existing IntelliJ IDEA project, do one of the following:

  • Add a content root on the Modules page (File | Project Structure | Modules) as described in Adding a content root.
  • Add a module to your project: choose File | New | Module from Existing Sources and select the relevant module in the dialog that opens.

Using Pub

IntelliJ IDEA integrates with the pub tool and provides a Pub actions pane for running its actions such as installing dependencies or building the project from the editor.

IntelliJ IDEA logs execution of pub commands in the Messages Tool Window where you can also re-run the last executed command by clicking run on the toolbar.

Managing Dart dependencies

As soon as you open a pubspec.yaml file in the editor, IntelliJ IDEA displays a Pub actions pane at the top of the pubspec.yaml editor tab. Use the links on this pane to invoke pub get, pub upgrade, and pub cache repair actions.

The pub tool saves the downloaded packages in the cache and creates a .packages file and a pubspec.lock file next to the pubspec.yaml file.

Building a Dart application

You can also run the pub build action from the Pub actions pane in the editor.

To build a Dart application

  1. Open the pubspec.yaml file in the editor or switch to the tab where it is opened.
  2. On the Pub actions pane at the top of the tab, click Build.
  3. In the dialog box that opens, choose the build mode which determines the behaviour of the compiler:
    • Release: choose this option to minify the generated JavaScript code. In the Release mode, the source .dart files are not included in the build output. This mode is applicable when you are going to publish your application.
    • Debug: choose this option if you do not want to compress the generated JavaScript. In this mode, the generated JavaScript files are included in the build output without compression, as well as the source .dart files.
    • Other: choose this option if you want to use a custom build mode.

Running and debugging Dart command-line applications

With IntelliJ IDEA, you can run and debug Dart command line applications. IntelliJ IDEA supports two debugging modes:

  • Local debugging: in this mode, your application is started from IntelliJ IDEA and is running locally on your computer. To run or debug it, use a Dart Command Line App configuration.
  • Debugging a remote application: in this mode, your application is running in a remote environment, for example, in a Docker container. To debug it, use a Dart Remote Debug configuration.

Running a Dart command-line application

  1. Open the the Dart file to start the application from or select it in the Project view. This file must contain a main() method.
  2. On the context menu of the selection, choose Run '<dart_file_name>'. IntelliJ IDEA generates a run/debug configuration of the type Dart Command Line App and launches your application with it.

Debugging a Dart command-line application locally

  1. Configure and set breakpoints in the Dart code.
  2. Open the the Dart file to start the application from or select it in the Project view. This file must contain a main() method.
  3. On the context menu of the selection, choose Debug '<dart_file_name>'. IntelliJ IDEA generates a run/debug configuration of the type Dart Command Line App and starts a debugging session with it.
  4. In the Debug Tool Window that opens, step through the program, stop and resume program execution, examine it when suspended, etc.

Debugging a remote Dart command-line application

If your application is running in a remote environment, for example, in a Docker container, you can debug it using a Dart Remote Debug configuration.

To create a Dart Remote Debug run/debug configuration

  1. On the main menu, choose Run | Edit Configurations, click add.png and choose Dart Remote Debug from the list. The Run/Debug Configuration: Dart Remote Debug opens.
  2. In the Host field, specify the address of the computer where the Dart Virtual Machine is running, the default value is localhost.
  3. Specify the port through which the debugger will connect to the remote application, the default value is 5858. The specified port is shown in the Use the command line arguments when starting the remote VM read-only field. Note that a remote application must be started exactly with these arguments.
  4. From the Search Sources in drop-down list, choose the Dart project to debug if your IntelliJ IDEA project contains several Dart projects configured as content roots.

To launch a remote debugging session

  1. Start a remote Dart application with the VM options from the Command line arguments for the remote Dart VM field in the Dart Remote Debug run configuration, for example, --enable-vm-service:5858 --pause_isolates_on_start. The application starts, immediately suspends thanks to the --pause_isolates_on_start argument, and waits for the debugger to connect.
  2. Choose the newly created Dart Remote Debug configuration in the Select run/debug configuration drop-down list and click debug.
  3. In the Debug Tool Window that opens, step through the program, stop and resume program execution, examine it when suspended, etc.

Running and debugging Dart web applications

You can run a Dart web application in any browser, while debugging is supported only in Dartium and Chrome. To run a Dart web application, open the main HTML file of your application in a browser. Debugging a Dart web application is initiated through a run configuration of the type JavaScript Debug.

IntelliJ IDEA integrates with the pub serve tool to compile Dart code into JavaScript if necessary. When you open a Dart web application in a browser, it normally starts with a built-in server URL like http://localhost:63342/project-name/web/index.html. However, the built-in server is not used to serve the application. Instead, IntelliJ IDEA automatically starts pub serve (on a random free port, e.g. 54321) and the browser page is redirected to the pub serve URL (like http://localhost:54321/index.html).

The work of pub serve is logged in the dedicated Pub Serve tool window. The tool window opens when you start running or debugging a Dart web application for the first time during the current IntelliJ IDEA session. You can stop the tool by clicking stop.png on the toolbar. When you start running or debugging again, pub serve restarts automatically.

Running a Dart web application

Open the HTML file with a Dart reference or select it in the Project view. On the context menu of the editor or selection, click Open in Browser and choose the required browser in the list.

Debugging a Dart web application

This feature is only supported in the Ultimate edition.

Debugging of Dart web applications is supported only in Dartium and Chrome. A debugging session is initiated via a run configuration of the type JavaScript Debug.

Before you start, configure the built-in debugger as described in Configuring JavaScript Debugger. To use the Live Edit functionality that shows the changes in your HTML and CSS in the browser on the fly, install the JetBrains IDE Support Chrome extension. Find more about that in Live Edit in HTML, CSS, and JavaScript.

To create a JavaScript Debug run/debug configuration

  1. Open the HTML file that references Dart or select the file in the Project view.
  2. On the context menu, choose Create '<HTML_file_name>'. The Run/Debug Configuration: JavaScript Debug dialog opens.
  3. Choose the browser to debug the application in. If you choose Dartium which has a built-in Dart virtual machine, the Dart code is executed natively. If you choose Chrome, the Dart code is compiled into JavaScript through the dart2js or dartdevc tool.
  4. The URL field already shows the URL address of the application in the format http://localhost:<built-in server port>/<project-name>/<relative path to the HTML file>. During a debugging session, the browser will be redirected from this URL to the pub serve URL.

To start debugging

  1. Configure and set breakpoints in the Dart code.
  2. Initiate a debugging session: choose the created run configuration from the Edit configurations drop-down list on the toolbar and click debug. IntelliJ IDEA opens the specified URL in the chosen browser.
  3. In the Debug Tool Window that opens, step through the program, stop and resume program execution, examine it when suspended, etc.

Testing Dart applications

IntelliJ IDEA supports running and debugging Dart tests that are written using the dart test package. You can run tests on any target platform, debugging is supported only for VM tests.

You can run and debug single tests, test groups, as well as tests from entire files and folders. IntelliJ IDEA creates a run/debug configuration with the default settings and a launches the tests. You can later save this configuration for further re-use.

To run or debug a single test
Open the test file in the editor, right-click the call of the test() method, and choose Run '<test_name>' or Debug '<test_name>' on the context menu.

To run or debug a group
Open the test file in the editor, right-click the call of the group() method, and choose Run '<group_name>' or Debug '<group_name>' on the context menu.

To run or debug Dart tests from a file
In the Project view, select the file with the tests to run and choose Run '<file_name>' or Debug '<file_name>' on the context menu.

To run or debug Dart tests from a folder
In the Project view, select the folder with the tests to run and choose Run '<folder_name>' or Debug '<folder_name>' on the context menu.

To save an automatically generated default configuration
After a test session is over, choose Save <default_test_configuration_name> on the context menu of the test, test group, test file, or folder.

To run or debug tests through a previously saved run/debug configuration
Choose the required Dart Test configuration from the list on the tool bar and click run or debug.

Last modified: 6 March 2018

See Also