---
title: Extension VS Code
description: "Démarrez, arrêtez et redémarrez le serveur Jamdesk depuis la barre d'état Visual Studio Code -- contrôles en un clic et aperçu auto dans le navigateur."
---

Prévisualisez votre documentation sans quitter Visual Studio Code. L'extension Jamdesk ajoute un bouton dans la barre d'état qui démarre `jamdesk dev`, surveille le serveur et ouvre votre navigateur lorsqu'il est prêt. Aucun terminal requis.

## Prérequis

- [Jamdesk CLI](/fr/cli/overview) installé (`npm install -g jamdesk`)
- Un espace de travail contenant un fichier `docs.json`

## Installer l'extension

Recherchez **Jamdesk** dans le panneau Extensions de VS Code (`Cmd+Shift+X` sur macOS, `Ctrl+Shift+X` sur Windows/Linux) et cliquez sur **Installer**. Ou installez directement depuis le [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Jamdesk.jamdesk).

L'extension s'active automatiquement lorsque votre espace de travail contient un fichier `docs.json`. Un bouton de lecture apparaît dans la barre d'état.

## Démarrer le serveur de développement

Cliquez sur le bouton de lecture dans la barre d'état pour démarrer le serveur de développement. L'extension :

1. Lance `jamdesk dev` en tant que processus enfant
2. Surveille la sortie pour détecter lorsque le serveur est prêt
3. Ouvre votre navigateur vers le preview local (si l'ouverture automatique est activée)

La barre d'état affiche l'état actuel du serveur : démarrage, en cours d'exécution ou arrêté.

## Commandes

Ouvrez la palette de commandes (`Cmd+Shift+P` / `Ctrl+Shift+P`) et tapez "Jamdesk" pour accéder à :

| Commande | Description |
|---------|-------------|
| **Jamdesk: Start Dev Server** | Démarrer le serveur de développement |
| **Jamdesk: Stop Dev Server** | Arrêter le serveur en cours d'exécution |
| **Jamdesk: Restart Dev Server** | Redémarrer le serveur |
| **Jamdesk: Show Output** | Afficher le canal de sortie CLI |

## Paramètres

Configurez l'extension dans les paramètres VS Code (`Cmd+,` / `Ctrl+,`) sous **Jamdesk** :

| Paramètre | Défaut | Description |
|---------|---------|-------------|
| `jamdesk.port` | `3000` | Port préféré du serveur de développement |
| `jamdesk.verbose` | `false` | Activer la sortie CLI détaillée |
| `jamdesk.clean` | `false` | Vider le cache de build au prochain démarrage |
| `jamdesk.browserMode` | `external` | Où ouvrir le preview : `external` (navigateur système) ou `embedded` (panneau latéral VS Code) |
| `jamdesk.autoOpenBrowser` | `true` | Ouvrir le navigateur lorsque le serveur est prêt |

<Tip>
Définissez `browserMode` sur `embedded` pour ouvrir le preview de la documentation dans un panneau latéral VS Code. Cela vous permet d'éditer et de prévisualiser côte à côte sans changer de fenêtre.
</Tip>

## Gestion intelligente des ports

Si votre port préféré est déjà utilisé, le CLI passe automatiquement au prochain port disponible. L'extension détecte le port réel depuis la sortie CLI, de sorte que le navigateur s'ouvre toujours vers l'URL correcte.

## Canal de sortie

L'extension diffuse toute la sortie CLI vers un canal de sortie **Jamdesk** dédié. Ouvrez-le avec la commande **Jamdesk: Show Output** ou depuis le menu déroulant du panneau Sortie.

Utilisez-le pour :
- Surveiller la progression du build
- Déboguer les problèmes du serveur
- Afficher les journaux détaillés (lorsque `jamdesk.verbose` est activé)

## Et ensuite ?

<Columns cols={2}>
  <Card title="Preview local" icon="eye" href="/fr/development/local-preview">
    Preview basé sur le CLI avec ports personnalisés et mode détaillé
  </Card>
  <Card title="Vue d'ensemble CLI" icon="terminal" href="/fr/cli/overview">
    Référence complète des commandes CLI
  </Card>
</Columns>