📝 Monaco Editor

📊 Vue d'ensemble

François intègre Monaco Editor, le moteur d'édition de code de VS Code. Tous les fichiers modifiés par Claude ou l'utilisateur sont affichés dans Monaco avec syntax highlighting, IntelliSense, et support LSP (Language Server Protocol).

✨ Fonctionnalités Principales

IntelliSense Full

• Autocomplétion: Suggestions contextuelles (variables, fonctions, imports...)
• Signatures: Affichage des paramètres de fonctions pendant la saisie
• Documentation: Hover pour voir la doc (JSDoc, docstrings...)
• Quick Info: Types inférés pour TypeScript/Python/Rust

Support Multi-Langages (50+)

Support complet avec syntax highlighting et IntelliSense pour :

• TypeScript, JavaScript, JSX, TSX
• Python, Rust, Go, Java, C, C++, C#
• HTML, CSS, SCSS, JSON, YAML, Markdown
• SQL, GraphQL, Shell, Dockerfile
• Et 35+ autres langages

Refactoring Avancé

• Renommage: F2 pour renommer un symbole (toutes occurrences)
• Extraction: Extraire variable/fonction/méthode
• Déplacement: Déplacer fichiers/fonctions (mise à jour imports auto)
• Organize Imports: Trie et supprime imports inutilisés

Diff View

Avant de valider les modifications de Claude, visualisez un diff side-by-side :

• Lignes ajoutées en vert
• Lignes supprimées en rouge
• Lignes modifiées en jaune
• Navigation rapide entre changements (F7)

Multi-Cursors & Column Selection

# Multi-cursors
Cmd+D : Sélectionner occurrence suivante
Cmd+Shift+L : Sélectionner toutes les occurrences
Alt+Click : Ajouter curseur

# Column selection
Alt+Shift+Drag : Sélection verticale
Alt+Shift+↑/↓ : Étendre sélection verticale

Extensions VS Code

François supporte les extensions VS Code via le Monaco Extensions API. Extensions populaires supportées :

• ESLint / Prettier (Formatting + Linting)
• GitLens (Git blame inline)
• Error Lens (Erreurs inline)
• Bracket Pair Colorizer
• Path Intellisense

🎨 Thèmes

François inclut plusieurs thèmes Monaco par défaut :

• Dark+ (default) : Thème sombre VS Code classique
• Light+ : Thème clair VS Code
• Monokai : Thème sombre populaire
• François Dark : Thème custom François (terre cuite accents)

# Changer de thème
francois config set EDITOR_THEME=dark-plus
francois config set EDITOR_THEME=light-plus
francois config set EDITOR_THEME=francois-dark

⚙️ Configuration

Options d'éditeur

# Font
francois config set EDITOR_FONT_FAMILY="JetBrains Mono"
francois config set EDITOR_FONT_SIZE=14
francois config set EDITOR_LINE_HEIGHT=1.5

# Comportement
francois config set EDITOR_TAB_SIZE=2
francois config set EDITOR_INSERT_SPACES=true
francois config set EDITOR_WORD_WRAP=on
francois config set EDITOR_MINIMAP=true

# IntelliSense
francois config set EDITOR_QUICK_SUGGESTIONS=true
francois config set EDITOR_SUGGEST_ON_TRIGGER_CHARACTERS=true

Raccourcis Clavier

# Navigation
Cmd+P : Go to File
Cmd+Shift+O : Go to Symbol
Cmd+T : Go to Symbol in Workspace
F12 : Go to Definition
Alt+F12 : Peek Definition

# Edition
Cmd+/ : Toggle Comment
Cmd+] : Indent Line
Cmd+[ : Outdent Line
Alt+↑/↓ : Move Line Up/Down
Shift+Alt+↑/↓ : Copy Line Up/Down

# Multi-cursors
Cmd+D : Select Next Occurrence
Cmd+Shift+L : Select All Occurrences
Alt+Click : Add Cursor

# Refactoring
F2 : Rename Symbol
Cmd+. : Quick Fix
Cmd+Shift+R : Refactor

🔗 Intégration avec Claude

Monaco Editor est profondément intégré avec Claude :

AI-Powered Suggestions

Quand Claude modifie un fichier, les changements apparaissent dans Monaco avec des annotations :

• Lignes modifiées par Claude en surbrillance
• Icône IA dans la gutter
• Hover pour voir l'explication du changement

Inline Diff Approval

Approuvez ou rejetez les changements de Claude inline :

• ✅ Accept : Valider le changement
• ❌ Reject : Annuler le changement
• ✏️ Edit : Modifier avant validation

Context-Aware Prompts

Sélectionnez du code → Clic droit → "Ask Claude" :

• "Explique ce code"
• "Optimise cette fonction"
• "Ajoute des tests"
• "Refactorise en utilisant..."

🚀 Performance

Monaco Editor dans François est optimisé pour les gros fichiers :

• Virtual scrolling : Affiche uniquement les lignes visibles
• Lazy loading : Charge IntelliSense à la demande
• Worker threads : Syntax highlighting dans un worker séparé
• Diff optimisé : Algorithme Myers pour diffs rapides

Benchmark: Fichier 100K lignes → Ouverture en 120ms, scroll fluide à 60 FPS