Top 12 conseils de productivité pour Webstorm et angulaire: partie 2

Cet article explore douze fonctionnalités de webstorm de productivité pour les développeurs angulaires, présentés en deux parties. Il s'agit de la deuxième partie, en se concentrant sur sept fonctionnalités clés partagées par les experts des développeurs de Google Jurgen Van de Moere et Todd Devise. (La première partie est disponible [lien vers la première partie, si disponible]).

Prise des clés:

• Streamline Imports: Tire le calcul du chemin d'importation de WebStorm pour la génération automatique des instructions d'importation, la minimisation des erreurs et la prise en charge du temps. Personnalisez les paramètres d'importation (par exemple, tsconfig.json Chemin, fichiers de baril, excluant des modules spécifiques) pour répondre aux besoins du projet.
• Échafaudage de code rapide: Utilisez des modèles en direct pour créer des extraits de code réutilisables, accélérer le développement et réduire le codage répétitif.
• Test intégré: Exécutez divers tests JavaScript (karma, protiffeur) directement dans la ligne de ligne, simplifiant le processus de test.
• Amélioration de la lisibilité du code: Améliorer la compréhension du code avec des astuces de paramètres TypeScript, la chapelure pour la navigation rapide et l'accès direct à la documentation angulaire via le webstorm.

webstorm et angulaire Astuce 6: Gestion d'importation sans effort

WebStorm gère intelligemment les chemins d'importation, les résolvant généralement par rapport au fichier (la par défaut Angular CLI). Au lieu de taper manuellement les importations, utilisez simplement une construction; WebStorm suggère de l'importer via une assurance automatique ou de l'offrir pour l'importer avec l'option Entrée (ou Alt Entrez sur Windows / Linux). Il ajoutera une nouvelle instruction d'importation ou ajoutera à ceux existants de la même bibliothèque.

Les options d'importation avancées permettent le calcul du chemin par rapport à tsconfig.json ou à l'aide de la résolution du module Node.js (idéal pour les fichiers de baril). Vous pouvez également spécifier des modules pour exclure des importations automatiques pour un contrôle plus fin.

webstorm et angulaire Astuce 7: Modèles en direct pour l'efficacité

Les modèles de code répétés sont facilement traités avec des modèles en direct. WebStorm fournit des modèles prédéfinis, que vous pouvez personnaliser ou en créer de nouveaux. Naviguez vers Préférences / paramètres & gt; Éditeur & gt; Modèles en direct pour les gérer.

Définir les abréviations, les descriptions, le texte du modèle (en utilisant des variables), le contexte et les options d'extension / reformatage. Invoquez des modèles en tapant l'abréviation et en appuyant sur la touche d'extension définie.

webstorm et angulaire Astuce 8: test inide

Exécutez divers tests JavaScript directement à partir de WebStorm (en supposant que Node.js et le plugin Nodejs sont installés). Exécutez des tests KARMA individuels directement à partir de l'éditeur ou déboguez les tests de protracteur avec les résultats affichés dans une fenêtre dédiée. Les tests de service Restful sont également intégrés via outils & gt; Tester le service Web RESTful .

webstorm et angulaire Astuce 9: Historique local pour la restauration du code

L'historique local de WebStorm fournit des instantanés de votre code, vous permettant de revenir aux états précédents indépendamment du contrôle de version. Accédez à lui pour comparer les versions actuelles et passées, même sans l'initialisation de Git.

webstorm et angulaire Astuce 10: Discript des indices de paramètre pour la clarté

TypeScript Les conseils du paramètre Améliorent la lisibilité du code en affichant les noms de paramètres dans les fonctions. Personnaliser la visibilité de l'indice dans Préférences / paramètres & gt; Éditeur & gt; Général & GT; Apparence . Vous pouvez montrer des conseils pour tous les arguments, créer une liste noire pour des méthodes spécifiques ou les désactiver entièrement.

webstorm et angulaire Astuce 11: Chiffre de pain pour la navigation efficace

La chapelure en bas de l'éditeur (ou configurable en haut) montrez votre emplacement actuel dans un fichier. Cliquez sur une chapelure pour passer à l'objet parent. Alternativement, utilisez la popup de structure de fichiers ( naviguer & gt; Structure de fichiers ou cmd / ctrl f12).

webstorm et angulaire Astuce 12: Accès à la documentation angulaire in-ide

Accédez à la documentation angulaire directement dans WebStorm. Placez le caret sur une construction angulaire et appuyez sur F1, ou activez "Afficher une documentation rapide sur le mouvement de la souris" dans Préférences / paramètres & gt; Éditeur & gt; Général pour la documentation instantanée de survol.

Conclusion:

Maîtrisez ces fonctionnalités de WebStorm pour améliorer considérablement votre flux de travail de développement angulaire. N'oubliez pas de suivre vos améliorations de productivité à l'aide du rapport de productivité de WebStorm ( AIDE & GT; Guide de productivité ).

(La section FAQS a omis pour la concision, car c'est un ensemble standard de questions et réponses sur les fonctionnalités IDE.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!