Utiliser Angular avec Visual Studio Code

Ouvrir un projet Angular

• Dans VS Code, on ouvre toujours un dossier, pas un fichier isolé : menu Fichier > Ouvrir le dossier (File > Open Folder), puis sélectionnez le dossier du projet.
• Depuis un terminal placé dans le dossier du projet, la commande suivante ouvre directement le projet :

cd C:\projets\ma-boutique
code .

• Important : ouvrez le dossier racine du projet, celui qui contient angular.json et package.json. Si vous ouvrez le dossier parent (C:\projets) ou un sous-dossier (src), les commandes ng du terminal et l'extension Angular ne fonctionneront pas correctement.
• À la première ouverture, VS Code peut demander si vous faites confiance aux auteurs du dossier : répondez Oui pour vos propres projets, sinon les extensions et le terminal sont limités.

Le terminal intégré

• Ouvrez le terminal avec Ctrl + ` (la touche à gauche du 1 sur un clavier AZERTY, avec Alt Gr + 7 selon les claviers) ou par le menu Terminal > Nouveau terminal.
• Le terminal s'ouvre automatiquement dans le dossier du projet: les commandes ng et npm s'y lancent directement.
• Bonne pratique : utilisez deux terminaux. Le premier exécute ng serve en permanence ; le second sert aux autres commandes (ng generate, git…). Cliquez sur + dans le panneau du terminal pour en ajouter un, ou sur l'icône de division pour les afficher côte à côte.

# Terminal 1
ng serve -o

# Terminal 2
ng g c produits/liste
git status

• Sous Windows, le terminal par défaut est PowerShell. S'il affiche « l'exécution de scripts est désactivée sur ce système » en tapant ng, consultez la leçon Erreur exécution de script sur Visual Studio Code, ou choisissez l'Invite de commandes comme terminal par défaut : Ctrl + Maj + P, puis Terminal: Select Default Profile et Command Prompt.

Installer les extensions nécessaires

• L'une des forces de VS Code est le nombre d'extensions disponibles pour faciliter le développement dans chaque langage.
• Pour les afficher, allez dans le menu Affichage (View) puis cliquez sur Extensions, ou utilisez le raccourci Ctrl + Maj + X.

• Tapez le nom d'une extension dans le champ de recherche, sélectionnez-la, puis cliquez sur le bouton Installer à droite, sous le titre de l'extension.
• Le pack Angular Essentials regroupe plusieurs extensions en une seule installation. Il est plus clair d'installer les extensions une par une, pour savoir à quoi sert chacune.

• Les extensions conseillées pour un projet Angular :

• On peut aussi installer une extension depuis le terminal avec son identifiant :

code --install-extension Angular.ng-template
code --install-extension esbenp.prettier-vscode

• Extensions recommandées par le projet : ng new crée un dossier .vscode/ qui contient un fichier extensions.json. À l'ouverture du projet, VS Code propose d'installer les extensions qui y sont listées. Vous pouvez y ajouter les vôtres pour que toute la classe ait les mêmes outils :

{
  "recommendations": [
    "angular.ng-template",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "usernamehw.errorlens"
  ]
}

1. Angular Language Service en action

   • Cette extension relie le template HTML à la classe TypeScript du composant. Dans le template, elle :
     • propose les propriétés et méthodes du composant dès que vous tapez {{ ou un nom de propriété ;
     • souligne en rouge une propriété qui n'existe pas, avant même la compilation, et propose une correction ;
     • permet d'aller à la définition d'une propriété ou d'un composant avec F12 (ou Ctrl + clic) ;
     • affiche le type d'une expression au survol de la souris ;
     • reconnaît les balises des composants (<app-liste />), les directives et les pipes.

1. Configurer VS Code pour Angular

   • Les réglages se modifient par le menu Fichier > Préférences > Paramètres (Ctrl + ,), ou directement dans un fichier JSON.
   • Pour que les réglages s'appliquent au projet et soient partagés sur GitHub, créez le fichier .vscode/settings.json à la racine du projet :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "editor.linkedEditing": true,
  "workbench.iconTheme": "material-icon-theme"
}

• editor.formatOnSave: formate le fichier à chaque enregistrement.
• editor.defaultFormatter: utilise Prettier pour formater.
• editor.tabSize: indentation de 2 espaces, la convention des projets Angular.
• files.autoSave: enregistre automatiquement après une courte pause ; ng serve recharge alors la page sans que vous appuyiez sur Ctrl + S.
• editor.linkedEditing: modifie en même temps la balise ouvrante et la balise fermante en HTML.
• workbench.iconTheme: active le thème d'icônes Material Icon Theme.

Écrire plus vite

• Emmet est intégré à VS Code et fonctionne dans les templates Angular : tapez une abréviation puis Tab.

<!-- Abréviation tapée -->
ul.liste>li.produit*3

<!-- Résultat après Tab -->
<ul class="liste">
  <li class="produit"></li>
  <li class="produit"></li>
  <li class="produit"></li>
</ul>

• Les raccourcis clavier les plus utiles (Windows et Linux ; sous macOS, remplacez Ctrl par Cmd) :

1. Git et GitHub dans VS Code

   • Le panneau Contrôle de code source (Ctrl + Maj + G) affiche les fichiers modifiés depuis le dernier commit, avec une lettre : M (modifié), U (nouveau, non suivi), D (supprimé).
   • Cliquez sur un fichier pour voir ses modifications ligne par ligne, avant/après.
   • Pour faire un commit : saisissez un message dans le champ en haut du panneau, puis cliquez sur Valider (Commit).
   • Pour envoyer sur GitHub : cliquez sur Synchroniser les modifications (Sync Changes). Si le projet n'a pas encore de dépôt distant, le bouton Publier sur GitHub (Publish to GitHub) crée le dépôt et y envoie le projet, après connexion à votre compte GitHub.
   • Dans l'Explorateur, les fichiers modifiés apparaissent en couleur, et la barre d'état indique la branche courante.
   • Conseil : le terminal reste indispensable pour comprendre ce que fait Git. Utilisez le panneau pour visualiser les modifications et les commandes git pour apprendre.

2. Déboguer une application Angular

   • ng new génère aussi le fichier .vscode/launch.json, qui configure le débogueur de VS Code pour Angular. Il contient notamment cette configuration :

{
  "name": "ng serve",
  "type": "chrome",
  "request": "launch",
  "preLaunchTask": "npm: start",
  "url": "http://localhost:4200/"
}

• Pour déboguer :
  • arrêtez le ng serve déjà lancé (la configuration le lance elle-même) ;
  • dans un fichier .ts, cliquez à gauche d'un numéro de ligne : un point rouge (point d'arrêt) apparaît ;
  • appuyez sur F5 : VS Code lance ng serve, puis ouvre une fenêtre de Chrome reliée au débogueur ;
  • quand le code atteint le point d'arrêt, l'exécution s'arrête : survolez les variables pour voir leur valeur, et avancez pas à pas avec F10 (ligne suivante) ou F11 (entrer dans la fonction). F5 reprend l'exécution.
• C'est beaucoup plus efficace que d'ajouter des console.log() partout.

Erreurs fréquentes