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".

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.

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.

Answer 2

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.