我如何教 WebStorm 9 检查器识别 Angular Material Design 标签/属性? [英] How do I teach WebStorm 9 inspector to recognize Angular Material Design tags/attributes?

问题描述

目前，我的所有角度材质 HTML 属性都以黄色突出显示，并带有 WebStorm 9 (Mac OS X Yosemite) 警告:此处不允许使用属性 [名称]".

如何教 WS 自动将这些属性识别为有效?我知道我可以将每个属性一一添加到自定义属性列表中，但希望有更好的方法来做到这一点.

更新:只是想澄清一下，这个问题适用于

点击Add，然后按+图标

在您的 node_modules 文件夹中找到 angular-material.js

添加名称和版本，然后按Ok

现在，您将拥有 angular-material 源代码中具有 @ngdoc 文档的所有元素和属性的补全.

用法

• 开始输入，您将看到完成:

• 按 F1(Win/Linux 上的 Ctrl+Q)也会显示一些文档，如果源代码中有的话:
  

重要提示

并非所有功能都已正确记录，以下不会显示(除非您已经使用它们)，因为它们是在循环中动态定义的，没有 @ngdoc 用于它们:

var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];

因此，对于这些，您必须将它们添加为自定义属性(Alt+Enter >将 flex 添加到自定义 html 属性").

环境

在 Mac OS X 10.11.4 上使用 WebStorm 2016.1.1 进行测试，但这也适用于旧版本.

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.

解决方案

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.

这篇关于我如何教 WebStorm 9 检查器识别 Angular Material Design 标签/属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！