29

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

enter image description 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.

demisx
  • 7,217
  • 4
  • 45
  • 43

5 Answers5

18

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

    Preferences > Libraries

  3. Click Add and then press the + icon

    enter image description here

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

    enter image description here

  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:

enter image description here

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

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.

Alex Ilyaev
  • 1,222
  • 1
  • 13
  • 17
  • Unfortunately, this is a solution only for typescript bindings and not for the HTML markup elements and attributes. – Michahell Aug 11 '16 at 12:34
  • @MichaelTrouw Not sure what you mean, I don't use TypeScript, and I get auto-complete for Angular Material attributes (those that are exposed). – Alex Ilyaev Aug 11 '16 at 18:01
  • (I cannot @ your username, bytheway, annoying..) copy random bits of angular-material example HTML and check if you see any orange-underlined attributes (there should be). maybe those are exposed, maybe they are not, in any case they are used by angular-material and I don't want them to show up as warnings. case in point: in my Webstorm editor, the first piece of example HTML at https://material.angularjs.org/latest/layout/introduction shows a warning for the ```show``` directive. it shouldn't. **EDIT:** I see now that ```show``` is included under important notes. but there are more! – Michahell Aug 12 '16 at 09:49
  • 1
    @MichaelTrouw Yes, you are correct, most of them are marked, and as I mentioned under Important note (this includes variations like `flex-md`). There's really nothing we can do with that except ask the Angular Material guys to add \@ngDoc for those stuff, but they're too busy with Material 2 that they don't have time for anything. Just add them as a custom attributes (Alt+Enter on the attribute). – Alex Ilyaev Aug 12 '16 at 22:48
  • Nice. This does it for me. – Cliff Hall Jun 17 '17 at 23:19
  • This doesn't seem to work with Angular 11. – Vinh VO Jan 26 '21 at 08:55
14

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:

enter image description here

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

Add here AngularJS

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

enter image description here

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.

Christian Gollhardt
  • 16,510
  • 17
  • 74
  • 111
  • 1
    Thank you. Adding each of Angular Material HTML attributes as a separate tag and maintaining them over time would not be feasible. There's gotta be a better way of doing it. Maybe in the future. – demisx Mar 06 '15 at 23:35
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:

gustavohenke
  • 40,997
  • 14
  • 121
  • 129
  • I do already have AngularJS plugin enabled. I am having issues with WebStorm 9 (on latest Mac OS X) not recognizing Angular Material html attributes and not the AngularJS itself. Angular Material is a separate project from AngularJS. – demisx Mar 06 '15 at 23:32
  • @demisx I'm well aware of the differences between these projects. You need that plugin AND the ngMaterial sources. The plugin reads the `@ngdoc` annotations and document the directives in your HTML. An example is available in the screenshot I provided. – gustavohenke Mar 07 '15 at 03:22
  • I see. I have AngularJS plug-in enabled (Version 139.1112) and the ngMaterial sources are in the `bower_components` folder. The latter is marked as "library home". Looks like attributes defined as directives in ngMaterial JS file are recognized, but attributes defined in ngMaterial CSS not e.g. `layout-fill`, `hide-sm` etc. I guess this is because CSS doesn't have docs. Thank you for your help. – demisx Mar 07 '15 at 08:16
  • This specifically helped me with the Unknown tag issue (I'd disabled the plugin in the hope of reducing cpu/memory usage), thanks! – StephMW Dec 29 '17 at 10:53
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.

Plugin

Helps

But its no perfect.

Not every tag

Hope it helps.

Pablo Palacios
  • 2,767
  • 20
  • 37
0

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.

anders
  • 175
  • 2
  • 7