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 have also a plugin that helps a lot, check it out. It helps a lot

Angular material v2, Teradata covalent v1, Angular flex layout v1 & Material icon live templates And with the solution provided by @Alex Ilyaev gives a lot of help.

But its no perfect.

Hope it helps.

Answer 2

Currently I don't think that idea's AngularJS plugin understands angular-materials attribute extensions.

It does understand the directives i.e. control click <md-button ...> and the directive (custom tag) is found.

For now you will have to add the attributes af custom attributes in order to get a "green" page.

Answer 3

I am using PHPStorm, which is a sister Project of WebStorm, but it should work the same way.

You maybe need to add the Library:

• File
• Settings
• Languages & Frameworks
• Javascript
• Librarys

Add here AngularJS

If this does not work, you can add them manually:

Follow this Steps:

• File
• Default Settings
• Editor
• Inspection
• HTML
• Unknown HTML tag attributes

To the right you will see in Options "Custom HTML tag attributes". Enter here the attributes you want to allow.

Answer 4

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.

Answer 5

I highly recomend you to install the Angular.js plugin:

1. Go to menu File > Settings (or ctrl + alt + S if you're on Windows);
2. Select Plugins in the window that'll open;
3. Click in the Browse Repositories button;
4. Type AngularJS in the search field. Select the plugin;
5. Click Install Plugin.

The plugin is incumbed to read @ngdoc annotations present in ngMaterial sources and create documentation for their directives.

It seems to support WebStorm and other IDEs, but I could not find it in the plugin registry while filtering by other IDEs. Maybe it'll work inside WebStorm...

Anyway, this is what you get: