如何教WebStorm 9 inspector识别角材料设计标记/属性?

如何教WebStorm 9 inspector识别角材料设计标记/属性?,webstorm,Webstorm,目前,我的所有棱角材质HTML属性都以黄色突出显示,并带有WebStorm 9(Mac OS X Yosemite)警告:“此处不允许使用属性[name] 我如何教WS自动识别这些有效属性?我知道我可以将每个属性逐个添加到自定义属性列表中,但希望有更好的方法来实现这一点 更新: 只是想澄清一下,这个问题适用于项目,而不是AngularJS本身 我使用的是PHPStorm,它是WebStorm的姊妹项目,但它应该以同样的方式工作 您可能需要添加库: 文件 背景 语言和框架 Javascrip

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

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

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

我使用的是
PHPStorm
,它是
WebStorm
的姊妹项目,但它应该以同样的方式工作

您可能需要添加库:

  • 文件
  • 背景
  • 语言和框架
  • Javascript
  • 图书馆
在此添加AngularJS

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

按照以下步骤操作:

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

在右侧,您将看到选项“自定义HTML标记属性”。在此输入您希望允许的属性。

我强烈建议您安装:

  • 进入“文件>设置”菜单(如果在Windows上,则按ctrl+alt+S)
  • 在将要打开的窗口中选择插件
  • 单击浏览存储库按钮
  • 在搜索字段中键入AngularJS。选择插件
  • 单击安装插件
  • 该插件用于读取ngMaterial源中的
    @ngdoc
    注释,并为其指令创建文档

    ,但在通过其他IDE进行过滤时,我在插件注册表中找不到它。也许它会在WebStorm内部工作

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


    目前我认为idea的AngularJS插件不理解AngularMaterials属性扩展

    它确实理解指令,即控制点击并找到指令(自定义标记)


    现在,为了获得“绿色”页面,您必须添加自定义属性的属性。

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

  • 打开首选项(Mac:
    Cmd+,
    ,Win/Linux:
    Ctrl+Alt+S
  • 转到
    语言与框架>JavaScript>库

  • 单击
    添加
    ,然后按
    +
    图标

  • 在您的
    node\u模块
    文件夹中查找
    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属性”)

    环境
    使用WebStorm 2016.1.1在Mac OS X 10.11.4上进行测试,但这也适用于较旧的版本。

    您还有一个插件,可以帮上大忙,请查看它。这很有帮助

    通过@Alex Ilyaev提供的解决方案,可以提供很多帮助

    但它并不完美


    希望有帮助。

    我已经启用了AngularJS插件。我对WebStorm9(在最新的MacOSX上)不能识别角度材质的html属性和AngularJS本身存在问题。AngularJS中的AngularMaterial是一个独立的项目。@demisx我很清楚这些项目之间的差异。您需要该插件和ngMaterial源。该插件读取
    @ngdoc
    注释,并在HTML中记录指令。我提供的屏幕截图中有一个例子。我明白了。我启用了AngularJS插件(版本139.1112),ngMaterial源位于
    bower\u components
    文件夹中。后者被标记为“图书馆之家”。看起来可以识别ngMaterial JS文件中定义为指令的属性,但ngMaterial CSS中定义的属性没有,例如
    布局填充
    隐藏sm
    等。我想这是因为CSS没有文档。谢谢你的帮助。这特别帮助我解决了未知标签问题(我禁用了插件,希望减少cpu/内存的使用),谢谢!非常感谢。将每个AngleMaterial HTML属性作为单独的标记添加并随时间保持它们是不可行的。一定有更好的办法。也许在将来。获得对它的支持真是太好了。不幸的是,这是一个仅适用于typescript绑定的解决方案,而不适用于HTML标记元素和属性。@MichaelTrouw不确定你的意思,我不使用typescript,我可以自动完成角度材质属性(暴露的属性)。(顺便说一句,我不能@your username,烦人…)复制角度材料示例HTML的随机位,并检查是否看到任何带橙色下划线的属性(应该有)。可能是暴露的,也可能不是。在任何情况下,它们都是由棱角材料使用的,我不希望它们显示为警告。例如:在我的Webstorm编辑器中,位于的第一个示例HTML显示了
    show
    指令的警告。它不应该。编辑:我现在看到
    show
    包含在“重要”下注释。但是有m