Cas avances¶

Développement distant, creation d'extensions, debugging multi-langage et configurations avancees.

Remote Development¶

VS Code peut éditer du code sur une machine distante comme s'il etait local, grâce aux extensions Remote :

Extension	Usage
Remote - SSH	Se connecter a un serveur via SSH
Remote - WSL	Travailler dans Windows Subsystem for Linux
Remote - Tunnels	Accéder a une machine via un tunnel (sans SSH direct)
Dev Containers	Travailler dans un conteneur Docker/Podman (voir Conteneuriser)

SSH¶

# Installer l'extension
code --install-extension ms-vscode-remote.remote-ssh

# Se connecter
# Ctrl+Shift+P → "Remote-SSH: Connect to Host" → user@hostname

Configuration SSH recommandee (~/.ssh/config) :

Host dev-server
    HostName 192.168.1.100
    User dev
    IdentityFile ~/.ssh/id_ed25519
    ForwardAgent yes

Port forwarding automatique

VS Code détecte les ports ouverts sur la machine distante et les forward automatiquement. Lancez un serveur de dev sur le remote et accedez-y depuis votre navigateur local.

WSL (Windows)¶

# Installer l'extension
code --install-extension ms-vscode-remote.remote-wsl

# Ouvrir un dossier WSL depuis Windows
code --remote wsl+Ubuntu /home/user/project

# Ou depuis le terminal WSL
cd ~/project && code .

Debugging multi-langage¶

Configurations de lancement¶

Le fichier .vscode/launch.json définit les configurations de debug :

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "debugpy",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    },
    {
      "name": "Go: Launch",
      "type": "go",
      "request": "launch",
      "mode": "auto",
      "program": "${workspaceFolder}/cmd/server"
    },
    {
      "name": "Node: Attach",
      "type": "node",
      "request": "attach",
      "port": 9229
    }
  ],
  "compounds": [
    {
      "name": "Full Stack",
      "configurations": ["Go: Launch", "Node: Attach"],
      "stopAll": true
    }
  ]
}

Breakpoints conditionnels¶

Clic droit sur un breakpoint → "Edit Breakpoint" :

Expression : s'arrete si la condition est vraie (user.role === "admin")
Hit Count : s'arrete apres N passages (> 100)
Log Message : affiche un message sans arreter (User: {user.name})

tasks.json avance¶

Variables¶

Variable	Valeur
`${workspaceFolder}`	Racine du workspace
`${file}`	Fichier actif
`${fileDirname}`	Dossier du fichier actif
`${selectedText}`	Texte selectionne
`${input:variableName}`	Demande une saisie a l'utilisateur

Tâche avec input¶

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "deploy",
      "type": "shell",
      "command": "ansible-playbook -i inventory/${input:env} deploy.yml",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "env",
      "type": "pickString",
      "description": "Environnement cible",
      "options": ["dev", "staging", "prod"],
      "default": "dev"
    }
  ]
}

Créer une extension VS Code¶

Pour les besoins spécifiques a l'équipe :

# Installer le generateur
npm install -g yo generator-code

# Scaffolder une extension
yo code
# Choisir "New Extension (TypeScript)"
# Nom : my-team-extension

Structure générée :

my-team-extension/
├── src/
│   └── extension.ts    # Point d'entree
├── package.json        # Manifest (commands, activation events)
└── tsconfig.json

Exemple minimal — une commande qui insere un header :

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const cmd = vscode.commands.registerCommand('myteam.insertHeader', () => {
    const editor = vscode.window.activeTextEditor;
    if (!editor) return;

    const header = `// Copyright ${new Date().getFullYear()} Mon Entreprise\n// SPDX-License-Identifier: MIT\n\n`;
    editor.edit(builder => {
      builder.insert(new vscode.Position(0, 0), header);
    });
  });

  context.subscriptions.push(cmd);
}

// package.json (extrait)
{
  "contributes": {
    "commands": [{
      "command": "myteam.insertHeader",
      "title": "Insert Copyright Header"
    }]
  },
  "activationEvents": ["onCommand:myteam.insertHeader"]
}

Tester : F5 lance une fenêtre VS Code de debug avec l'extension chargee.

Distribuer : empaqueter avec vsce package et installer le .vsix localement ou publier sur un registre interne.