Pages

Let's start Dart with brilliant WebStorm10

Friday, April 3, 2015
WebStorm 10 has been released! This is the most important update for Dart users since Dart Analysis Server has been integrated into WebStorm.
Here is the quick start guide to set up WebStorm 10 and latest Dart ver 1.9.1.

Install Dart and Dartium

Assuming you are using Mac, the easiest way is to install using Homebrew.

Homebrew

If you have not installed Homebrew yet, go http://brew.sh/ and and install it.

Install Dart

$ brew tap dart-lang/dart
$ brew install dart
You will see latest Dart(1.9.1) installed in /usr/local/bin/, yay.

Install Dartium

$ brew install dartium
That's it.

Install WebStorm 10

Go to https://www.jetbrains.com/webstorm/ and download and install it.
Note, WebStorm is paid app with free 30-day trial. I'm pretty sure it's worth paying. If you don't want to pay, you can also try InteliJ IDEA community edition with Dart plugin for free.

Dart project setting.

Ensure Dart is correctly set in WebStorm as follows.

Workflow

Create a Dart project (File -> New Project -> Dart), I recommend "Web Application" template, then you will see initial project files.

pub get

Do "pub get" by right click on pubspec.yaml.

pub serve

Open "Terminal" by clicking "Terminal" button in WebStorm and You will see the root directory of the preject, then type
$ pub serve

Open Dartium

In another terminal window, type
$ dartium --checked
Go the site (http://localhost:8080 by default) to see the content.
See https://www.dartlang.org/tools/dartium/

Debugging

To debug Dart project on WebStorm IDE you have to set up a few things as follows.

Install JetBrains IDE Support Chrome Extension

Open https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=en in Dartium, and install the extension.

Set Up Debugger for Dartium

Select "Run -> Edit Configurations...", then set new "JavaScript Debug" as follows.

Open Dartium window with WebStorm debugging.

Select "Run -> Debug"
Then you should be able to use the debugger. You will see "JetBrains IDE Support is debuggeng this tab" message above the Dartium window. You can see stack trace and logs on the console, set break points, step over, step into, etc...

Live Analysis

Dart finally releases Dart Analysis Server and WebStorm 10 has already integrated it. Click "Dart Analysis" button and you will see on-the-fly code analysis result automagically. This is huge improvement!

Dash plugin

WebStorm has Dash plugin to open definition in Dash instantly. Install the plugin via Preferences -> Plugins. Then Tools -> Search in Dash to open definiton in Dash. You can also set shortcut. Default: cmd+shift+D.
https://itunes.apple.com/us/app/dash-api-docs-snippets/id458034879?mt=12
Note, you can also open docs in https://api.dartlang.org/ by shift+F1.



WebStorm becomes the best Dart development IDE. It's good time to start Dart development with latest Dart(1.9.1) and WebStorm 10. Let's have fun!

Ref

http://news.dartlang.org/2015/03/live-analysis-results-with-webstorm-10.html
https://www.dartlang.org/tools/download.html
https://www.jetbrains.com/webstorm/help/running-and-debugging-dart.html#d154619e283

No comments:

Post a Comment