How do I teach WebStorm 9 inspector to recognize Angular Material Design tags/attributes?
webstorm
Solution
You need to add the `angular-material.js` file as a Library in WebStorm:
- Open Preferences (Mac: `Cmd+,`, Win/Linux: `Ctrl+Alt+S`)
Go to `Languages & Frameworks > JavaScript > Libraries`
Click `Add` and then press the `+` icon
Find `angular-material.js` in your `node_modules` folder
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.
Problem
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". How can I teach WS to automatically recognize these attributes as valid? I am aware that I can add each one one-by-one to the list of custom attributes, but was hoping that there would be a better way to do this. UPDATE: Just wanted to clarify that this issue applies to Angular Material project, and not the AngularJS itself.