CODEWITHSUNDEEP
webstorm
demisx
demisx

Reputation: 7786

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

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.

Upvotes: 29

Views: 20140

Answers (5)

Pablo Palacios
Pablo Palacios

Reputation: 2947

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.

Upvotes: 1

Alex Ilyaev
Alex Ilyaev

Reputation: 1222

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.

Upvotes: 18

anders
anders

Reputation: 195

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.

Upvotes: 0

gustavohenke
gustavohenke

Reputation: 41440

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:

Upvotes: 5

Christian Gollhardt
Christian Gollhardt

Reputation: 17014

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.

Upvotes: 14

Related Questions