Éditeur de code

Le moteur de VS Code dans le tableau de bord : onglets, palette de commandes, import automatique.

L'onglet Fichiers d'un conteneur a deux modes. Simple liste un dossier à la fois — pour envoyer un fichier ou corriger trois lignes. Éditeur ouvre un environnement complet, avec les raccourcis que tes doigts connaissent déjà.

Ouvrir un fichier#

Un clic suffit. Ce qui se passe ensuite dépend de ce qu'est le fichier, pas de son extension supposée :

Type	Ce qui se passe
Texte, code, configuration	S'ouvre dans l'éditeur
Image (PNG, JPG, WebP, ICO…)	Aperçu intégré, sur fond damier pour voir la transparence
SVG	S'ouvre en TEXTE — on veut le modifier, pas le regarder
PDF	Aperçu intégré
Base SQLite, archive, binaire	Refusé avec l'explication, et le téléchargement à un clic
Plus de 8 Mo	Refusé : l'ouvrir figerait l'onglet du navigateur

Si un fichier se téléchargeait au lieu de s'ouvrir

C'était le cas jusqu'à récemment pour .env, .toml, .lock, .py et quelques autres : le démon qui gère les fichiers les annonce comme des binaires. On ne s'y fie plus. Si tu retrouves un fichier texte qui refuse de s'ouvrir, l'aperçu propose toujours Ouvrir en texte.

L'import automatique#

C'est la fonctionnalité qui fait gagner le plus de temps, et elle marche sur tout le projet, pas seulement sur les fichiers déjà ouverts.

À l'ouverture de l'éditeur, tes fichiers .ts, .tsx, .js et .jsx sont parcourus et leurs export relevés. La barre d'état en bas indique combien de symboles sont importables.

Ensuite, deux gestes :

Pendant la frappe

Tape le début du nom. La suggestion apparaît avec, écrit à côté, « importer depuis ../lib/format ». Accepte-la : le nom est inséré et la ligne d'import s'écrit en haut du fichier.

avant

export function app() {
  return formaterD
}

après avoir accepté la suggestion

import { formaterDate } from "../lib/format";

export function app() {
  return formaterDate(new Date())
}

Sur un nom déjà écrit

Place le curseur dessus et fais Ctrl+. : « Importer « formaterDate » depuis ../lib/format ». Alt+Maj+I importe d'un coup tout ce qui manque dans le fichier.

Ce que l'import automatique sait faire

Calculer le bon chemin relatif depuis le fichier courant — ../../lib/utils et pas lib/utils, qui désignerait un paquet npm ;
Fusionner dans un import existant du même module ({ a } devient { a, b }) au lieu d'ajouter une deuxième ligne ;
distinguer un export default (importé sans accolades) d'un export nommé ;
ne rien faire quand le symbole est déjà importé ou déjà déclaré dans le fichier ;
poser l'import après un "use client" ou un shebang — jamais avant, ce qui casserait le fichier.

Alt+Maj+O range les imports : bibliothèques d'abord, chemins relatifs ensuite, doublons fusionnés. Les imports à effet de bord (import "./styles.css") restent en tête dans leur ordre d'origine — les trier changerait l'ordre d'exécution.

Ce que l'index ne couvre pas

L'exploration s'arrête à 250 dossiers et lit au plus 400 fichiers de moins de 400 ko. Elle ignore node_modules, .git, dist, build, .next, vendor et compagnie : c'est là que sont presque tous les fichiers et rien de ce qu'on veut importer. Les paquets npm ne sont donc pas proposés à l'import — seulement ton code.

Se déplacer#

Ctrl+P — aller à un fichier par son nom, avec recherche floue : usap trouve use-api.ts ;
Ctrl+Maj+P ou F1 — la palette de commandes, qui liste tout ce que l'éditeur sait faire avec son raccourci ;
Ctrl+Maj+F — chercher dans les fichiers du projet, avec le numéro de ligne et un clic pour y aller ;
la vue Modules (icône colis) liste tout ce qui est importable, avec son chemin vu depuis le fichier ouvert.

Tous les raccourcis#

L'éditeur les affiche lui-même : icône clavier en bas de la barre d'activité, ou Aide : tous les raccourcis dans la palette. Les principaux :

Raccourci	Action
`Ctrl+S`	Enregistrer
`Ctrl+Maj+S`	Tout enregistrer
`Alt+W`	Fermer l'onglet
`Ctrl+P`	Aller à un fichier
`Ctrl+Maj+P`	Palette de commandes
`Ctrl+B`	Panneau latéral
`Ctrl+²`	Panneau des problèmes
`Ctrl+.`	Action rapide (importer, corriger)
`Alt+Maj+O`	Organiser les imports
`Alt+Maj+F`	Formater le document
`Ctrl+D`	Sélectionner l'occurrence suivante
`Alt+↑ / Alt+↓`	Déplacer la ligne
`Ctrl+/`	Commenter
`Tab`	Développer une abréviation Emmet

Pourquoi Alt+W et pas Ctrl+W

Le navigateur intercepte Ctrl+W pour fermer son propre onglet, et aucune page web ne peut l'en empêcher. Fermer un fichier est donc sur Alt+W — mieux vaut un raccourci différent qu'un raccourci qui perd le travail en cours.

Sur Mac, remplace Ctrl par ⌘.

Emmet#

Dans un fichier HTML, CSS ou JSX, une abréviation suivie de Tab se déroule :

html

!            → un squelette HTML complet
html:5       → idem
div.carte>ul>li*3   → un div, une liste, trois éléments
a:link       → <a href="http://"></a>

Ce que l'éditeur n'est pas#

Il n'exécute rien. Pour lancer une commande, utilise l'onglet Terminal du conteneur.
Pas de Git. Il n'y a ni commit ni diff : pour un flux versionné, passe par le déploiement Git.
Pas d'extensions. Les langages fournis sont ceux du moteur (TypeScript, JavaScript, HTML, CSS, JSON) ; les autres ont la coloration mais pas l'analyse.
Les erreurs affichées sont celles d'un fichier isolé. Tes dépendances ne sont pas installées côté navigateur, donc « module introuvable » est volontairement masqué — ce n'est pas une erreur de ton code.

Pour ce qui est du reste du conteneur — console, ressources, sauvegardes — voir Le panel. Pour les secrets que tu ne veux écrire dans aucun fichier, voir Coffre.