Extensions IDE (VS Code, etc.)
📚 Navigation de la série : Le chapitre précédent 08 · Premiers pas avec la CLI a détaillé l'utilisation de
codexen console. Ce chapitre guide l'intégration de Codex au sein de VS Code — vous y retrouverez le même agent et les mêmes configurations sous un habillage graphique facilitant la revue de diffs côte à côte. Le chapitre 10 · Codex Cloud présentera la délégation des tâches sur l'infrastructure cloud d'OpenAI.
Voici un retour d'expérience pour illustrer la première difficulté fréquente.
Le collègue : « Je recherche "Codex" dans le marketplace de VS Code, mais je ne trouve pas l'extension officielle. La recherche ne retourne que des plugins tiers contenant ce mot-clé. » Moi : « Le mot-clé de recherche n'est pas le bon. L'identifiant de l'extension officielle est
openai.chatgpt. » Le collègue : « OpenAI a nommé l'extension Codex "ChatGPT" ? C'est inattendu. » Moi : « Cette dénomination m'a également ralenti. Identifiez le fournisseur OpenAI et procédez à l'installation. »
La première étape consiste donc à localiser l'extension officielle. Ses intitulés et icônes peuvent être masqués par défaut sous Cursor. Ce chapitre décrit les étapes de déploiement et d'utilisation de l'extension.
À la fin de ce chapitre, vous obtiendrez :
- Les étapes de déploiement de l'extension sous VS Code, Cursor et Windsurf
- L'intégration du contexte de l'éditeur (
@file, sélections) et le sélecteur à trois modes d'approbation - Le comparatif d'usage entre l'extension, la CLI et l'application de bureau
01 Relation entre l'extension, la CLI et l'application de bureau
L'extension s'appuie sur le même agent local que la CLI, partageant son fichier de configuration ~/.codex/config.toml et son état d'authentification. Elle encapsule l'utilitaire dans l'interface graphique de votre éditeur de code, chargeant les conventions AGENTS.md configurées.
Analogie : Deux modes de commande pour un même véhicule. La CLI est le volant physique : accès direct à l'ensemble des rapports et fonctionnalités. L'extension est une télécommande intégrée à l'éditeur qui exécute les manœuvres courantes en un clic et affiche l'état sur l'écran principal (diff côte à côte). Le moteur et les réservoirs de carburant sont identiques — l'agent sous-jacent reste le même. L'application de bureau (voir chapitres 03 et 07) est une carrosserie alternative adaptée au multitâche sans éditeur ouvert.
Comparatif d'utilisation selon le cas d'usage :
| Cas d'usage | CLI (Console) | Extension IDE | Application de bureau |
|---|---|---|---|
| Développement quotidien sous VS Code / Cursor | Correct | ✅ Recommandé (intégration du contexte de code immédiate) | Exige de basculer de fenêtre |
| Écritures de scripts, CI/CD, serveurs distants SSH | ✅ Recommandé par défaut | ❌ Non disponible | ❌ Non disponible |
| Multitâche lourd sans usage de la console | Non recommandé | Moyen | ✅ Option recommandée |
| Analyse de diffs côte à côte et requêtes ciblées | Diff textuel en console | ✅ Diff côte à côte natif | ✅ Panneau visuel de revue |
| Accès à l'intégralité des commandes de la CLI | ✅ Complet | Exécuter codex dans le terminal intégré | — |
En conclusion, l'extension est optimisée pour l'analyse et l'édition de code interactives. Pour les appels avancés de la CLI, utilisez la console intégrée de l'éditeur de code.
💡 En résumé : L'extension, la CLI et l'application de bureau s'appuient sur le même agent. Ils partagent les configurations et la session active.
02 Installation et authentification
1. Compatibilité
L'extension officielle de Codex supporte VS Code ainsi que ses dérivés Cursor et Windsurf (y compris la version VS Code Insiders). Les environnements JetBrains (IntelliJ, PyCharm, WebStorm, Rider) s'appuient sur une intégration dédiée. L'extension s'installe sous macOS, Windows et Linux (y compris sous WSL2).
Note : Assurez-vous de disposer d'un accès stable aux serveurs OpenAI pour la connexion et l'exécutions des tâches.
2. Procédures d'installation
Option A : Recherche dans le marketplace
Ouvrez le gestionnaire d'extensions (Cmd+Shift+X sous macOS, Ctrl+Shift+X sous Windows/Linux). Veuillez saisir l'identifiant exact de l'extension : openai.chatgpt. Assurez-vous que l'auteur mentionné est bien OpenAI avant de valider l'installation.
Recherche de Codex dans VS Code : 
Option B : Liens d'installation directe
Saisissez les liens suivants dans votre navigateur pour ouvrir l'assistant d'installation :
VS Code : vscode:extension/openai.chatgpt
Cursor : cursor:extension/openai.chatgpt
Windsurf : windsurf:extension/openai.chatgptOption C : Ligne de commande
Si vos utilitaires CLI d'éditeurs de code sont actifs, lancez :
code --install-extension openai.chatgptRemaplacez par cursor le cas échéant. Le terminal doit retourner :
Installing extensions...
Extension 'openai.chatgpt' was successfully installed.⚠️ L'identifiant
openai.chatgptcorrespond aux spécifications publiées officiellement par OpenAI.
3. Résolution des problèmes d'affichage d'icône
Par défaut, l'icône de Codex s'affiche dans la barre d'activité droite de l'éditeur de code. Consultez le tableau de diagnostic suivant en cas d'anomalie :
| Symptôme | Éditeur | Résolution |
|---|---|---|
| L'icône Codex n'apparaît pas après installation | VS Code | Redémarrer l'éditeur de code et contrôler la barre d'activité droite |
| Barre latérale vide | Cursor | La barre d'activité horizontale de Cursor peut masquer l'icône dans un sous-menu. Épingler l'icône ou modifier l'ordre d'affichage |
| Positionner l'icône sur le volet gauche | VS Code | Glisser-déposer l'icône vers la barre d'activité gauche |
| Déplacer l'icône sur le volet droit sous Cursor | Cursor | Configurer activity bar sur vertical dans les préférences, redémarrer, déplacer l'icône puis repasser le paramètre à horizontal |
Note pour Cursor : L'affichage horizontal compact de l'éditeur masque fréquemment les nouvelles icônes d'extensions dans le sous-menu de débordement. Utilisez la fonction épingler (pin).
4. Authentification initiale
Au premier lancement, connectez-vous avec votre compte ChatGPT ou votre clé API. Les abonnements Plus/Pro intègrent les volumes d'usage de l'agent.
💡 En résumé : Recherchez l'identifiant
openai.chatgptde l'auteur OpenAI. Redémarrez VS Code après installation et épinglez l'icône sous Cursor.
03 Transmission du contexte de l'éditeur
Définir le périmètre d'analyse évite à l'agent de parcourir l'ensemble du projet. L'extension permet de lui soumettre le contexte actif de l'éditeur, raccourcissant vos prompts et accélérant la génération.
Analogie : Travailler sur plan plutôt qu'à distance. Décrire verbalement une portion de code à distance est sujet à erreur. Pointer du doigt la ligne exacte sur le plan est immédiat. La CLI s'apparente à une description verbale ; l'extension permet de désigner la portion de code par une simple sélection.
Deux méthodes clés :
1. La mention @file
Saisissez le caractère @ suivi du nom du fichier pour le lier au prompt (exemple officiel) :
用 @example.tsx 当参考，给 app 加一个叫 "Resources" 的新页面，
内容是 @resources.ts 里定义的资源列表2. Sélection de code et Auto Context
Sélectionnez une portion de code dans l'éditeur pour l'injecter dans la session active. La fonction Auto Context (activable via /auto-context) transmet automatiquement les documents récents ouverts dans l'éditeur à l'agent.
Commandes d'ajout de contexte (configurables dans le menu des raccourcis de l'éditeur) :
| ID de commande | Action |
|---|---|
chatgpt.addToThread | Injecter le code sélectionné dans la session active |
chatgpt.addFileToThread | Lier le fichier ouvert à la session active |
⚠️ Note : Pour insérer une image de référence dans la zone de prompt, maintenez la touche
Shiftlors du glisser-déposer pour contourner les restrictions d'importation de VS Code.
💡 En résumé : Utilisez la mention
@fileou des sélections de blocs pour qualifier le contexte. La fonction Auto Context réduit la taille des requêtes nécessaires.
04 Les trois modes d'approbation
L'extension simplifie la configuration de la sandbox et des approbations (voir chapitre 02) sous la forme d'un sélecteur graphique à trois positions situé sous la zone de saisie :
Définition des trois niveaux :
| Mode d'approbation | Comportement de l'agent | Cas d'usage |
|---|---|---|
Agent (Par défaut) | Lecture, modification et exécution automatiques dans le projet ; interruption pour validation lors des accès externes ou réseau | Niveau standard de développement |
Chat | Discussions et propositions d'analyses, exécutions de modifications bloquées | Analyses de code, propositions d'architectures sans altération des sources |
Agent (Full Access) | Exécutions et écritures libres sur la machine sans aucune approbation | Environnement de confiance (exige de la prudence) |
Analogie : L'accès stagiaire. Le mode Chat bloque toute action : propositions d'analyses uniquement. Le mode Agent permet l'autonomie sur votre répertoire projet, mais exige une validation avant toute modification externe. Le mode Full Access lève l'ensemble des garde-fous de sécurité.
Il est recommandé de débuter sur un nouveau projet en mode Chat pour valider les propositions techniques avant d'activer le mode Agent. Réservez l'usage de Full Access aux opérations d'écritures de masse déjà validées.
💡 En résumé : Trois niveaux d'approbation visuels :
Chat(lecture/analyse),Agent(écriture projet autonome, avertissement externe) etFull Access(liberté d'action complète).
05 Choix des modèles et effort de raisonnement
Les options de choix de modèles et d'effort de raisonnement se configurent sous la zone de saisie.
Le sélecteur de modèle liste les versions GPT compatibles. Utilisez les modèles légers pour préserver vos quotas lors des tâches simples, et réservez les versions plus puissantes aux restructurations complexes.
Le paramètre reasoning effort (effort de raisonnement) définit le niveau d'analyse appliqué à la requête. Choisissez entre les niveaux low, medium et high :
Analogie : L'allocation de temps d'examen. Le mode low répond rapidement aux tâches de syntaxe courantes. Le mode high structure le raisonnement sur les architectures complexes. La documentation conseille d'utiliser le niveau medium par défaut, l'option high consommant davantage de jetons et allongeant les temps de réponse.
| Critère | Sélection du modèle | Effort de raisonnement |
|---|---|---|
| Emplacement | Sélecteur sous la saisie | Menu contextuel par modèle |
| Options | Modèles standard ou avancés | low / medium / high |
| Logique | Optimisation des quotas vs qualité du code | L'élévation de l'effort augmente la consommation |
| Choix par défaut | Modèle recommandé | medium (basculer vers high en cas de besoin) |
💡 En résumé : Ajustez les options sous la zone de saisie. Utilisez le modèle mini et le niveau
mediumpar défaut ; réservez le niveauhighaux cas d'usage complexes.
06 Commandes slash et exécutions cloud
1. Commandes slash d'extension
Saisir / dans la zone de saisie affiche les commandes de contrôle de session (différentes des anciens alias communautaires comme /explain ou /fix) :
| Commande slash | Action |
|---|---|
/status | Afficher l'ID du thread, la consommation et les limites actives |
/auto-context | Activer/Désactiver l'inclusion automatique du contexte |
/local | Configurer l'exécution sur votre machine locale |
/cloud | Configurer l'exécution sur l'infrastructure cloud |
/cloud-environment | Sélectionner le profil d'environnement cloud cible |
/review | Lancer la revue des modifications locales |
/goal | Assigner un objectif de fond persistant |
/feedback | Soumettre un rapport d'anomalie |
2. Délégation sur l'infrastructure cloud
L'extension permet de déporter les exécutions longues vers les serveurs cloud de Codex pour préserver les ressources locales :
- Déclarez un environnement cloud dans vos paramètres ChatGPT.
- Sélectionnez le profil correspondant dans l'extension et cliquez sur Run in the cloud.
Note : Les exécutions cloud peuvent démarrer de zéro (branche principale) ou inclure vos modifications de code locales en cours. Le contexte de dialogue est partagé, facilitant la récupération des résultats sous forme de diff en local.
💡 En résumé : Raccourcis de contrôle via commandes slash :
/status(mesure),/local(mode local),/cloud(cloud) et/review(revue). Utilisez/cloudpour déporter les tâches lourdes.
07 Exercice pratique : intégration dans VS Code
Exercice d'initialisation de l'extension dans un répertoire de test vide :
Étape 0 : Initialiser le répertoire de test
Saisissez (remplacez mkdir -p par mkdir sous Windows) :
mkdir -p ~/codex-ide-demo && cd ~/codex-ide-demo
printf 'def greet(name):\n return "Hello " + name\n\nprint(greet("world"))\n' > demo.py
code .Résultat attendu : VS Code ouvre le dossier contenant le fichier demo.py dans l'explorateur de projets.
Étape 1 : Ouvrir le volet de l'extension et s'authentifier
Cliquez sur l'icône Codex dans la barre d'activité droite (épinglez-la sous Cursor) et validez la connexion via votre compte ChatGPT.
Résultat attendu : Le panneau de dialogue s'ouvre, affichant les sélecteurs de modèles et d'approbations.
Étape 2 : Sélectionner du code et appliquer une modification
Sélectionnez les lignes de la fonction greet dans l'éditeur (mode Agent actif) et saisissez :
帮我把它改成用 f-string，并加上类型注解Résultat attendu : L'agent identifie la portion sélectionnée et affiche la modification f-string avec annotations sous forme de diff côte à côte dans l'éditeur.
Étape 3 : Planification de modifications en mode Chat
Basculez le sélecteur sur Chat et saisissez :
给这个文件加上命令行参数支持，让用户能从终端传入名字，先说说你打算怎么改Résultat attendu : L'agent décrit la démarche d'intégration du module argparse sans modifier le fichier.
Étape 4 : Lancer la commande /status
Saisissez :
/statusRésultat attendu : Affichage des paramètres actifs de la session.
08 Raccourcis clavier et intégration de la console
1. Raccourcis clavier de l'extension
Vous pouvez lier des raccourcis clavier spécifiques aux commandes de l'extension dans le menu de configuration de l'éditeur :
- Ouvrez le menu de commandes de l'éditeur (
Cmd+Shift+P/Ctrl+Shift+P). - Ouvrez les préférences de raccourcis clavier (Preferences: Open Keyboard Shortcuts).
- Filtrez sur le mot-clé
Codex(ou sur les identifiants de commandes ci-dessous) pour y attribuer votre combinaison de touches.
Commandes configurables (source : document de référence Commands) :
| ID de commande | Raccourci par défaut | Action |
|---|---|---|
chatgpt.newChat | Cmd+N (macOS), Ctrl+N (Win/Linux) | Créer un thread de discussion |
chatgpt.openSidebar | Aucun | Ouvrir le panneau latéral de l'extension |
chatgpt.newCodexPanel | Aucun | Ouvrir un onglet d'affichage dédié |
chatgpt.addToThread | Aucun | Lier la sélection de code au thread actif |
chatgpt.addFileToThread | Aucun | Lier le fichier entier au thread actif |
chatgpt.implementTodo | Aucun | Demander à l'agent de traiter les TODO sélectionnés |
⚠️ Note : Les raccourcis mentionnés dans les anciens tutoriels ne sont plus actifs par défaut ; configurez vos raccourcis manuellement.
2. Paramètres de l'extension
Les préférences visuelles s'ajustent dans l'interface de l'éditeur de code, les options d'écriture restant hébergées au sein de ~/.codex/config.toml (voir chapitre 02) :
| Clé de paramètre | Description |
|---|---|
chatgpt.openOnStartup | Focus automatique sur le panneau Codex au lancement de l'éditeur |
chatgpt.commentCodeLensEnabled | Afficher un bouton CodeLens au-dessus des commentaires TODO pour déléguer l'écriture |
chatgpt.localeOverride | Forcer la langue de l'interface (laisser vide pour détection automatique) |
chatgpt.runCodexInWindowsSubsystemForLinux | Spécifique Windows : Exécuter l'agent sous WSL2 (recommandé si vos outils sont isolés sous Linux). Exige un redémarrage de la fenêtre |
3. Usage conjoint de la CLI
Ouvrez la console intégrée de votre éditeur (raccourci Cmd+`) et lancez codex ; la session partagera l'authentification et les configurations de l'extension.
💡 En résumé : Raccourcis configurables dans le gestionnaire de clavier. Les paramètres de comportement résident dans
~/.codex/config.toml, les options visuelles dans l'éditeur. Accès CLI disponible via le terminal intégré.
09 Résumé
Ce chapitre a couvert l'intégration de Codex dans VS Code :
- Nature de l'extension : une interface graphique encapsulant l'agent local CLI (partage des configurations et de la session).
- Identifiant unique : l'extension officielle est
openai.chatgptdéveloppée par OpenAI ; épinglez l'icône sous Cursor. - Atouts visuels : l'accès aux variables
@file, les trois niveaux de droits (Chat,Agent,Full Access) et le sélecteur de modèles. - Commandes valides : utilisez les appels slash officiels (
/status,/local,/cloudet/review).
Le chapitre suivant 10 · Codex Cloud présente la délégation des exécutions dans le cloud, l'interaction avec vos dépôts GitHub et le traitement asynchrone des Pull Requests.