How do I teach WebStorm 9 inspector to recognize Angular Material Design tags/attributes?

Question

Currently, all my angular material HTML attributes are highlighted in yellow with WebStorm 9 (Mac OS X Yosemite) warning: \"Attribute [name] is not allowed here\".

<

Answer 1

You need to add the angular-material.js file as a Library in WebStorm:

1. Open Preferences (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)

2. Go to Languages & Frameworks > JavaScript > Libraries

3. Click Add and then press the + icon

4. Find angular-material.js in your node_modules folder

5. Add a Name and a version and press Ok

Now you will have completions for all elements and attributes that have an @ngdoc documentation in the angular-material source code.

Usage

• Start typing and you will see the completions:

• Pressing F1 (Ctrl+Q on Win/Linux) will also show some docs, if available in the source code:
  

Important note

Not all features are properly documented, the following won't show up (unless you already used them) cause they are defined dynamically in a loop, with no @ngdoc for them:

var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
var API_NO_VALUES   = [ "show", "hide", "layout-padding", "layout-margin" ];

So for these you'd have to add them as a custom attribute (Alt+Enter > "Add flex to custom html attributes").

Environment

Tested on a Mac OS X 10.11.4 using WebStorm 2016.1.1, but this should work for older versions as well.