web-dev-qa-db-fra.com

Comment apprendre à l'inspecteur WebStorm 9 à reconnaître Angular Tags/attributs de conception matérielle?

Actuellement, tous les attributs HTML de mes matériaux angulaires sont surlignés en jaune avec WebStorm 9 (Mac OS X Yosemite): "L'attribut [nom] n'est pas autorisé ici".

enter image description here

Comment puis-je apprendre à WS à reconnaître automatiquement ces attributs comme valides? Je suis conscient que je peux ajouter chacun un à la liste des attributs personnalisés, mais espérais qu'il y aurait un meilleur moyen de le faire.

UPDATE: Je voulais juste préciser que cette question s’applique à Angular Material project et non à AngularJS lui-même. 

webstorm
26
demisx

Vous devez ajouter le fichier angular-material.js en tant que bibliothèque dans WebStorm:

  1. Ouvrir les préférences (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)

  2. Aller au Languages & Frameworks > JavaScript > Libraries

     Preferences > Libraries

  3. Cliquez sur Add puis appuyez sur l'icône +

     enter image description here

  4. Trouver angular-material.js dans votre dossier node_modules

     enter image description here

  5. Ajoutez un nom et une version et appuyez sur Ok

Vous allez maintenant avoir terminé tous les éléments et attributs qui ont une documentation @ngdoc dans le code source angular-material. 

Usage

  • Commencez à taper et vous verrez les compléments: 

 enter image description here

  • Appuyer sur F1 (Ctrl + Q sous Win/Linux) affichera également certains documents, s'ils sont disponibles dans le code source:
     enter image description here

Note importante

Toutes les fonctionnalités ne sont pas correctement documentées, les informations suivantes ne seront pas affichées (sauf si vous les avez déjà utilisées) car elles sont définies de manière dynamique dans une boucle, sans @ngdoc pour elles: 

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

Donc, pour cela, vous devez les ajouter en tant qu'attribut personnalisé (Alt+Enter> "Ajouter flex aux attributs HTML personnalisés").

Environnement

Testé sur Mac OS X 10.11.4 avec WebStorm 2016.1.1, mais cela devrait également fonctionner pour les versions antérieures.

16
Alex Ilyaev

J'utilise PHPStorm, qui est un projet frère de WebStorm, mais il devrait fonctionner de la même manière.

Vous devrez peut-être ajouter la bibliothèque:

enter image description here

  • Fichier
  • Réglages
  • Langues et cadres
  • Javascript
  • Les bibliothèques

Ajouter ici AngularJS

Si cela ne fonctionne pas, vous pouvez les ajouter manuellement:

enter image description here

Suivez ces étapes:

  • Fichier
  • Paramètres par défaut
  • Éditeur
  • Inspection
  • HTML
  • Attributs de balises HTML inconnus

À droite, vous verrez dans les options "Attributs de balise HTML personnalisés". Entrez ici les attributs que vous souhaitez autoriser.

14
Christian Gollhardt

Velmi doporučuji nainstalovat plugin Angular.js :

  1. Přejděte do nabídky Soubor> Nastavení (neboctrl+alt+Spokud jste ve Windows);
  2. V okně, které se otevře, vyberte možnost Pluginy;
  3. Klikněte na tlačítko Procházet úložiště;
  4. Faites le pôle pro vyhledávání zadejte AngularJS. Vyberte zásuvný modul;
  5. Klepněte na tlačítko Instalovat plugin.

Zásuvný modul je povinen číst anotace @ngdoc přítomné v zdrojích ngMaterial a vytvořit dokumentaci pro jejich směrnice.

En anglais, en ligne, WebStorm à partir d'un IDE , ale nemohl jsem ho najít - enregistrez un plugin de filtre filtré pour IDE. Lire plus sur le WebStormu ...

Každopádně to je to, co dostanete:

5
gustavohenke

Vous avez également un plugin qui aide beaucoup, jetez-y un œil. Ça aide beaucoup

Angular matériau v2, Teradata covalent v1, Angular flex layout v1 & icône de matériau modèles dynamiques Et avec la solution fournie par @Alex Ilyaev, apporte une aide considérable. 

 Plugin

 Helps

Mais ce n'est pas parfait.

 Not every tag

J'espère que ça aide.

0
moplin

Actuellement, je ne pense pas que le plugin AngularJS de cette idée comprenne les extensions d'attributs angular-materials.

Il comprend les directives, c.-à-d. Clic de commande <md-button ...> et la directive (balise personnalisée) est trouvée.

Pour l'instant, vous devrez ajouter les attributs d'attributs personnalisés afin d'obtenir une page "verte".

0
anders