Webstorm logo

The WebStorm Blog

The Smartest JavaScript IDE

Features

Dart Support in WebStorm 6

As you know WebStorm 6 includes Dart language support out of the box. Let’s spend a couple of minutes and go through supported features.

Note: You can install the Dart plugin both in WebStorm 5 and IntelliJ IDEA 12.

First of all we need to configure Dart SDK in WebStorm 6. This screencast shows how easy you can do it.

http://www.youtube.com/watch?v=8IO4QbtRc1c

The IDE understands the latest Dart syntax and automatically provides a proper code completion for classes, functions, variables and even files paths.

http://www.youtube.com/watch?v=4PAuq-Wt2B4

Also you get great tools to observe code. You can easily navigate to a class with Goto Class Name action (Ctrl+N / Cmd – N) or use Goto Symbol action (Ctrl+Alt+Shift+N / Cmd-Alt-Shift-N) to navigate to methods or global functions/variables. With Quick Definition action (Ctrl+Shift+I / Cmd-Shift-I) these two actions become extremely powerful.

http://www.youtube.com/watch?v=Z1q0Gdm4iKA

Note: Quick Definition action works with any usage.

To observe the structure of the current file just open Structure window or use File Structure action (Ctrl+F12 / Cmd-F12).

When you use Find Usages action (Alt+F7) results are grouped by the context.

Use Goto Implementation action (Ctrl+Alt+B / Cmd-Alt-B) to navigate to the implementation of the particular class, interface or method.

Or use Goto Super action (Ctrl+U / Cmd-U) to navigate to a super class or method.

Note: Quick Definition action (Ctrl+Shift+I / Cmd-Shift-I) works here too.

Now lets check features that will help you to edit your code and keep it clean. First of all the IDE uses Dart analyzer from the SDK to validate your code and suggests you quick fixes.

http://www.youtube.com/watch?v=XyJQPKYjzWk

Automatic refactorings will make you super productive:

  • inplace rename (Shift+F6);
  • move file;
  • extract method (Ctrl+Shift+M / Cmd-Shift-M);
  • introduce variable (Ctrl+Shift+V / Cmd-Shift-V).

Generate actions (Alt+Insert / Control-N) will make coding even more fast:

To keep your code nicely formatted according to the Dart coding style you can use the built-in formatter.

http://www.youtube.com/watch?v=dNgY26EQDTk

The IDE also helps you to installing and updating pub dependencies.

And translate your Dart application to JavaScript.

The IDE provides a powerful debugger for both client and command-line applications.

http://www.youtube.com/watch?v=GyEnznBcqcc

Also of course there is Dart unittest support.

http://www.youtube.com/watch?v=jcyez8hclxM

This is all for now, you can try all these features in the latest WebStorm 6 EAP.

As always, your suggestions and feedback are very much appreciated in our issue tracker.

Create modern web apps with pleasure!
– JetBrains WebStorm Team

Comments below can no longer be edited.

19 Responses to Dart Support in WebStorm 6

  1. Avatar

    F_Z_14 says:

    December 28, 2012

    Make a similar post for TypeScript, please

  2. Avatar

    Thor Adam says:

    December 28, 2012

    Awesome, now do TypeScript *5*

  3. Avatar

    adam says:

    December 29, 2012

    Does WebStorm support launching from a local address instead of from the filesystem? This will cause issues with trying to launch webgl applications.

    • Avatar

      Fedor Korotkov says:

      December 29, 2012

      Yes. You can create a Dart Debug – Remote configuration and configure mappings.

      • Avatar

        adam says:

        January 10, 2013

        Could you post how this is done? I’m not a full time WebStorm user. Can this be made a default configuration for all dart client applications?

  4. Avatar

    Richard Hobson says:

    December 30, 2012

    So does this shift to splitting webstorm and phpStorm posts with different content mean these two platforms are splitting away from each other? or are all the webstorm features going to be migrating into the phpStorm core still?

    • Avatar

      Richard Hobson says:

      January 3, 2013

      Anyone? I’m curious are things like Dart support and Typescript going to continue to be in phpStorm or are we looking at a feature split that goes beyond everything being the same but phpStorm has php stuff as well?

      • Avatar

        ksafonov says:

        January 5, 2013

        All WebStorm functionality will be available (either bundled or as free plugins) for PhpStorm and IntelliJ IDEA.

  5. Avatar

    Kai Sellgren says:

    December 31, 2012

    I noticed that the toolbar button does not appear unless you have also NodeJS plugin enabled.

    • Avatar

      ksafonov says:

      January 5, 2013

      Kai, which button do you mean?

      • Avatar

        Kai Sellgren says:

        January 12, 2013

        The one on the toolbar alongside with NodeJS.

  6. Avatar

    Mike says:

    January 1, 2013

    Do you support web ui with it’s template auto-build like the Dart Editor does?
    BTW I already tried IDEA 12 with the Dart-Plugin because this in combination with the better Java compiler would be the perfect environment but I was not able to setup the Dart-Plugin. I configured the sdk like you showed it in your first video but now it brings up an error which says “Do not know how to load ‘dart:html'”. Debugging is not possible because it finds no connection to Chromium but I have configured Chromium instead of Chrome. If it’s so complicated to configure a working environment in IDEA then I’ll better stay with Eclipse and hope that IDEA 13 is easier…

    • Avatar

      Fedor Korotkov says:

      January 3, 2013

      We are working on even better auto-build feature. Could you please fill bugs about your problems? There are a few known usability problems that will be fixed in the next versions of the plugin.

  7. Avatar

    Kise says:

    January 5, 2013

    why dont use add this requested future from (2 years ago)? is it not worth it ??

    http://youtrack.jetbrains.com/issue/WI-1398

    • Avatar

      ksafonov says:

      January 5, 2013

      Kise, I very much hope we find time slot and implement it in the next version of WebStorm.

  8. Avatar

    Kai Sellgren says:

    January 12, 2013

    There are some sneaky tricks you may need to do… to debug command line apps, I had to enable JavaScript Debugger plugin, and to see Dart support at all, I had to enable NodeJS plugin.

    I’m not saying it’s a problem, but took a while to figure it out. 😛

  9. Avatar

    Bob Miner says:

    March 7, 2013

    What is the proper configuration for Dart projects in WebStorm? When I open the Dart SDK samples with the latest WebStorm 6 EAP, all I see for configuration types in the Run/Debug Configurations dialog are DartUnit, some Javascript and Node.js configurations. Using DartUnit doesn’t work for a non-test Dart project. Thanks.

    • Avatar

      Fedor Korotkov says:

      April 1, 2013

      You should use JavaScript run configuration to debug a dart application.

  10. Avatar

    Sachin Dole says:

    March 22, 2013

    How do I integrate a dart web app into maven?