Top 12 des conseils de productivité pour WebStorm et Angular: Part 2 –

Cet article sur WebStorm et Angular a été sponsorisé par JetBrains . Merci de soutenir les partenaires qui rendent SitePoint possible.

Dans cette série en deux parties sur WebStorm et Angular, Jurgen Van de Moere et Todd Motto, experts en développement Google, partagent leurs 12 astuces de productivité préférées pour développer des applications angulaires avec WebStorm. ] Vous pouvez consulter la première partie ici . Dans cette deuxième partie, Todd partage ses sept premières fonctionnalités WebStorm personnelles qui lui permettent d'augmenter sa productivité WebStorm et angulaire sur une base quotidienne:

• Utiliser Import Path Calcul
• Modèles Live
• Exécuter des tests dans l'IDE
• Utilisation de Breadcrumbs
• Et utilisation de WebStorm pour rechercher la documentation angulaire

Chaque astuce WebStorm et angulaire augmente votre productivité lors du développement d'applications angulaires dans WebStorm. Explorons ces conseils.

Avant de commencer: lorsque vous modifiez les paramètres, rappelez-vous que WebStorm vous permet de modifier les paramètres / préférences d'une portée IDE et d'une portée de projet séparément

WebStorm et Angular Tip 6: Import Path Calculation

Par défaut, WebStorm résoudra vos chemins d'importation relatifs au fichier. Ce paramètre satisfera la plupart des projets et évitera toute modification inutile du chemin. C'est aussi la méthode utilisée pour les projets générés avec la CLI Angular.

Ce qui est fantastique avec WebStorm, c'est que vous n'avez pas besoin de taper ces instructions d'import! Lorsque vous devez utiliser une construction qui serait habituellement importée, tapez-la là où vous en avez besoin. WebStorm suggérera la construction à importer via le menu contextuel de saisie semi-automatique ou mettra en évidence la construction et vous donnera la possibilité de l'importer en appuyant sur option + entrez .

WebStorm créera une nouvelle instruction d'importation en haut du document pour vous, ou ajoutez la construction à un groupe d'importation existant qui utilise la même bibliothèque source.

WebStorm vous offre d'autres options spécialisées pour gérer votre importations. Pour les projets qui le nécessitent, vous pouvez demander à WebStorm de calculer les chemins d'importation relatifs à l'emplacement du fichier tsconfig.json . Si vous décidez de retrousser vos exportations en utilisant un fichier bar index.ts pour importer vos composants (en savoir plus sur la technique Barrel ), vous pouvez utiliser pour importer le répertoire ( Résolution de module de style nœud) . Cela utilisera la stratégie de résolution de module Node.js, au lieu de la stratégie de résolution de module classique de TypeScript.

Lors de l'importation de sous-modules qui ne nécessitent pas l'importation du module entier, ajoutez ce module au . liste. WebStorm ignorera le chemin spécifié lors de l'importation automatique. Par exemple, au lieu d'avoir:

 importer {Observable} à partir de 'rxjs'

… ajoutant rxjs à la liste des rendements:

 import {Observable} à partir de 'rxjs / Observable'

WebStorm saute le module RxJS et importe le sous-module Observable automatiquement pour vous!

Astuce: entrée de format pour utiliser l'espace entre accolades dans Préférences> Editeur> Style de code> TypeScript – Espaces – Dans – accolades d'importation / exportation ES6 .

WebStorm et Angular Tip 7: Utiliser des modèles dynamiques

trouvez-vous en écrivant plusieurs modèles de code à plusieurs reprises, créez un modèle en direct pour échafauder rapidement le bloc de code. WebStorm est déjà fourni avec des modèles Live prédéfinis que vous pouvez modifier pour s'adapter à votre style de développement.

Pour créer un modèle dynamique, accédez aux emplacements suivants:

• [macOS] WebStorm> Préférences> Editeur> Live Templates
• [Windows / Linux] Fichier> Paramètres> Éditeur> Modèles dynamiques

Vous verrez que WebStorm a déjà regroupé les modèles prédéfinis en catégories. J'ai créé une catégorie pour regrouper mes modèles Live ngrx en cliquant sur le signe + et en choisissant Template Group . J'ai ensuite créé un nouveau modèle Live en cliquant à nouveau sur le signe + mais en choisissant Live Template cette fois.

Permettez-moi de vous décrire brièvement les éléments qui font d'un Template Live un succès de productivité:

• Abréviation: le raccourci que vous tapez dans l'éditeur pour appeler votre modèle.
• Description: vous indique le rôle du modèle lorsqu'il est appelé.
• Texte du modèle: C'est le fragment de code à échafauder lors de l'invocation. Tirez parti des puissantes variables de gabarit en direct qui vous permettent de les remplacer par le texte que vous souhaitez sur un échafaudage
• Contexte: choisissez dans quelle langue ou morceaux de code WebStorm doit être sensible au gabarit. [19659005] Options: définit la clé qui vous permettra de développer le modèle et de le reformater, selon les paramètres de style définis dans WebStorm> Préférences> Editeur> Style de code . re prêt à essayer votre modèle. Ouvrez un fichier qui respecte le contexte que vous avez défini et tapez votre raccourci, appuyez sur la touche d'expansion définie et regardez votre modèle apparaître pour vous! Si vous avez défini des variables, le curseur sera placé à l'endroit où la première variable doit être entrée. Si d'autres variables sont définies, vous pouvez utiliser l'onglet pour y accéder – pas besoin de cliquer.

  

  WebStorm et astuce angulaire 8: exécution de tests

  WebStorm est un excellent outil de test. Vous pouvez exécuter une variété de tests JavaScript directement depuis l'EDI, tant que l'environnement d'exécution Node.js est installé sur votre ordinateur et que le plug-in NodeJS est activé. Voici quelques conseils de productivité lors de l'exécution de tests.

  Vous pouvez exécuter des tests Karma simples plutôt que de les exécuter tous. Cliquez sur l'icône en regard du test dans l'éditeur et sélectionnez Exécuter ou Déboguer . L'icône montrera l'état du test.

  Exécuter et déboguer les tests avec Protractor directement depuis l'EDI. Assurez-vous que Protractor est installé globalement. Les résultats des tests seront présentés dans une fenêtre d'outils. Vous pouvez filtrer les résultats des tests et choisir d'afficher uniquement les tests qui échouent.

  Comme astuce supplémentaire, vous pouvez tester les services RESTful directement à partir de l'IDE! Aller au Outils> Test du service Web RESTful .

  WebStorm et Angular Astuce 9: Voyage dans le temps

  WebStorm peut sauver la journée. Vous avez peut-être codé de nombreuses nouvelles lignes non-stop et oublié de commettre votre code au contrôle de version périodiquement – ou de l'initier du tout. Ça arrive. Quel que soit le contexte, il y a des situations où nous devons remonter dans le temps.

  Nous pouvons utiliser "Annuler", mais WebStorm a une limite par défaut de 100 undos. Cette limite peut être augmentée, mais il existe une meilleure façon de restaurer un état antérieur: en utilisant l'historique local.

  Avec l'historique local, vous pouvez parcourir les instantanés de votre code pour trouver visuellement l'état de la base de code que vous voulez atteindre. C'est similaire au contrôle de version, en contrastant l'état actuel avec l'état précédent côte à côte. (Une visionneuse unifiée est également disponible.) Cependant, l'historique local est indépendant du contrôle de version: vous pouvez l'utiliser même si vous n'avez pas lancé git, par exemple. Les instantanés seront faciles à naviguer, car ils sont triés par date – du plus récent au plus ancien.

  

  

  WebStorm et Angular Tip 10: Astuces sur les paramètres TypeScript

  Les indicateurs de paramètres TypeScript montrent les noms des paramètres dans les méthodes et les fonctions pour rendre votre code plus facile à lire. Par défaut, seuls certains indicateurs de paramètre sont affichés en fonction de leur type, et quelques astuces pour les méthodes communes sont cachées.

  

  

  Pour éviter les distractions, vous pouvez blacklister les indications de paramètre afin qu'elles ne soient plus affichées pour cette méthode dans le projet. Vous pouvez également activer tous les paramètres ou les désactiver complètement. Pour afficher les indications de paramètre pour tous les arguments:

  • ouvrir la page Apparence dans WebStorm> Préférences> Editeur> Général> Apparence .
  • Cliquer Configurer suivant Dans la boîte Options vous pouvez sélectionner "Afficher le nom pour tous les arguments". *

  * Note: dans ce même dialogue boîte, vous pouvez modifier la liste noire des indices de paramètres.

  WebStorm et Angular Astuce 11: Naviguer en utilisant Breadcrumbs

  En regardant le bas de votre fichier .ts vous pouvez voir votre position dans le fichier actuel avec du fil d'Ariane. Breadcrumbs affiche les noms des classes, des variables, des fonctions et des méthodes. Cliquez sur le nom d'un fil d'Ariane pour accéder à l'objet parent. Vous pouvez les configurer pour les afficher en haut de l'éditeur, ou pas du tout, en cliquant avec le bouton droit sur un fil d'Ariane puis en cliquant sur Fil d'Ariane> Haut ou Fil d'Ariane> Ne pas afficher

  Vous pouvez également naviguer dans un fichier en utilisant la fenêtre contextuelle Structure de fichier. On peut y accéder via Naviguer> Structure du fichier ou en appuyant sur CMD + F12 sur macOS et Ctrl + F12 sur Windows / Linux.

  

  Il n'est pas nécessaire de quitter l'IDE pour obtenir des informations plus approfondies sur ce que fait Angular

  Tant que WebStorm dispose de documentation pour la construction angulaire en question, peut placer le curseur sur une méthode ou une fonction angulaire et appuyer sur F1 pour afficher rapidement la documentation correspondante. Cela fonctionne également pour les modules et autres constructions angulaires.

  Un autre moyen rapide d'invoquer la documentation est de placer la souris sur une construction. Dans Préférences> Editeur> Général cochez la case "Afficher la documentation rapide au déplacement de la souris". Vous pouvez ajuster le délai avant que la documentation rapide soit appelée.

  

  En guise de dernier mot: ne suivez pas ces conseils! Mesurez leurs résultats. WebStorm vous permet d'obtenir un rapport de productivité dans Aide> Guide de productivité .

  Résumé

  Récapitulons les conseils personnels de Todd pour augmenter la productivité du développement angulaire dans WebStorm:

  • utilise des techniques d'importation efficaces
  • utilise des templates dynamiques pour échafauder des patterns de code rapidement
  • exécuter et surveiller une grande variété de tests dans l'IDE
  • utiliser Local History comme un système de contrôle de version indépendant, personnel et en temps réel
  • améliorer la lisibilité de votre code en utilisant les indications de paramètres TypeScript
  • Pour consulter rapidement un fichier en utilisant Breadcrumbs ou l'outil File Structure
  • recherchez la documentation Angular directement depuis l'éditeur.

  Ceci conclut nos astuces de productivité WebStorm et Angular pour développer des applications angulaires avec WebStorm by Google Developer Experts. Vous êtes désormais en mesure de rationaliser votre processus de développement et de tirer le meilleur parti de votre temps au clavier.

  
  

  Propriétaire et entraîneur à Ultimate Angular permettant à plus de 40 000 développeurs de devenir des experts angulaires grâce à des cours en ligne. Google Developer Expert pour Angular et Web Technologies.