mai 24, 2018

Optimisation de votre flux de travail avec des extraits de code Angular 5 et VS Code –

Dans cet article, nous allons nous concentrer sur l'utilisation des extraits Angular 5 dans Visual Studio Code pour améliorer notre flux de travail. Nous commencerons par les bases de l'utilisation et de la création d'extraits. Nous verrons comment utiliser des extraits angulaires pour VS Code dans un projet Angular. Ensuite, nous verrons plus tard comment nous pouvons créer nos propres extraits et les partager avec les autres.

Pour ceux qui maîtrisent un langage de programmation, vous savez à quel point il est ennuyeux de taper le même code encore et encore. Vous finissez par copier et coller des parties de votre code pour épargner à vos doigts l'agonie d'écrire une autre boucle pour

Et si votre éditeur pouvait vous aider à insérer automatiquement ce code commun au fur et à mesure de la frappe? Ce serait génial, non?

Eh bien, vous les connaissez probablement sous la forme de extraits . C'est une fonctionnalité courante dans tous les IDE modernes actuellement disponibles. Même Notepad ++ les prend en charge (mais pas activé par défaut).

Prérequis

Avant de commencer, vous devez installer la dernière version de Visual Studio Code sur votre ordinateur. Nous examinerons également les extraits Angular 5. Avoir au moins une connaissance de base d'Angular sera utile, mais pas nécessaire.

Vous aurez besoin d'utiliser un projet Angular 5 existant ou nouveau afin de tester des snippets. Je suppose que vous avez la dernière version de Node.js, ou au moins une version qui n'est pas plus ancienne que Node.js 6. Voici la commande pour installer l'outil CLI Angular si vous n'avez pas:

 npm install -g @angular / cli

# ou
fil global ajouter @ angular / cli

Extraits de code expliqués

Les extraits de code sont des modèles qui vous permettent d'insérer facilement du code répétitif. Lorsque vous installez VS Code pour la première fois, des snippets pour JavaScript sont préinstallés. Pour les vérifier, ouvrez simplement un fichier JavaScript existant ou créez-en un nouveau dans votre espace de travail et essayez de taper ces préfixes:

log
if
ifelse
forof
settimeout

vous tapez, une liste apparaîtra vous donnant des options pour compléter automatiquement votre code. Dès que l'extrait de droite est en surbrillance, appuyez simplement sur et entrez pour insérer l'extrait. Dans certains cas, tels que log et pour vous devrez peut-être appuyer sur la touche bas pour sélectionner le bon extrait.

Vous vous demandez probablement où ces fragments JavaScript arrivent d'exactement. Eh bien, vous pouvez trouver les définitions exactes dans ces endroits:

Windows – C: Program Files Microsoft VS Code ressources app extensions javascript snippets javascript.json
Linux – /usr/share/code/resources/app/extensions/javascript/snippets/javascript.json

Nous verrons comment nous pouvons créer nos propres extraits, mais examinons d'abord quelques fragments de code tiers.

Comment utiliser des extraits

Au moment de la rédaction de ce document, le Visual Studio Marketplace répertoriait 934 extensions dans la catégorie des extraits. Vous trouverez des extraits pour chaque langage de programmation créé, y compris Pascal! Cela signifie que vous devriez probablement vérifier le marché avant de créer vos propres extraits. Comme mentionné précédemment, nous examinerons les extraits Angular 5. Recherchez un projet Angular 5 existant dans votre espace de travail ou créez-en un nouveau:

 ng new snippets-demo

Une fois le projet configuré, ouvrez-le dans VS Code. Ensuite, cliquez sur l'icône de l'extension dans la barre d'activités pour ouvrir le panneau Extensions . Rechercher Angulaire 5 . Les résultats de la recherche doivent énumérer plusieurs extensions angulaires. Installez celui qui a l'auteur 'John Papa' . Une fois l'installation terminée, cliquez sur le bouton de rechargement pour redémarrer VS Code. Cette extension Angular 5 snippets contient plus de 50 extraits. Environ 70% des extraits sont écrits pour TypeScript, et le reste est principalement pour HTML. Il y a aussi des extraits de Docker

Angular 5 Snippets

Essayons quelques-uns de ces extraits Angular 5. Créez un nouveau fichier appelé app.service.ts dans le dossier de l'application. Ouvrez le fichier et commencez à taper "a-service". Une liste déroulante apparaîtra au cours de la frappe. Même avant que vous ayez fini de taper, vous devriez avoir l'option correcte en surbrillance. Appuyez sur entrez pour insérer le modèle. Une fois l'extrait entré, notez que le nom de la classe générée est en surbrillance.

angular-service

Il vous suffit de taper "App" et le nom complet de la classe indiquera "AppService" . Assez pratique, non? Essayons quelque chose de différent. Supprimez l'intégralité du code dans app-service.ts et tapez ce préfixe:

 a-service-httpclient

Vous devez obtenir une définition de classe de service, y compris les importations et l'injection HttpClient dans le constructeur de classe. Comme auparavant, renommez le nom de la classe en AppService .

Ensuite, utilisons un autre extrait pour définir une requête HTTP GET. Définissons une méthode GET vide. Pour ce morceau de code, vous devez taper; ne pas copier-coller:

 getPosts (): Observable  {

}

Lorsque vous commencez à taper "Observable", une option d'extrait s'affiche. Appuyez simplement sur entrez et la classe Observable sera automatiquement importée pour vous

Observable Snippet

Ensuite, utilisons un autre extrait pour compléter la fonction. Commencez à taper ce préfixe: "a-httpclient-get". En appuyant sur entrez insérera cet extrait pour vous:

 return this.httpClient.get ('url');

Changez l'URL en un chemin imaginaire – disons / posts . Évidemment, notre code ne sera pas exécuté, car nous n'avons pas configuré d'API. Corrigez-le en ajoutant après pour obtenir . La méthode complète ressemble maintenant à ceci:

 getPosts (): Observable  {
  renvoie this.httpClient.get  ('/ posts');
}

Maintenant que nous en savons un peu plus sur l'utilisation des snippets Angular 5, voyons comment ils sont créés

Comment créer des snippets angulaires 5

La syntaxe utilisée dans Visual Studio Code est la même syntaxe définie dans TextMate . En fait, vous pouvez copier un extrait de TextMate et cela fonctionnera dans VS Code. Cependant, gardez à l'esprit que la fonction "interpolated shell code" n'est pas supportée dans VS Code.

La manière la plus simple de créer un snippet est d'ouvrir Preferences: Configure User Snippet via la palette de commandes ctrl + décalage + p ). Sélectionnez-le, puis choisissez une langue pour laquelle vous souhaitez créer une syntaxe. En créons un maintenant pour TypeScript. Une fois que vous avez ouvert typescript.json placez ce modèle d'extrait directement dans les accolades d'ouverture et de fermeture:

 "Print Hello World": {
  "préfixe": "bonjour",
  "corps": [
    "console.log('Hello World!');"
  ],
  "description": "Imprimer Hello World à la console"
}

Permettez-moi de passer en revue la structure du modèle:

"Print Hello World" – titre du modèle d'extrait.
prefix – mot clé trigger pour l'extrait.
body – le code que l'extrait va insérer.
description – inutile d'expliquer celui-ci. modèle d'extrait le plus simple que vous pouvez écrire. Après avoir enregistré le fichier, créez un manuscrit dactylographié vierge et testez le préfixe bonjour . Une liste pop devrait apparaître au fur et à mesure que vous tapez

Il vous suffit d'appuyer sur pour entrer une fois votre extrait mis en surbrillance. Vous devriez avoir ce code inséré pour vous:
```
 console.log ('Hello World');
```
Génial, non? Nous allons maintenant rendre notre modèle d'extrait interactif en insérant quelques tabulations .
```
 "Imprimer Hello World": {
  "préfixe": "bonjour",
  "corps": [
    "console.log('Hello $1!');",
    "$2"
  ],
  "description": "Imprimer Hello World à la console"
}
```
Réessayez maintenant votre préfixe. Cette version vous permet d'insérer votre nom. Une fois que vous avez fini de taper, appuyez simplement sur la touche tab et votre curseur s'arrêtera sur une nouvelle ligne. $ 0 indique l'arrêt de tabulation final. Vous pouvez utiliser 1 $ et plus pour créer plusieurs arrêts d'onglets. Mais que faire si nous voulions insérer une valeur par défaut? Nous pouvons utiliser un espace réservé qui ressemble à ceci: $ {1: World} . Voici le modèle complet:
```
 "Print Hello World": {
  "préfixe": "bonjour",
  "corps": [
    "console.log('Hello ${1:World}!');",
    "$0"
  ],
  "description": "Imprimer Hello World à la console"
}
```
Maintenant, essayez à nouveau l'extrait. Vous pouvez soit changer la valeur par défaut, soit sortir pour laisser tel quel. Donnons maintenant aux développeurs une liste de choix à choisir:

Pour implémenter la liste de choix, remplacez simplement la ligne console.log comme ceci:
```
 ] ...
"console.log ('Bonjour $ {1 | Monde, Terre, Terra |}!');",
...
```
Voilà assez d'exemples pour l'instant. Je n'ai pas couvert les noms de variables et les transformations. Pour en savoir plus, consultez Les extraits angulaires de John Papa sur GitHub. Voici un aperçu:
```
 "Angular HttpClient Service": {
    "préfixe": "a-service-httpclient",
    "description": "Service angulaire avec HttpClient",
    "corps": [
      "import { Injectable } from '@angular/core';",
      "import { HttpClient } from '@angular/common/http';",
      "import { catchError } from 'rxjs/operators';",
      "",
      "@Injectable()",
      "export class ${1:ServiceName}Service {",
      "tconstructor(private httpClient: HttpClient) { }",
      "t$0",
      "}"
    ]
  }
```
Ceci est le modèle que nous avons utilisé précédemment pour créer le service HttpClient . Je vous recommande de parcourir le projet, car il contient un certain nombre de modèles très utiles que vous pouvez apprendre.
Résumé
Maintenant que vous avez appris comment créer des extraits, vous voulez probablement les partager avec leur équipe membres, amis ou le public. Le moyen le plus simple de partager les extraits avec vos coéquipiers consiste à créer un dossier .vscode à la racine de votre projet. Créez un sous-dossier appelé snippets et placez tous vos modèles là-bas, comme ceci:

Assurez-vous de valider ce dossier pour que tout le monde le trouve dans le référentiel. Pour partager avec vos amis et le public, vous avez un certain nombre d'options à votre disposition:
- vous pouvez télécharger vos extraits sur un serveur public tel que Google Drive, Dropbox ou même Pastebin.
- vous pouvez publier vos extraits comme extension sur le VS Code Marketplace .
J'espère que cette brève introduction au travail avec des extraits facilitera votre vie de programmation.

J'écris du code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.