Как я могу обучить инспектора WebStorm 9 распознавать теги/атрибуты конструктора материалов Angular?

В настоящее время все мои HTML-атрибуты angular выделены желтым цветом с предупреждением WebStorm 9 (Mac OS X Yosemite): "Атрибут [имя] здесь не разрешен".

enter image description here

Как я могу научить WS автоматически распознавать эти атрибуты как действительные? Я знаю, что я могу добавить каждый по одному в список пользовательских атрибутов, но надеялся, что будет лучший способ сделать это.

UPDATE: Просто хотел пояснить, что этот вопрос относится к проекту Angular Material, а не самому AngularJS.

Ответы

Ответ 1

Я использую PHPStorm, который является дочерним проектом WebStorm, но он должен работать одинаково.

Возможно, вам потребуется добавить библиотеку:

enter image description here

  • Файл
  • Настройки
  • Языки и рамки
  • Javascript
  • Librarys

Добавить здесь AngularJS

Если это не сработает, вы можете добавить их вручную:

enter image description here

Выполните следующие шаги:

  • Файл
  • Настройки по умолчанию
  • Редактор
  • Inspection
  • HTML
  • Неизвестные атрибуты HTML-тегов

Справа вы увидите в параметрах "Пользовательские атрибуты HTML-тегов". Введите здесь атрибуты, которые вы хотите разрешить.

Ответ 2

Вам нужно добавить файл angular-material.js в виде библиотеки в WebStorm:

  • Открыть настройки (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)

  • Перейдите к Languages & Frameworks > JavaScript > Libraries

    Предпочтения & Библиотеки

  • Нажмите Add, а затем нажмите значок +

    введите описание изображения здесь

  • Найти angular-material.js в папке node_modules

    введите описание изображения здесь

  • Добавьте имя и версию и нажмите Ok

Теперь у вас будут завершения для всех элементов и атрибутов, которые имеют @ngdoc документацию в исходном коде angular-material.

Использование

  • Начните ввод, и вы увидите пополнения:

введите описание изображения здесь

  • Нажатие F1 (Ctrl + Q на Win/Linux) также покажет некоторые документы, если они доступны в исходном коде:
    введите описание изображения здесь

Важное примечание

Не все функции должным образом задокументированы, следующее не будет отображаться (если вы уже не использовали их), потому что они определяются динамически в цикле, без @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, но это также должно работать и для более старых версий.

Ответ 3

Я настоятельно рекомендую вам установить Angular.js плагин:

  • Перейдите в меню Файл > Настройки (или ctrl + alt + S, если вы находитесь в Windows);
  • Выберите плагины в открывшемся окне;
  • Нажмите кнопку "Обзор репозиториев",
  • Введите AngularJS в поле поиска. Выберите плагин;
  • Нажмите "Установить плагин".

Плагин должен читать @ngdoc аннотации, представленные в источниках ngMaterial, и создавать документацию для своих директив.

Кажется, он поддерживает WebStorm и другие IDE, но я не смог найти его в реестре плагинов при фильтрации другими IDE. Возможно, он будет работать внутри WebStorm...

В любом случае, это то, что вы получаете:

Ответ 4

В настоящее время я не думаю, что идея AngularJS-плагина понимает расширения angular -материалов.

Он понимает директивы, т.е. управляет нажатием < md-button... > и найдена директива (пользовательский тег).

Теперь вам нужно будет добавить атрибуты af пользовательских атрибутов, чтобы получить "зеленую" страницу.