如何教WebStorm 9检查器识别Angular Material Design标签/属性？

Question

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

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

更新: 只是想澄清这个问题适用于Angular Material项目,而不是AngularJS本身.

Answer 1

您需要将angular-material.js文件添加为WebStorm中的库:

1. 打开首选项(Mac上Cmd+,,赢/ Linux的:Ctrl+Alt+S)

2. 去 Languages & Frameworks > JavaScript > Libraries

   

3. 单击Add,然后按+图标

   

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

   

5. 添加名称和版本,然后按 Ok

现在,您将对源代码中包含@ngdoc文档的所有元素和属性进行完成angular-material.

用法

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

• 按下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属性").

环境

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

Answer 2

我正在使用PHPStorm,这是一个姐妹项目WebStorm,但它应该以相同的方式工作.

您可能需要添加库:

• 文件
• 设置
• 语言和框架
• 使用Javascript
• 图书馆的

在这里添加AngularJS

如果这不起作用,您可以手动添加它们:

请遵循以下步骤:

• 文件
• 默认设置
• 编辑
• 检查
• HTML
• 未知的HTML标记属性

在右侧,您将在选项"自定义HTML标记属性"中看到.在此输入您要允许的属性.

Answer 3

我强烈建议您安装Angular.js插件:

1. 转到菜单文件>设置(如果您在Windows上,则选择ctrl+ alt+ S);
2. 在窗口中选择要打开的插件;
3. 单击Browse Repositories按钮;
4. 在搜索字段中键入AngularJS.选择插件;
5. 单击"安装插件".

该插件用于读取@ngdocngMaterial源中存在的注释并为其指令创建文档.

它似乎支持WebStorm和其他IDE,但在其他IDE过滤时我无法在插件注册表中找到它.也许它可以在WebStorm中运行......

无论如何,这是你得到的: