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

Question

目前，我的所有角度材质HTML属性都以黄色突出显示，并附有WebStorm 9（Mac OS X Yosemite）警告：＆＃34;此处不允许使用属性[名称]＆＃34;。

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

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

Answer 1

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

1. 打开首选项（Mac：Cmd+,，Win / 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＆gt;“将flex添加到自定义html属性”）。

环境

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

Answer 2

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

您可能需要添加库：

• 文件
• 设置
• 语言＆amp;框架
• 的Javascript
• 图书馆的

在此处添加AngularJS

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

请按照以下步骤操作：

• 文件
• 默认设置
• 编辑
• 检验
• HTML
• 未知的HTML代码属性

在右侧，您将在选项＆＃34;自定义HTML标记属性＆＃34;中看到。在此输入您要允许的属性。

Answer 3

我强烈建议您安装Angular.js plugin：

1. 转到菜单文件＆gt;设置（或 ctrl + alt + S ，如果你在Windows上）;
2. 在打开的窗口中选择插件;
3. 单击“浏览存储库”按钮;
4. 在搜索字段中键入AngularJS。选择插件;
5. 点击安装插件。

该插件可以读取ngMaterial源中存在的@ngdoc注释，并为其指令创建文档。

It seems to support WebStorm and other IDEs，但在其他IDE过滤时，我无法在插件注册表中找到它。也许它可以在WebStorm中运行......

无论如何，这就是你得到的：

Answer 4

你还有一个帮助很多的插件，请查看它。它有很多帮助

Angular material v2, Teradata covalent v1, Angular flex layout v1 & Material icon live templates 随着@Alex Ilyaev提供的解决方案提供了很多帮助。

但它并不完美。

希望它有所帮助。

Answer 5

目前，我并不认为该想法的AngularJS插件能够理解角度材质属性扩展。

它确实理解指令，即控制点击＆lt; md-button ...＆gt;并找到指令（自定义标签）。

现在，您必须添加自定义属性属性才能获得＆＃34;绿色＆＃34;页。