TW3 — Technologies du Web 3

🔍 SonarQube for IDE (ex-SonarLint)

SonarQube for IDE analyse votre code en temps réel dans l'éditeur et signale bugs, vulnérabilités et code smells pendant la saisie.

L'extension anciennement appelée SonarLint s'appelle désormais SonarQube for IDE. Vous trouverez encore l'ancien nom dans de nombreux tutoriels, mais le principe reste le même : analyser le code directement dans l'éditeur.

💿 Installation

  1. Ouvrez votre IDE.
  2. Accédez au marketplace des extensions.
  3. Recherchez SonarQube for IDE (anciennement SonarLint).
  4. Installez l'extension.

⚡ Fonctionnalités principales

🐛 Détection des bugs

SonarQube for IDE repère les accès dangereux et les oublis courants :

// Problématique
function getDisplayName(user?: { name: string }) {
  return user.name.trim().toUpperCase();
}

// Recommandé
function getDisplayName(user?: { name: string }) {
  return user?.name?.trim().toUpperCase() ?? "ANONYME";
}

🔒 Vulnérabilités de sécurité

L'extension signale aussi les concaténations risquées dans les requêtes :

// Problématique
const sql = `SELECT * FROM users WHERE id = ${userId}`;
async function getUser(id: string) {
  await db.query(sql);
}

// Recommandé
const sql = "SELECT * FROM users WHERE id = ?";
async function getUser(id: string) {
  await db.query(sql, [userId]);
}

🧼 Code smells

Elle aide à simplifier le code trop imbriqué ou difficile à relire :

// Problématique
function canPublish(user, course) {
  if (user && user.role === "teacher") {
    if (course && !course.archived) {
      if (course.modules.length > 0) {
        return true;
      }
    }
  }

  return false;
}

// Recommandé
function canPublish(user, course) {
  return Boolean(
    user?.role === "teacher" &&
      course &&
      !course.archived &&
      course.modules.length > 0,
  );
}

⚙️ Configuration

L'extension fonctionne seule, mais elle peut aussi se connecter à SonarQube Server ou SonarQube Cloud pour récupérer les mêmes règles que le pipeline CI de l'équipe.

  • Activez l'analyse en temps réel dans l'éditeur.
  • Reliez l'extension au projet SonarQube de l'équipe si vous en avez un.
  • Gardez en tête que certains réglages techniques conservent encore le préfixe historique sonarlint dans VS Code.

🔗 Intégration avec SonarQube

Le mode connecté permet de :

  • synchroniser les règles d'analyse ;
  • partager la configuration avec l'équipe ;
  • retrouver dans l'IDE des problèmes aussi vus dans la CI.

✅ Bonnes pratiques

  1. Corrigez les alertes simples dès qu'elles apparaissent.
  2. Lisez l'explication de la règle avant de désactiver un signalement.
  3. Utilisez les quick fixes proposés quand ils existent.
  4. Vérifiez les alertes de sécurité avant de pousser une PR.

Tooling

Terminez le quiz du chapitre pour le marquer comme complété.

Tableau de bord

On this page