5 extensions Visual studio code pour Angular 2+

5 extensions Visual studio code pour Angular 2+

Introduction

Nous nous retrouvons aujourd’hui pour parler de VS Code.

J’ai découvert cet IDE très récemment (oui je suis en retard sur ce coup là je l’avoue).

Bon je ne vais pas faire dans la demi-mesure : VS Code est juste énorme :

  • Il est réellement très rapide
  • Il marche très bien avec TypeScript
  • Il est totalement gratuit

L’idée de cet IDE est de se limiter aux fonctionnalités de base. Le but étant de pouvoir le customiser comme bon vous semble avec des extensions. Autant vous le dire, il y a beaucoup d’extensions possibles pour VS Code.

Les extensions varient en fonction des technologies, langages ou frameworks que vous voulez utiliser.

Nous allons voir ce qui est pour moi, le top 5 des extensions pour Angular 2 :

Travailler avec TypeScript

TSLint

ext install tslint

Si vous n’utilisez pas déjà TSLint sur votre code, je vous conseille de vous y mettre. Bref ce n’est pas le sujet du jour, nous y reviendrons plus en détails.

Le TSLint permet de détecter les erreurs de code, normalement pour voir ces erreurs, il faut exécuter une commande. L’extension TSLint permet de voir directement les erreurs dans l’IDE, ceci permet un gros gain de temps. Les erreurs sont visibles dans un panel, elles sont également surligner directement dans votre code.

Auto Import

ext install autoimport

Tout peut être importé dans votre projet. Quand on travaille sur un projet avec Angular, il nous arrive très souvent d’écrire quelque chose du genre :

import { BLABLA } from ‘./../blabla’

Cette extension va le faire automatiquement pour vous.

Génération de code Angular

Angular2 TypeScript Snippets

ext install Angular2

Combien de fois avez-vous écris le code pour un composant, ou un service, ou quelque chose permettant de mapper une requête Ajax?

return this.http.get(‘http://monUrl‘)
.map((response: Response) => response.json())

Si vous avez envie de faire des choses plus fun, je vous comprend. C’est pourquoi il peut être utile d’utiliser un Angular code snippets pour gagner du temps. Angular2 TypeScript snippets fournit plusieurs parties de code qui permet de couvrir plusieurs scénarios :

  • Dans le TypeScript, la création d’un composant, service, filter, …
  • Dans le HTML, la génération de *ngFor, ngModel, …

Angular2 TypeScript/HTML Snippets

ext install angular2-snippets

C’est un peu la même chanson que pour le précédent. Il existe pas mal de snippets (14 pour TypeScript et 12 pour HTML). J’ai les deux là installé et j’ai du mal à me décider sur celui que je garde, ils sont bons tous les deux.

Angular2 Files

ext install vscode-angular2-files

Cette extension permet de faire comme la commande ng generate de Angular CLI. Quand vous voulez créer un nouveau fichier, vous pouvez choisir un component, une directive, un pipe, … Le nouveau fichier créé aura le boilerplate de la structure que vous aurez choisi.

 

Conclusion

Nous voilà à la fin de cet article, j’espère que cela vous aura aidé. VSCode est vraiment le meilleur IDE pour développer sur Angular2+ et TypeScript, à l’heure actuelle et à ma connaissance.

A la semaine prochaine pour un nouvel article.

 

Partagez, si vous aimez

Laisser un commentaire

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