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

Webstorm & Angular: 5 premiers conseils de productivité (partie 1)

Cette série en deux parties, parrainée par JetBrains, explore les améliorations de la productivité pour le développement angulaire dans WebStorm. Les experts des développeurs de Google Jurgen Van De Moere et Todd devise partagent leurs idées. Cette première partie, de Jurgen, se concentre sur cinq fonctionnalités clés de la boutique en ligne:

Prise des clés:

• Tirez le parti de CLI angulaire intégré de WebStorm pour rationaliser la création de projet et les ajouts de fonctionnalités, en contournant la ligne de commande.
• Master Efficient Navigation: Utilisez CMD-CLICK / CMD B pour les sauts de définition, et double-décalage pour la boîte de dialogue "Rechercher partout".
• HARCHER La puissance du service de langage angulaire pour l'achèvement du code supérieur, la détection des erreurs et l'assistance des modèles.
• Automatiser le formatage du code pour un style cohérent à l'aide des outils intégrés de WebStorm, adhérant aux paramètres du projet.
• Optimiser les importations sans effort pour éliminer les importations inutilisées, fusionner les importations connexes et maintenir la taille optimale du bundle.

1. Embrassez le cli

Angular intégré

La CLI angulaire, un puissant outil de ligne de commande, est entièrement intégrée dans la ligne de repos. Créer de nouveaux projets via Fichier & gt; New & gt; Projet & GT; Angular CLI , spécifiant l'emplacement du projet. L'ajout de fonctionnalités (composants, services, directives) est tout aussi simple: cliquez avec le bouton droit sur src/app (ou le module pertinent) et sélectionnez new & gt; CLI angulaire . Webstorm gère intelligemment l'intégration des modules.

2. Navigation de niveau pro

naviguez efficacement par votre base de code à l'aide de CMD-Click (ou CMD B) pour passer directement aux définitions. Cela fonctionne pour les composants, les directives, les feuilles de styles, les modèles, les classes et plus encore. Pour les fichiers sans références directes, Double-Shift active «Rechercher partout», permettant un emplacement rapide des fichiers avec des termes de recherche partiels. CMD E fournit un accès rapide aux fichiers récemment modifiés.

3. Déverrouiller le service de langue angulaire

La prise en charge intégrée de WebStorm pour Angular est excellente, importation automatique des modules JavaScript et fournissant des commentaires de type dactylographiques en temps réel. Améliorez-le plus en détail en installant le service de langue angulaire (npm install @angular/language-service --save-dev). L'activer dans Préférences & gt; Langues et frameworks & gt; TypeScript & gt; Utiliser le service TypeScript & gt; Configurer… & gt; Utilisez le service angulaire . Cela améliore considérablement l'achèvement du code dans les modèles et fournit des rapports d'erreur plus précis.

4. Formatage du code sans effort

Maintenir un style de code cohérent avec l'option CMD B (ou un raccourci équivalent). WebStorm formate automatiquement le code sur tous les types de fichiers (modèles, scripts, styles de styles, JSON). Si un fichier tslint.json existe, WebStorm proposera d'appliquer ses paramètres de style. Personnaliser les préférences de mise en forme dans webstorm & gt; Préférences et GT; Éditeur & gt; Style de code .

5. Rationaliser les importations avec l'optimisation

Gardez la taille de votre bundle maigre en optimisant les importations. Ctrl Alt O (ou CMD Shift A & GT; "Optimiser les importations") fusionne automatiquement les importations à partir du même module, supprime les importations inutilisées et reformates les déclarations d'importation.

Conclusion:

La maîtrise de ces fonctionnalités de WebStorm stimule considérablement la productivité de développement angulaire. Restez à l'écoute pour la partie 2 avec les conseils d'experts de Todd Motto! (Les FAQ sur WebStorm et le développement angulaire sont incluses dans l'article d'origine, mais omis ici par concision).

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!