Fermer

avril 12, 2018

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



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, Google Developer Experts Jurgen Van de Moere et Todd Motto partagent leur favori

Dans cette première partie, Jurgen partage ses cinq meilleures [5119012] WebStorm caractéristiques personnelles qui lui permettent d'augmenter sa productivité au jour le jour en travaillant avec WebStorm et Angular: [19659004] Utiliser Angulaire CLI de à WebStorm

  • Naviguer comme un pro
  • Profiter de Angular Language Service
  • Formater automatiquement votre code
  • Optimiser vos importations [19659009] Chaque astuce peut augmenter énormément votre productivité de développement, alors creusons-les un peu plus en profondeur un par un.

    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:

     WebStorm et Angular: Créer un nouveau module angulaire

    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:

     WebStorm et Angular: cliquez sur les mots

    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:

     WebStorm et angulaire: Rechercher partout

    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

     WebStorm et Angular: Fichiers récents

    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:

     WebStorm et Angular: recommandations TypeScript

    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:

     WebStorm et Angular: Code complet dans les modèles

    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 … :

     WebStorm et Angular: recommandations de typeScript

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

     WebStorm et Angular: recommandations TypeScript

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

     WebStorm et Angular: erreur d'expression du service de langue angulaire

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

     Erreurs surlignées

    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:

     WebStorm et Angular: formatage automatique

    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:

     WebStorm et Angular: Importer des options de formatage automatique de TS Lint

    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 :

     WebStorm et Angular: Configurer le 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:

     WebStorm et Angular: Optimiser les importations

    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!






  • Source link

    0 Partages