Les extensions Visual Studio Code pour les développeurs d’Angular

Visual Studio Code est l’un des éditeurs de code le plus utilisé dans le monde par les développeurs. De plus, avec Visual Studio Code, tous (je dis bien TOUS) les développeurs peuvent l’utiliser quel que soit le langage de programmation qu’il va utilisé. Et cette notoriété est renforcé grâce aux divers fonctionnalités que propose l’outil pour les développeurs. Et grâce aux extensions qu’offre Visual Studio Code, les fonctionnalités se trouvent être décuplés.

Dans cette article, nous allons parler de ces extensions. Mais plus particulièrement, des extensions que les développeurs Angular vont avoir besoin. Ainsi, les extensions que nous allons voir seront :

• Path Intellisense;
• Angular snippets;
• Angular Language Service;
• Angular2-Switcher;
• Angular2-Inline;
• Angular Files;
• REST Client;
• JSON to TS;
• ESLint
• Material Icon Theme.

1. Path Intellisense

Dans un projet de développement, nous sommes amenés à utiliser plusieurs fichiers. De ce fait, il est difficile de se souvenir de tous les fichiers. Certe, il y a le navigateur de fichier sur la partie droite de Visual Studio Code, mais ce n’est pas toujours évident. Ainsi, pour éviter ce problème, et faciliter la vie de développeur, il y a l’extension Path Intellisense que l’on peut installer. Cet extension permet de compléter automatiquement le nom du fichier. Et lorsque l’on commence à taper, il suggère des chemins de fichiers pour aider à ajouter facilement le fichier souhaité.

2. Angular Snippets

Angular Snippets est, de notre point de vue, le plus populaire des extensions de Visual Studio Code. Cet extensions nous fait gagner du temps puisqu’il ajoutete des snippets pour Angular, TypeScript et HTML. De plus, nous pouvons ajouter des raccourcis clavier pour activer directement les snippts dans Visual Studio Code.

3. Angular Language Service

En troisième lieu, nous allons voir l’Angular Language Service. Cet extension est le plus important des extensions pour les développeurs Angular dans Visusal Studio Code. Cet extension fournit des fonctionnalités comme :

• le « code completions » d’Angular ;
• les messages de diagnostique d’Angular;
• les infos rapides ;
• aller à la définition.

4. Angular 2 Switcher

Avec l’Angular2-Switcher, nous pouvons naviguer facilement entre les différents fichiers CSS, ts, HTML. Et surtout entre les fichiers qui sont propre à Angular. De plus, en utilisant les raccourcis clavier, nous pouvons naviguer switcher entre les différents fichiers plus rapidement.

5. Angular 2 Inline

Par la suite, nous allons voir l’extension Angular2-Inline. Cet extension est très utile pour les fichiers CSS et HTML pour les composants qui travaille Angular. En effet, il fournit des surlignages de syntaxe et ainsi permet une lecture plus facile des codes. De plus, il aide au « code completion ». Mais aussi, il donne des informations à propos des balises HTML quand on survole ces derniers. Et enfin, quand on utilise dans Visual Studio code le caractère  » `  » (backtick) pour définir un template en ligne ou un template de feuille de style, l’extension Angular va être utilisé pour traiter le contenu.

6. Angular Files

Quand on crée un composant Angular dans un projet, l’extension Angular Files va créer le code prédéfini correspondant pour tous les fichiers à l’intérieur du composant. De ce fait, il n’est plus nécessaire d’écrire les codes à partir de zéro pour tout le composant créé.

7. REST Client

Au jour d’aujourd’hui, toutes les applications qui sont développés utilise REST pour échanger les données. Et plutôt que d’utiliser un outil tiers (comme postman) pour voir ces échanges, nous pouvons utiliser un extension dans Visual Studio Code lui-même. C’est le REST Client. Il permet d’envoyer des requêtes HTTP. De plus, il permet d’afficher la réponse de la requête directement. Ainsi, il empêche de basculer entre un outil tiers et l’éditeur de code pour voir le résultat.

8. JSON to TS

Visual Studio Code donne un extension pour convertir un objet JSON en interfaces TypeScript. Cet extension est très utile quand vous développé avec Angular et que vous échangez des données avec d’autres applications, serveurs ou autres. En un mot, JSON to TS permet de créer des POJOs à partir de JSON.

9. ESLint

ESLint aide à améliorer la lisibilité du code, la maintenabilité et à corriger les erreurs fonctionnelles. Une fois que vous l’avez installé, il créera une ligne ondulée sous la section de code où il y a des problèmes et affichera des avertissements et des erreurs en la survolant. Vous pourrez voir une liste des erreurs détectées et les corriger.

10. Material Icon Theme

Cette extension est optionnelle mais très esthétique cependant. Il fournit différentes icônes pour les fichiers et les dossiers. Vous pouvez personnaliser les couleurs de ces icônes, selon vos besoins. il utilise la bibliothèque Material Design de Google pour insérer des icônes.

Conclusion sur les extensions Visual Studio Code pour les développeurs d’Angular

Toutes les extensions qui sont mentionnés ici sont des extensions que nous utilisons au jour le jour pour nos développement. Ce ne sont pas les seuls extensions qui fournissent les fonctionnalités qui nous intéresse. Vous pouvez en trouver d’autres. Mais ces extensions sont données ici à titre d’information pour les nouveaux utilisateurs de Visual Studio Code et qui veut développer avec Angular.