Top 12 des astuces de productivité pour WebStorm et Angular: Part 1 –

WebStorm et Angular Astuce 1: Utiliser la CLI angulaire depuis WebStorm

Angular CLI est une commande- ligne interface (CLI), écrite et maintenue par l'équipe Angular, pour automatiser votre flux de travail de développement. Vous pouvez l'utiliser pour créer rapidement de nouveaux projets Angular et ajouter de nouvelles fonctionnalités telles que des composants, des services et des directives aux projets Angular existants.

WebStorm et l'intégration angulaire utilisant Angular CLI vous fournissent toute la puissance d'Angular depuis WebStorm, sans utiliser le

Pour créer un nouveau projet angulaire, choisissez Fichier> Nouveau> Projet et sélectionnez CLI angulaire .

Entrez un emplacement de projet et cliquez sur Créer . WebStorm utilise Angular CLI pour créer un nouveau projet Angular et installer des dépendances.

Lorsque votre nouvelle application Angular est en place, vous pouvez facilement ajouter de nouvelles fonctions Angular. Faites un clic droit sur src / app et choisissez Nouveau> Angular CLI pour choisir le type de fonction que vous souhaitez ajouter.

Une fois que vous avez sélectionné une caractéristique, vous pouvez spécifier le nom et les paramètres optionnels, comme vous le feriez avec Angular CLI sur la ligne de commande:

Pour en savoir plus sur les options CLI angulaires paramètres, assurez-vous de vérifier La référence Ultimate CLI angulaire .

Ce qui est vraiment génial, c'est que WebStorm ajoute automatiquement le composant pour le module Angular droit pour vous – dans ce cas AppModule .

Si votre application comporte plusieurs modules angulaires, cliquez avec le bouton droit sur le module auquel vous souhaitez ajouter la fonction et choisissez Nouveau> Angular CLI . WebStorm s'assurera que les nouveaux fichiers sont créés au bon endroit et que la nouvelle fonctionnalité est ajoutée au bon module Angular

Comme c'est gentil!

WebStorm et Angular Tip 2: Naviguer comme un pro

Utilisez cmd -click ou cmd + B pour passer facilement à n'importe quelle définition de votre projet.

Si vous êtes un utilisateur de clavier, mettez simplement votre curseur sur un terme et appuyez sur cmd + B . Si vous êtes un utilisateur de souris, maintenez le bouton cmd enfoncé et tous les termes que vous survolerez deviendront des liens vers leur définition.

WebStorm reconnaît automatiquement les composants et directives angulaires dans vos HTML – liens vers les feuilles de style, liens vers des modèles, des classes, des interfaces et bien plus encore.

Inutile d'ouvrir le (s) fichier (s) manuellement; Sautez simplement à la définition dont vous avez besoin:

Lorsque vous cherchez un fichier auquel vous n'avez pas de référence immédiate, cliquez sur shift deux fois pour ouvrir le dialogue Rechercher partout . Vous n'avez pas à taper toute la chaîne de recherche. Si vous voulez ouvrir AppComponent tapez simplement la première lettre de chaque partie – par exemple, ac – et WebStorm réduira immédiatement la liste des résultats pour vous, afin que vous puissiez rapidement choisir la suggestion que vous souhaitez ouvrir:

Un autre raccourci de navigation super utile est cmd + E qui vous présente avec une liste de fichiers récemment édités pour que vous puissiez facilement naviguer entre eux

Savoir naviguer rapidement vers le code dont vous avez besoin vous permettra d'économiser

WebStorm et Angular Astuce 3: Profiter du langage angulaire

Par défaut, WebStorm fournit déjà une aide précieuse pour l'écriture de code angulaire.

Lors de l'édition d'un script, WebStorm importe automatiquement les modules JavaScript requis pour y Vous n'avez pas besoin de les importer manuellement.

Si vous ouvrez le panneau TypeScript, WebStorm vous fournit un retour immédiat sur la validité de votre code, ce qui vous permet de résoudre rapidement les problèmes avant de compiler votre projet. Regardez comment l'interface OnInit est automatiquement importée et comment les commentaires en temps réel de TypeScript vous indiquent immédiatement si votre code TypeScript est valide ou non:

Lorsque vous modifiez un modèle, WebStorm vous fournit un code intelligent qui reconnaît les composants, les directives et même les propriétés d'entrée et de sortie:

Vous pouvez aller plus loin en installant le Angular Language Service . C'est un service, conçu par l'équipe Angular, pour fournir aux EDI la vérification des erreurs et la complétion des types dans les modèles Angular.

WebStorm s'intègre à Angular Language Service pour mieux comprendre votre code. Pour activer Angular Language Service, assurez-vous d'abord qu'il est installé:

 npm install @ angular / language-service --save-dev

Si vous utilisez Angular CLI pour générer une application Angular, Angular Language Service est automatiquement installé

Ensuite, allez dans Préférences> Langues et Frameworks> TypeScript assurez-vous que Utiliser le service TypeScript est coché et cliquer Configurer … :

Le modal Options de service apparaîtra . Activer Utiliser le service Angular et appliquer les modifications:

Avec le service Angular Language activé, WebStorm est capable d'améliorer le code dans les expressions de modèle:

… et signaler des erreurs de modèle plus précisément dans votre éditeur:

avoir à compiler votre projet vous fait gagner énormément de temps.

WebStorm et Angular Astuce 4: Formatage automatique de votre code

Ne vous inquiétez pas du formatage de votre code manuellement. WebStorm vous a couvert.

Que vous soyez dans un modèle, un script, une feuille de style ou même un fichier JSON, appuyez simplement sur cmd + option + B et WebStorm formateront automatiquement tout le code pour vous:

Si votre projet possède un fichier tslint.json il suffit de l'ouvrir up et WebStorm vous demanderont si vous souhaitez appliquer le style de code de TSLint à votre projet:

Si vous n'êtes pas satisfait de le style du code auto-formaté, vous pouvez affiner les paramètres de format pour chaque langue prise en charge séparément dans Webstorm> Préférences> Editeur> Style de code :

La fonction de formatage de code de WebStorm garantit que votre code est correctement formaté en fonction de votre projet paramètres, pour que vos contrôles de filtrage de code réussissent et que vous puissiez vous concentrer sur l'écriture de code.

WebStorm et Angular Astuce 5: Optimiser vos importations

Lorsque vous travaillez sur un script Angular, vous pouvez constater que certaines importations ne sont plus utilisées .

Si vous ne supprimez pas les importations inutilisées, la taille de votre bundle peut dépasser celle requise. Cependant, la suppression des importations inutilisées peut être une véritable corvée. Pas avec WebStorm!

Hit ctrl + alt O pour optimiser vos importations instantanément. Sinon, vous pouvez appuyer sur cmd + shift + A pour ouvrir le panneau Find actions tapez optim pour trouver l'action Optimiser les importations et appuyez sur la touche entrez pour exécuter l'action.

Lors de l'optimisation des importations, WebStorm procédera comme suit:

• fusionner les importations depuis le même module dans la même instruction instruction
• supprimer les importations inutilisées
• reformater les instructions d'importation pour qu'elles correspondent à la longueur de ligne souhaitée.

Dans l'exemple suivant, Optimiser les importations est exécuté deux fois. La première fois, il fusionne toutes les importations de @ angular / core en une déclaration d'importation.

Puis le OnInit OnChanges et AfterViewInit les interfaces sont retirées du code et ctrl + alt + O est de nouveau pressé.

Cette fois, Optimiser les importations supprime automatiquement les interfaces inutilisées de l'instruction import, car elles ne sont plus utilisées dans le code:

Ne vous inquiétez plus jamais de vos déclarations d'importation. WebStorm est assez intelligent pour les manipuler pour vous!

Utiliser WebStorm et Angular Together: Résumé

Récapitulons les astuces personnelles de Jurgen pour travailler avec WebStorm et Angular pour augmenter la productivité du développement angulaire:

1. Utiliser la CLI angulaire de dans WebStorm pour générer rapidement de nouveaux projets et fonctionnalités Angular
2. Naviguer comme un pro pour accéder instantanément aux définitions de code et localiser facilement le code ou les fichiers que vous recherchez
3. d'Angular Language Service pour obtenir un code encore plus complet et vérifier les erreurs sans compiler votre projet Angular
4. Formatez votre code pour que WebStorm formate tout votre code en fonction des paramètres de votre projet
5. Optimisez vos importations pour vous assurer que toutes les importations inutilisées sont supprimées et que la taille de votre bundle généré reste optimale.

Dans la partie suivante, Todd Motto partage ses astuces préférées 005] pour travailler avec WebStorm et Angular aussi. Assurez-vous de le vérifier!

Architecte front-end chez The Force – spécialisé dans JavaScript et AngularJS. Développeur Expert chez Google. Gymnaste. Papa. Homme de famille. Créateur d'Angular Express.