Utiliser NestJS avec Visual Studio Code (extensions, débogage)

Ouvrir le projet

Ouvrez toujours le dossier racine du projet (celui qui contient package.json) : Fichier → Ouvrir le dossier, ou depuis le terminal :

cd api-stagiaires
code .

Le terminal intégré s'ouvre avec Ctrl+ù (clavier AZERTY) ou Ctrl+`. Vous pouvez y ouvrir plusieurs onglets : un pour npm run start:dev, un autre pour Git et la CLI.

Les extensions recommandées

Le support de TypeScript est intégré à VS Code : autocomplétion, navigation (F12 pour aller à la définition), renommage (F2) et imports automatiques fonctionnent sans extension.

Formater et corriger à l'enregistrement

Créez le fichier .vscode/settings.json à la racine du projet :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative"
}

À chaque Ctrl+S, le code est mis en forme, les erreurs ESLint corrigibles sont réparées et les imports inutiles supprimés. Vous pouvez aussi recommander les extensions à toute l'équipe avec .vscode/extensions.json:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "humao.rest-client",
    "usernamehw.errorlens"
  ]
}

Déboguer avec des points d'arrêt

Plutôt que de multiplier les console.log, le débogueur permet de mettre le programme en pause sur une ligne et d'inspecter les variables.

Un point d'arrêt met l'exécution en pause : on lit les variables et on avance pas à pas.

Méthode 1 : le terminal de débogage (la plus simple)

1. Ouvrez la palette de commandes (Ctrl+Maj+P) et choisissez Debug: JavaScript Debug Terminal.
2. Dans ce terminal, lancez npm run start:dev.
3. Cliquez dans la marge à gauche d'une ligne de app.service.ts: un point rouge apparaît.
4. Ouvrez http://localhost:3000: l'exécution s'arrête sur la ligne et VS Code affiche les variables.

Méthode 2 : un fichier launch.json

Lancez npm run start:debug dans un terminal normal, puis attachez le débogueur avec cette configuration (.vscode/launch.json) et F5 :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attacher à NestJS",
      "port": 9229,
      "restart": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

"restart": true rattache automatiquement le débogueur après chaque redémarrage de l'application en mode watch.

Activités

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    const notes = [12, 15, 9, 16];
    let total = 0;
    for (let i = 1; i < notes.length; i++) {
      total += notes[i];
    }
    const moyenne = total / notes.length;
    return `Moyenne : ${moyenne}`;
  }
}