Boosting votre flux de travail avec des extraits angulaires 5 et du code vs

Les extraits de code angulaire 5 dans le code Visual Studio améliorent considérablement la productivité et réduisent la nécessité d'écrire du code en double. Le marché VS Code propose une variété d'extraits de code pour différents langages de programmation, y compris Angular 5. Ces extraits de code peuvent être installés et utilisés dans n'importe quel projet Angular 5. Les utilisateurs peuvent créer leurs propres extraits de code dans VS Code en utilisant la même syntaxe définie dans TextMate. Ces extraits de code personnalisés peuvent être interactifs en insérant des arrêts d'onglet, des espaces réservés et des listes de sélection. Vous pouvez partager des extraits de code avec les membres de l'équipe en créant un dossier .vscode dans le répertoire racine du projet et en le soumettant au référentiel. Pour un partage plus répandu, les extraits peuvent être téléchargés sur des serveurs publics ou publiés sous forme d'extensions sur VS Code Marketplace.

Cet article se concentre sur la façon d'utiliser des extraits de code angulaire 5 dans le code Visual Studio pour améliorer le flux de travail. Nous couvrirons d'abord les bases de l'utilisation et de la création d'extraits de code. Nous apprendrons à utiliser l'extrait de code angulaire de VS Code dans un projet angulaire. Nous apprendrons ensuite à créer nos propres extraits de code et à les partager avec les autres.

à quel point il est ennuyeux pour quiconque maîtrise un langage de programmation pour taper le même code encore et encore. Finalement, vous recommencerez à copier et à coller des extraits de code pour éviter la douleur d'écrire à nouveau la boucle pour vos doigts.

Ce serait formidable si votre éditeur pouvait vous aider automatiquement à insérer ce code commun lorsque vous tapez, non?

ok, vous savez probablement qu'ils sont appelés extraits de code. Il s'agit d'une fonctionnalité courante dans tous les ides modernes. Même le bloc-notes les prend en charge (bien que non activé par défaut).

Prérequis

Avant de commencer, vous devez installer la dernière version du code Visual Studio sur votre ordinateur. Nous présenterons également des extraits de code angulaires 5. Donc, au moins, avoir les bases d'Angular aidera, mais pas nécessairement.

Vous devez utiliser un projet Angular 5 existant ou nouveau pour expérimenter les extraits de code. Je suppose que vous avez la dernière version de Node.js, ou du moins Node.js 6 ou plus. Si vous ne l'avez pas déjà fait, voici les commandes pour installer l'outil CLI angulaire:

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

Explication détaillée des extraits de code

Les extraits de code sont des modèles qui peuvent facilement insérer du code en double. Lorsque le code vs est installé pour la première fois, il préinstalle les extraits de code JavaScript. Pour les afficher, ouvrez simplement un fichier JavaScript existant ou créez un nouveau fichier dans l'espace de travail et essayez de taper le préfixe suivant:

• log
• si
• ifelse
• Forof
• setTimeout

Lorsque vous tapez, une liste contextuelle apparaîtra, vous donnant la possibilité de saisir automatiquement votre code. Une fois que l'extrait correct est mis en surbrillance, appuyez simplement sur la touche Entrez pour insérer l'extrait. Dans certains cas, tels que le journal et pour, vous devrez peut-être appuyer sur la touche de flèche vers le bas pour sélectionner l'extrait de code correct.

Vous vous demandez peut-être d'où viennent ces extraits de code JavaScript. Eh bien, vous pouvez trouver la définition exacte à:

• Windows - C: Program Filesmicrosoft vs coderesourcesapPExtensionsJavascriptsNippetsjavascript.json
• Linux - / USR / Share / Code / Resources / App / Extensions / JavaScript / Snippets / Javascript.json

Nous examinerons comment créer nos propres extraits de code, mais explorons d'abord quelques extraits de code tiers.

comment utiliser des extraits de code

Au moment de la rédaction, le Visual Studio Marketplace répertorie 934 extensions dans la catégorie des extraits de code. Vous trouverez des extraits de code écrits pour chaque langage de programmation créé (y compris Pascal!)! Cela signifie que vous devriez probablement vérifier le marché avant de créer votre propre extrait de code. Comme mentionné précédemment, nous présenterons des extraits de code angulaires 5. Trouvez un projet Angular 5 existant dans votre espace de travail, ou créez un nouveau:

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

Lorsque le projet est configuré, ouvrez-le en code vs. Ensuite, cliquez sur l'icône d'extension dans la barre d'activité pour ouvrir le panneau d'extension. Recherchez angulaire 5. Les résultats de la recherche doivent répertorier plusieurs extensions angulaires. Installez l'extension rédigée par "John Papa". Une fois l'installation terminée, cliquez sur le bouton Recharger pour redémarrer le code. Cette extension Angular 5 Snippet contient plus de 50 extraits de code. Environ 70% des extraits sont écrits pour dactylographie, et la plupart des autres sont écrits pour HTML. Il y a aussi quelques extraits de code Docker.

Essayons des extraits angulaires à 5 code. Créez un nouveau fichier nommé app.service.ts dans le dossier de l'application. Ouvrez le fichier et commencez à taper "A-Service". Au fur et à mesure que vous tapez, une liste contextuelle apparaît. Vous auriez dû mettre en évidence les options correctes avant même de terminer la saisie. Appuyez sur la touche Entrez pour insérer le modèle. Après être entré dans l'extrait de code, notez que le nom de classe généré est mis en surbrillance afin que vous puissiez le modifier.

Tapez simplement "App" et le nom de la classe entier apparaîtra comme "AppService". Très pratique, non? Essayons différentes approches. Supprimez tout le code dans App-Service.ts et saisissez le préfixe suivant:

<code>ng new snippets-demo</code>

Vous devez obtenir une définition de classe de service qui inclut les importations dans le constructeur de classe et l'injection HTTPClient. Tout comme avant, renommez le nom de la classe à AppService.

Ensuite, utilisons un autre extrait de code pour définir la demande HTTP GET. Définissons une méthode de Get vide. Pour ce code, vous devez taper; ne pas copier et coller:

<code>a-service-httpclient</code>

Lorsque vous commencez à taper "observable", son option de code de code apparaîtra. Appuyez simplement sur la touche Entrez et la classe observable sera importée automatiquement.

Ensuite, utilisons un autre extrait de code pour terminer la fonction. Commencez à taper le préfixe suivant: "a-httpclient-get". Appuyez sur la touche Entrée Insérez cet extrait de code pour vous:

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

Modifiez l'URL en un chemin de fiction - pour l'exemple / les messages. De toute évidence, notre code ne s'exécutera pas parce que nous n'avons pas encore configuré aucune API. Corrigez-le en ajoutant après avoir obtenu. La méthode complète est maintenant illustrée ci-dessous.

<code>ng new snippets-demo</code>

Maintenant que nous avons appris à utiliser des extraits de code angulaires, voyons comment ils sont créés.

Comment créer un extrait angulaire de code 5

La syntaxe utilisée dans Visual Studio Code est la même que la syntaxe définie dans TextMate. En fait, vous pouvez copier l'extrait de code depuis Textmate et il s'exécutera en code vs. Cependant, n'oubliez pas que le code VS ne prend pas en charge la fonctionnalité "Code de shell interpolate".

La façon la plus simple de créer un extrait de code est d'ouvrir "Préférences: configurer des extraits de code utilisateur" via le panneau de commande ( Ctrl Shift p ) Sélectionnez-le et sélectionnez la langue pour laquelle vous souhaitez créer la syntaxe. Créons-en un pour TypeScript maintenant. Après ouvrir TypeScript.json, placez ce modèle d'extrait de code dans les supports de début et de fin:

<code>a-service-httpclient</code>

Permettez-moi d'introduire la structure du modèle:

• "Imprimer Hello World" - le titre du modèle de code d'extrait de code. Vous pouvez ajouter n'importe quel titre comme vous le souhaitez.
• Préfixe - Mot-clé Trigger pour l'extrait de code.
• Body - Le code que l'extrait de code insérera.
• Description - Aucune explication requise.

Il s'agit essentiellement de l'extrait le plus simple que vous pouvez écrire. Après enregistrer le fichier, créez un type de type vide et testez le préfixe Hello. Une liste pop-up doit apparaître lors de la saisie.

Une fois que votre extrait de code est mis en surbrillance, appuyez simplement sur la touche Entrez . Vous devriez avoir inséré le code suivant:

<code>getPosts(): Observable<any> {
}
</any></code>

génial, non? Maintenant, faisons interactif notre modèle d'extrait de code en insérant certains caractères d'arrêt d'onglet.

<code>return this.httpClient.get('url');
</code>

essayez à nouveau votre préfixe maintenant. Cette version vous permet d'insérer votre nom. Une fois que vous avez terminé la saisie, appuyez simplement sur la touche de tabulation et le curseur restera sur la nouvelle ligne. 0 $ indique le caractère d'arrêt final de l'onglet. Vous pouvez utiliser des nombres de 1 $ et plus grands pour créer plusieurs caractères d'arrêt d'onglet. Mais que se passe-t-il si nous voulons insérer la valeur par défaut? Nous pouvons utiliser l'espace réservé comme indiqué ci-dessous: $ {1: world}. Voici le modèle complet:

<code>getPosts(): Observable<any> {
  return this.httpClient.get<any>('/posts');
}
</any></any></code>

essayez à nouveau l'extrait de code maintenant. Vous pouvez modifier la valeur par défaut ou ignorer la valeur par défaut. Passons maintenant une liste de choix pour les développeurs:

Pour implémenter la liste de sélection, remplacez simplement la ligne Console.log comme suit:

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

Ces exemples sont actuellement suffisants. Je n'ai pas introduit de noms de variables et de conversions. Pour en savoir plus, consultez l'extrait de code angulaire de John Papa sur GitHub. Voici un aperçu:

<code>ng new snippets-demo</code>

Il s'agit du modèle que nous avons utilisé pour créer le service HTTPClient. Je vous recommande de parcourir le projet car il contient de nombreux modèles très utiles que vous pouvez apprendre.

Résumé

Maintenant que vous avez appris à créer des extraits de code, vous voudrez peut-être les partager avec les membres de l'équipe, les amis ou le public. La façon la plus simple de partager des extraits de code avec vos coéquipiers est de créer un dossier .vscode à la racine de votre projet. Créez un sous-dossier nommé extrait et placez tous les modèles comme suit:

Assurez-vous de soumettre ce dossier afin que tout le monde puisse le trouver dans le référentiel. Pour partager avec vos amis et le public, vous pouvez utiliser une variété d'options:

• Vous pouvez télécharger des extraits de code sur des serveurs publics tels que Google Drive, Dropbox et même Pastebin.
• Vous pouvez publier des extraits de code comme extensions sur le marché des codes VS.

J'espère que cette brève introduction à l'utilisation d'extraits de code vous aidera à simplifier votre programmation!

FAQ sur l'amélioration de la productivité avec des extraits de code angulaires dans le code vs

Quels sont les extraits angulaires de code 5 et comment améliorent-ils la productivité dans le code vs?

Les extraits angulaires 5 sont des extraits prédéfinis qui peuvent être facilement insérés dans la base de code dans le code Visual Studio (Code vs). Ils sont conçus pour gagner du temps et augmenter la productivité en réduisant la nécessité d'écrire du code en double. Par exemple, si vous utilisez souvent une structure de composants angulaires spécifique, vous pouvez en créer un extrait et l'utiliser en cas de besoin. De cette façon, vous pouvez vous concentrer davantage sur la logique de votre application que la rédaction du code de la bail.

Comment installer des extraits de code angulaires 5 dans le code vs?

Pour installer des extraits de code angulaires dans le code vs, vous devez accéder à la vue d'extension (Ctrl Shift X), rechercher des "extraits angulaires", puis installer l'extension. Une fois l'installation terminée, vous pouvez commencer à utiliser des extraits de code en tapant le préfixe des extraits de code dans votre code et en sélectionnant les extraits de code dans la liste des suggestions.

Puis-je créer mon propre extrait de code dans le code vs?

Oui, vous pouvez créer vos propres extraits de code dans le code vs. Pour ce faire, accédez au fichier & gt; Vous pouvez spécifier le préfixe, le corps et la description de l'extrait de code.

Comment utiliser des extraits de code angulaires 5 dans le code vs?

Pour utiliser des extraits de code angulaires dans le code vs, il vous suffit de saisir le préfixe de l'extrait de code dans le code et de sélectionner l'extrait de code dans la liste des suggestions. L'extrait de code sera ensuite inséré dans la position du curseur. Vous pouvez également utiliser la touche de tabulation pour naviguer entre les espaces réservés dans un extrait de code.

Quels sont les extraits de code angulaires 5 utiles?

Il existe de nombreux extraits de code angulaires 5 utiles, tels que "ngFor" pour créer des boucles, "ngif" pour ajouter des instructions conditionnelles, "ngModel" pour la liaison bidirectionnelle des données et "ngComponent". Ces extraits de code peuvent considérablement accélérer votre processus de codage.

Angular 5 Comment les extraits de code se comparent-ils aux autres extraits de code?

Les extraits de code angulaire 5 sont conçus spécifiquement pour le développement angulaire dans le code vs. Ils fournissent un ensemble de structures de code prédéfinies couramment utilisées dans les applications angulaires, ce qui les rend plus efficaces et pratiques que les extraits de code courants.

Puis-je utiliser des extraits de code angulaires 5 pour d'autres versions d'Angular?

Alors que les extraits angulaires 5 de code sont conçus pour Angular 5, bon nombre de ces extraits de code peuvent également être utilisés dans d'autres versions d'Angular. Cependant, il peut y avoir des différences de syntaxe et de fonctionnalités, il est donc recommandé d'utiliser des extraits de code conçus spécifiquement pour votre version angulaire.

Y a-t-il une limitation à l'utilisation d'extraits de code angulaire à 5 code dans le code vs?

Bien que les extraits de code angulaire 5 peuvent améliorer considérablement votre productivité, ils ne remplacent pas la compréhension du code sous-jacent. Il est important de savoir ce que fait chaque extrait de code et comment cela fonctionne pour les utiliser efficacement.

Comment utiliser des extraits de code angulaires 5 dans le code vs pour améliorer mon flux de travail?

En plus d'utiliser des extraits de code angular 5, vous pouvez améliorer votre flux de travail en utilisant d'autres fonctionnalités de code vs, telles que Intellisense pour l'achèvement du code, les outils de débogage pour le dépannage et Git pour le contrôle de version intégrée.

Où puis-je trouver plus de ressources pour les extraits de code angulaires dans le code vs?

Vous pouvez trouver plus de ressources sur les extraits de code angulaires 5 dans le code vs dans la documentation officielle vs du code, la documentation angulaire et divers tutoriels et forums en ligne. Ces ressources peuvent vous fournir des informations plus détaillées et des exemples pratiques sur la façon d'utiliser efficacement les extraits angulaires de code.

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!