Documentation

Installation #

Téléchargez le programme d’installation pour votre système depuis la page Téléchargements.

macOS

1. Ouvrez le fichier .dmg téléchargé et faites glisser Eclipse Code dans Applications.
2. La première fois, macOS bloque l’application car Apple ne l’a pas encore notariée. Ouvrez Réglages Système → Confidentialité et sécurité, faites défiler et cliquez sur Ouvrir quand même (sur les anciennes versions de macOS, faites un clic droit sur l’application et choisissez Ouvrir).
3. Si macOS indique toujours que l’application est endommagée, exécutez cette commande dans le Terminal :

xattr -cr "/Applications/Eclipse Code.app"

Windows

1. Exécutez le fichier .exe téléchargé et suivez les étapes. Vous pouvez choisir le dossier d’installation.
2. Si SmartScreen s’affiche, cliquez sur Informations complémentaires puis sur Exécuter quand même (l’application n’est pas encore signée).

Configuration requise

• macOS 12 ou version ultérieure, ou Windows 10 ou version ultérieure (64 bits).
• Pour déboguer, Node.js doit être installé.
• Pour l’aperçu des projets avec framework (Vite, Next.js…), Node.js et npm doivent être installés.

Premiers pas #

1. Ouvrez un dossier avec Fichier → Ouvrir un dossier (⌘K ⌘O / Ctrl+K Ctrl+O) ou le bouton + de la barre supérieure.
2. Cliquez sur un fichier dans l’Explorateur pour l’ouvrir. Modifiez-le puis appuyez sur ⌘S / Ctrl+S pour enregistrer.
3. Appuyez sur ⇧⌘P / Ctrl+Maj+P pour ouvrir la palette de commandes, et sur ⌘P / Ctrl+P pour accéder à n’importe quel fichier par son nom.

L’interface #

• Barre des projets (en haut) : un onglet par projet. Le bouton + ouvre un autre dossier dans un nouvel onglet.
• Barre d’activités (à gauche) : Explorateur, Recherche, Exécuter et déboguer, Terminal et Paramètres (engrenage).
• Barre latérale : l’explorateur de fichiers, les résultats de recherche ou les vues du débogueur.
• Éditeur : onglets de fichiers en haut. Le bouton en forme d’œil, en haut à droite, ouvre l’aperçu du site web.
• Panneau inférieur : Problèmes, Sortie, Console de débogage et Terminal.
• Barre d’état : compteurs du terminal et des problèmes, dossier actuel, position du curseur, indentation, encodage, fin de ligne, langage et bouton Mettre à jour.

Projets et onglets #

Chaque projet est un dossier avec ses propres fichiers ouverts, son explorateur, ses terminaux et son aperçu. Passez de l’un à l’autre sans ouvrir de seconde fenêtre.

• Ouvrez un autre dossier dans un nouvel onglet avec ⇧⌘N / Ctrl+Maj+N ou le bouton +. Ouvrir un dossier déjà ouvert revient simplement à l’afficher.
• Changez de projet d’un clic, ou avec ⇧⌘] / ⇧⌘[ (Ctrl+Maj+PageSuiv/PagePréc sous Windows).
• Fermez un projet avec son × ou ⇧⌘W / Ctrl+Maj+W. On vous propose d’enregistrer les modifications et ses terminaux sont fermés.
• Un point sur l’onglet d’un projet signifie qu’il contient des fichiers non enregistrés.

Édition #

L’éditeur est Monaco, le même moteur que Visual Studio Code ; ses raccourcis d’édition fonctionnent donc de la même manière.

• Coloration syntaxique pour des dizaines de langages, complétion de code pour JavaScript, TypeScript, JSON, CSS et HTML, paires de parenthèses colorées et mini-carte.
• Curseurs multiples, déplacement/copie de lignes, commentaires, recherche et remplacement (voir Raccourcis clavier).
• Formatez un document avec Éditeur : Formater le document dans la palette de commandes.
• Un point sur l’onglet d’un fichier signifie des modifications non enregistrées. ⇧⌘T / Ctrl+Maj+T rouvre le dernier onglet fermé.
• Si un fichier change sur le disque, il est rechargé à votre retour dans l’application (sauf si vous y avez des modifications non enregistrées).
• Les fichiers binaires et les fichiers de plus de 5 Mo ne sont pas ouverts dans l’éditeur.

Activez l’Enregistrement automatique dans les paramètres pour enregistrer après un court délai ou lorsque la fenêtre perd le focus.

Recherche #

Appuyez sur ⇧⌘F / Ctrl+Maj+F pour rechercher dans tous les fichiers du projet actuel.

• Utilisez les boutons Aa (respecter la casse), ab (mot entier) et .* (expression régulière).
• Les résultats sont groupés par fichier, avec la coloration syntaxique et l’occurrence mise en évidence. Cliquez sur l’un d’eux pour y accéder ; cliquez sur un nom de fichier pour réduire ses résultats.
• Les dossiers comme node_modules, .git, dist, build, out, .next, .cache, __pycache__, .venv et target sont ignorés, ainsi que les fichiers binaires et ceux de plus de 1 Mo.
• Jusqu’à 2000 occurrences sont affichées.

Encodages et fins de ligne #

Les accents, symboles et émojis fonctionnent immédiatement. Les fichiers sont détectés parmi : UTF-8, UTF-8 avec BOM, UTF-16 LE/BE, Windows-1252, ISO 8859-1 ou ISO 8859-15, et sont réenregistrés dans le même encodage.

• L’encodage actuel s’affiche dans la barre d’état. Cliquez dessus pour Rouvrir avec l’encodage (si un fichier paraît illisible) ou Enregistrer avec l’encodage.
• Si vous enregistrez dans un encodage qui ne peut pas représenter certains caractères, ils sont remplacés par ? et un avertissement s’affiche. Enregistrez en UTF-8 pour les conserver.
• La fin de ligne (LF ou CRLF) s’affiche dans la barre d’état. Modifiez-la avec Éditeur : Convertir les fins de ligne dans la palette de commandes.

Terminal #

• Ouvrez ou masquez le terminal avec Ctrl+` ou le bouton Terminal de la barre d’état. Il s’ouvre dans le dossier du projet.
• Cliquez sur + à côté des onglets du terminal pour en ajouter un autre, et sur le × d’un onglet pour le fermer.
• Chaque projet a ses propres terminaux ; ils continuent de tourner lorsque le panneau est masqué ou que vous changez de projet.
• Le shell est votre shell de connexion sur macOS (par exemple zsh) et PowerShell sous Windows, avec UTF-8 activé.
• Faites glisser le bord supérieur du panneau pour le redimensionner.

Débogage (Node.js) #

Le débogueur intégré exécute des fichiers JavaScript (.js, .mjs, .cjs) avec Node.js. Node.js doit être installé.

1. Cliquez dans la marge à gauche d’un numéro de ligne pour définir un point d’arrêt (un point rouge), ou appuyez sur F9. Les points d’arrêt sont conservés entre les sessions.
2. Ouvrez le fichier et appuyez sur F5 (ou Démarrer le débogage dans la vue Exécuter et déboguer). Le fichier est d’abord enregistré.
3. L’exécution s’arrête au point d’arrêt et la ligne est mise en évidence. Utilisez la barre flottante ou les raccourcis pour continuer, pas à pas principal F10, détaillé F11 et sortant ⇧F11.

Vue Exécuter et déboguer

• Variables : les valeurs dans la portée, dépliables pour les objets et les tableaux.
• Espions : cliquez sur + pour ajouter une expression réévaluée à chaque pause.
• Pile d’appels : cliquez sur un cadre pour voir ses variables et son code.
• Points d’arrêt : tous les points d’arrêt ; cliquez sur l’un pour l’ouvrir, ou sur le × pour le supprimer.

Console de débogage

Affiche la sortie du programme et permet d’évaluer des expressions. En pause, les expressions s’exécutent dans le cadre de pile sélectionné.

Aperçu de site web #

Cliquez sur le bouton en forme d’œil, en haut à droite de l’éditeur (ou appuyez sur ⇧⌘V / Ctrl+Maj+V), pour ouvrir un aperçu en direct à côté de votre code. Le bouton apparaît pour les projets web et lorsqu’un fichier HTML ou SVG est ouvert.

Sites HTML

Le dossier du projet est servi sur une adresse locale ; CSS, JavaScript, images et polices se chargent donc normalement. La page se recharge à l’enregistrement et pendant la saisie, avant même d’enregistrer. Les fichiers comme .git et .env ne sont jamais servis.

Projets avec framework

Si package.json contient un script dev, start ou serve et un framework connu (Vite, Next.js, Create React App, Vue CLI, Nuxt, Astro, Angular, Parcel, Gatsby, SvelteKit, Remix, Docusaurus…), Eclipse Code exécute le script dans un terminal nommé serveur dev, détecte l’adresse affichée et montre la page. Si node_modules est absent, il propose d’exécuter d’abord npm install.

• La barre d’aperçu comporte précédent, suivant, actualiser, un champ d’adresse, ouvrir dans le navigateur et fermer.
• Pour les serveurs de développement, des boutons permettent aussi d’afficher les journaux du serveur et de l’arrêter.
• Chaque projet garde son propre aperçu. Les liens vers d’autres sites s’ouvrent dans votre navigateur par défaut.

Problèmes et Sortie #

Le panneau Problèmes (⇧⌘M / Ctrl+Maj+M) liste les erreurs de syntaxe et les avertissements des fichiers ouverts (JavaScript, TypeScript, JSON, CSS, HTML). Cliquez sur l’un d’eux pour y accéder. La barre d’état affiche les totaux.

Le panneau Sortie (⇧⌘U / Ctrl+Maj+U) journalise des événements comme les fichiers enregistrés, les dossiers ouverts, les encodages, les adresses des serveurs de développement et les compilations de mise à jour.

Paramètres #

Ouvrez les paramètres avec l’icône en engrenage ou ⌘, / Ctrl+,. Ils sont organisés en onglets :

• Apparence : huit thèmes de couleur (Eclipse Dark et Light, Dracula, Monokai, Solarized Dark et Light, Nord, High Contrast). Le thème s’applique immédiatement. Le sombre est le thème par défaut.
• Langue : English, Português, Français, Deutsch et Español, pour l’interface et les menus.
• Éditeur : taille et police, retour à la ligne et couleurs des parenthèses.
• Fichiers : Enregistrement automatique (Désactivé, Après un délai ou Au changement de focus).
• Terminal : taille de la police.
• Raccourcis clavier : voir ci-dessous.

Raccourcis clavier #

Les valeurs par défaut suivent Visual Studio Code. Pour en modifier un, ouvrez Paramètres → Raccourcis clavier, cliquez sur le crayon à côté d’une action et appuyez sur la nouvelle combinaison. Si elle était déjà utilisée, elle est retirée de l’autre action. Utilisez les boutons pour supprimer un raccourci ou le réinitialiser, ou Tout réinitialiser.

Général

Navigation

Affichage

Débogage

Éditeur (Monaco)

Mises à jour #

L’application installée se compare au dossier de projet à partir duquel elle a été compilée. Quand ce code change, un bouton Mettre à jour apparaît dans la barre d’état. Cliquez dessus : l’application se recompile, se remplace elle-même et redémarre.

• Le dossier source doit toujours exister, et Node.js et npm doivent être installés.
• Enregistrez d’abord votre travail ; l’application vous le demande s’il y a des modifications non enregistrées.
• Vous pouvez aussi vérifier manuellement avec Fichier → Rechercher des mises à jour. Cette option n’existe que dans l’application installée, pas lors d’une exécution depuis le code source.

Dépannage #

• macOS bloque l’application ou la déclare endommagée : cliquez sur Ouvrir quand même dans Réglages Système → Confidentialité et sécurité, ou exécutez xattr -cr "/Applications/Eclipse Code.app" dans le Terminal.
• SmartScreen de Windows bloque le programme d’installation : cliquez sur Informations complémentaires, puis sur Exécuter quand même.
• Le débogueur indique que Node.js est introuvable : installez Node.js et redémarrez Eclipse Code.
• L’aperçu du framework reste vide : ouvrez le terminal nommé serveur dev (le bouton terminal de la barre d’aperçu) et cherchez les erreurs ; vérifiez que npm install a bien été exécuté.
• Les accents s’affichent mal dans un fichier : cliquez sur l’encodage dans la barre d’état et choisissez Rouvrir avec l’encodage.
• La recherche ne trouve rien dans node_modules : ces dossiers sont ignorés volontairement.

Pour tout réinitialiser, quittez l’application et supprimez son dossier de données : ~/Library/Application Support/Eclipse Code sous macOS, ou %APPDATA%\Eclipse Code sous Windows.