What I did last year at Google: IDE Tooling for AngularDart 5

I haven't blogged in over a year now, because I ended up joining Google to work on Dart, where I've been slowly easing into my opinionated state while learning from the experts.

I've also been really really focused on this new tooling which I've already announced elsewhere but wanted to share here too!

AngularDart

Dart is a statically typed language which I've grown to really enjoy using, and Dart 2 will be even more strictly typed. That is why it makes such a great platform for the Angular framework, where components are mostly statically linked together in templates to create performant UIs.

So, to further improve the productive and safe developer experience we've created for developers, I got the chance to work on IDE tools for preserving that type-safety inside of AngularDart templates! It requires AngularDart 5, and works out of the box with IntelliJ/WebStorm. It can also be configured to work in VSCode, vim, and more.

It's been a blast to create, and I am so fortunate to have had the chance to do this all open source. Let's see what it offers so far!

Errors

The new analysis plugin will find many type errors inside your templates for you. Expressions are validated against the directives you use, the inputs they contain, and the references you bind (#foo, let item of, …).

Here’s a misspelled member, so you don’t have to play human-spellchecker!

And mismatched types on a component input are no longer a problem either.

We can also give you errors related to $event variable types,

And we check the content you transclude inside your directives. This is one example of where we catch not only type errors but also dead code.

And we could go on! We catch a slew of other types of errors, both in templates, and component definitions.

In addition to being highlighted in your editor, the full listing of errors is displayed in the Dart Analysis panel.

Autocomplete

We didn’t just stop at validation! While much of the work was getting our analysis to be performant and fully well-behaved in regards to the compiler, much of the value comes from using that resolved template state to deliver you the goodness of regular Dart autocompletion in your templates:

But we can complete more than regular Dart members — how about inputs, outputs, and HTML tags?

Tags? Check.

Attributes? Check.

Stars? Check.

Attributes within stars? Check.

Bonus points: Suggested tags with attributes within component transclusions!

Transclusions are a famously advanced topic within angular, so if you think you know what exactly it is that we’re suggesting, pat yourself on the back for knowing AngularDart very well.

Suffice it to say, component APIs are much easier to follow when using our plugin!

Navigation

Support here varies a lot more by editor, but within IntelliJ you can click through parts of Dart expressions. In other editors you may be able to navigate on even more entities such as tags and inputs/outputs.

How To Use

Make sure you are using an AngularDart 5 beta release, and Dart 2.0.0-dev.31 or newer.

Simply add this to your analysis_options.yaml file:

analyzer:
  plugins:
    angular:
      enabled: true

And restart your IDE. Note, it may take a few seconds to spin up the plugin. It will first have to download sources & dependencies for you, and the first analysis will be slower than subsequent ones.

You can also play around with it in our analyzer plugin demo project.

If you are using IntelliJ, this should be all you have to do. For other editors, they may not run our plugin on HTML without extra work — for instance, VSCode requires a flag.

Closing Thoughts

If you have never tried the Dart language, and enjoy or want to explore the angular framework, I definitely recommend AngularDart which is very popular within Google. For anyone just learning, I hope that the IDE tooling here can play interactive-tutor to get you off the ground quickly!

Our plugins source code lives on Github, which has more information on what’s supported and where you can file issues if you have questions or come across any bugs.

The new IDE tooling will be part of the next stable release of AngularDart (v5). It's been a blast to work on offering even better productivity for the AngularDart community.

And I hope I check in here with updates more regularly since I'd say this was a pretty interesting last year and a half!