Extension Visual Studio Code pour Angular CLI

Publié le

Notre formateur a publié une extension pour Visual Studio Code qui rend les commandes d’Angular CLI disponibles via une interface graphique. Nous avons traduit pour vous l’article Medium.

Pourquoi cette extension ?

Plus besoin de taper les commandes à la main, vous pouvez maintenant générer vos composants, services et autres schémas via une interface graphique, et gagner du temps.

Fini les erreurs

Vous vous souvenez de toutes ces fois où vous avez fait une faute de frappe dans la commande, et que vous avez ensuite dû supprimer tous les fichiers, retirer tous les imports et recommencer ? C’est fini ! L’extension Angular schematics pour Visual Studio Code vous assurera que la commande est bien formée, et vous aurez une chance de la vérifier avant de la lancer.

Fini les recherches

Vous vous souvenez de toutes ces fois où vous avez cherché de façon hasardeuse dans le wiki du CLI pour trouver de la documentation sur les options avancées ? C’est fini ! L’extension Angular schematics pour Visual Studio Code vous proposera toutes les commandes et options disponibles.

Guide de démarrage

Installez simplement l’extension Angular schematics pour Visual Studio Code depuis l’éditeur.

Ensuite, dans un project intégré à Angular CLI ≥ 5 :

  • faites un clic droit sur un répertoire dans l’explorateur de votre projet,
  • ou ouvrez la Palette de commandes,

puis choisissez une commande « Angular: Generate… » et remplissez les options nécessaires.


Si vous lancez la commande depuis l’explorateur de fichiers, le chemin de destination sera automatiquement configuré.

Angular Schematics

Par défaut, l’extension Angular schematics pour Visual Studio Code supporte (si installé) :

  • @schematics/angular (commandes officielles d’Angular CLI)
  • @angular/material
  • certains autres schémas (@ngrx /schematics,…)

Vous pouvez en ajouter d’autres (voir les instructions dans le README).

Autres fonctionnalités

Vous pouvez aussi configurer des raccourcis claviers et des options par défaut (voir les instructions dans le README).

Support

Si vous rencontrez des problèmes avec cette extension, merci d’ouvrir un ticket sur Github (poster un commentaire ici n’est pas le bon endroit pour le faire).

Découvrez notre formation Angular, animée par l’auteur de cette extension !


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.