{"id":2389,"date":"2026-05-05T13:06:46","date_gmt":"2026-05-05T12:06:46","guid":{"rendered":"https:\/\/coding4phone.com\/?p=2389"},"modified":"2026-05-07T17:20:54","modified_gmt":"2026-05-07T16:20:54","slug":"un-jour-une-extension-lhistoire-de-mogwai-language-support-pour-vs-code","status":"publish","type":"post","link":"https:\/\/coding4phone.com\/?p=2389","title":{"rendered":"Un jour, une extension \u2014 L’histoire de MOGWAI Language Support pour VS Code"},"content":{"rendered":"\n

30 avril 2026. Il est environ minuit. Je suis devant mon \u00e9cran avec une id\u00e9e simple : et si MOGWAI avait sa propre extension VS Code ? Vingt-quatre heures plus tard, elle \u00e9tait publi\u00e9e sur le Marketplace. Voici l’histoire de comment \u00e7a s’est pass\u00e9 \u2014 et du r\u00f4le central qu’a jou\u00e9 Claude dans cette aventure.<\/em><\/p>\n\n\n\n

\n\n\n\n

L’id\u00e9e de d\u00e9part<\/h2>\n\n\n\n

MOGWAI<\/a> existe depuis plus de dix ans. C’est un moteur de scripting RPN bas\u00e9 sur la pile, inspir\u00e9 des calculatrices HP (HP 28S, HP 48), d\u00e9velopp\u00e9 pour .NET et open-sourc\u00e9 en f\u00e9vrier 2026 sous licence Apache 2.0. Il dispose d\u00e9j\u00e0 de son propre IDE \u2014 MOGWAI STUDIO \u2014 une application WinForms compl\u00e8te avec highlighting, autocompl\u00e9tion, debug pas \u00e0 pas, et bien plus.<\/p>\n\n\n\n

Mais un IDE d\u00e9di\u00e9, \u00e7a a ses limites. Beaucoup de d\u00e9veloppeurs ne veulent pas quitter VS Code. Ils ont leurs th\u00e8mes, leurs raccourcis, leurs habitudes. Et surtout, pour quelqu’un qui d\u00e9couvre MOGWAI pour la premi\u00e8re fois, ouvrir un fichier .mog<\/code> dans VS Code et voir du texte brut sans la moindre coloration, c’est une barri\u00e8re imm\u00e9diate.<\/p>\n\n\n\n

L’id\u00e9e \u00e9tait donc simple : cr\u00e9er une extension VS Code qui rende MOGWAI accessible directement depuis l’\u00e9diteur favori de la plupart des d\u00e9veloppeurs. Pas question de tout r\u00e9impl\u00e9menter \u2014 juste ce qu’il faut pour coder confortablement.<\/p>\n\n\n\n

\n\n\n\n

Claude comme co-d\u00e9veloppeur<\/h2>\n\n\n\n

Je ne vais pas tourner autour du pot : cette extension a \u00e9t\u00e9 d\u00e9velopp\u00e9e en bin\u00f4me avec Claude<\/a> (Anthropic). Pas comme un simple outil de compl\u00e9tion de code, mais comme un v\u00e9ritable partenaire de d\u00e9veloppement.<\/p>\n\n\n

\n
\"Un<\/figure>\n<\/div>\n\n\n

La session a commenc\u00e9 par une conversation sur l’architecture. Quelles fonctionnalit\u00e9s voulais-je ? Comment le runtime MOGWAI communique-t-il ? Quels sont les formats de messages ? Claude a pos\u00e9 exactement les bonnes questions, dans le bon ordre, pour cadrer le projet avant d’\u00e9crire la premi\u00e8re ligne de code.<\/p>\n\n\n\n

Ce que j’ai particuli\u00e8rement appr\u00e9ci\u00e9 : Claude n’a jamais g\u00e9n\u00e9r\u00e9 du code \u00ab\u00a0en vrac\u00a0\u00bb. Chaque fichier a \u00e9t\u00e9 construit bloc par bloc, valid\u00e9, puis assembl\u00e9. Quand quelque chose ne fonctionnait pas, on d\u00e9bogait ensemble \u2014 lui analysant les messages d’erreur, moi testant sur ma machine et lui remontant les r\u00e9sultats.<\/p>\n\n\n\n

\n\n\n\n

L’architecture en cinq fichiers<\/h2>\n\n\n\n

Une extension VS Code, c’est finalement assez simple dans sa structure. La n\u00f4tre tient en cinq fichiers principaux :<\/p>\n\n\n\n

package.json<\/code><\/strong> \u2014 le manifeste. Il d\u00e9clare le langage .mog<\/code>, les commandes, les menus, les boutons de toolbar, les settings, et le panneau de la sidebar. C’est lui qui dit \u00e0 VS Code \u00ab\u00a0j’existe et voil\u00e0 ce que je fais\u00a0\u00bb.<\/p>\n\n\n\n

language-configuration.json<\/code><\/strong> \u2014 la configuration du langage. Auto-closing des paires \u00ab\u00bb<\/code>, {}<\/code>, []<\/code>, ()<\/code>, '<\/code>, \"<\/code>. Indentation automatique. Commentaires avec #<\/code>. Rien de spectaculaire mais essentiel pour le confort de saisie.<\/p>\n\n\n\n

mogwai.tmLanguage.json<\/code><\/strong> \u2014 la grammaire TextMate. C’est elle qui produit la coloration syntaxique des mots-cl\u00e9s statiques : structures de contr\u00f4le (if<\/code>, while<\/code>, foreach<\/code>, forever<\/code>…), op\u00e9rateurs (-><\/code>, =><\/code>, --><\/code>), sigils (&A<\/code>, @A<\/code>, !A<\/code>), strings avec interpolation {! ... }<\/code>, nombres, constantes.<\/p>\n\n\n\n

mogwai.code-snippets<\/code><\/strong> \u2014 les snippets. Dix-huit structures pr\u00eates \u00e0 l’emploi : if\/then\/else<\/code>, while\/do<\/code>, for<\/code>, foreach<\/code>, forever<\/code>, switch<\/code>, d\u00e9clarations de fonctions avec ou sans param\u00e8tres typ\u00e9s, et plus encore.<\/p>\n\n\n\n

extension.ts<\/code><\/strong> \u2014 le c\u0153ur de l’extension. 1186 lignes de TypeScript qui g\u00e8rent tout le reste : d\u00e9couverte UDP des runtimes, connexion TCP persistante, ex\u00e9cution de code, debug, panneau Runtime, autocompl\u00e9tion dynamique.<\/p>\n\n\n

\n
\"Code
Syntax highlighting<\/figcaption><\/figure>\n<\/div>\n\n\n
\n\n\n\n

Le protocole MOGWAI<\/h2>\n\n\n\n

Avant d’\u00e9crire une ligne de code r\u00e9seau, il a fallu comprendre comment MOGWAI communique. Le runtime expose un protocole TCP\/IP simple et \u00e9l\u00e9gant, bas\u00e9 sur des objets ServerMessage<\/code> s\u00e9rialis\u00e9s en JSON :<\/p>\n\n\n\n

{
  \"Source\": \"MOGWAI STUDIO\",
  \"Function\": \"RUN\",
  \"Parameters\": [\"mon code ici\"]
}<\/pre>\n\n\n\n
Chaque message a une source, une fonction, et une liste de param\u00e8tres. C’est l’ordre des param\u00e8tres qui d\u00e9termine leur signification. Simple, lisible, extensible.<\/p>\n\n\n\n
La d\u00e9couverte des runtimes sur le r\u00e9seau se fait via UDP : l’extension envoie un broadcast WHO IS HERE<\/code> sur toutes les interfaces r\u00e9seau, et les runtimes r\u00e9pondent avec I AM HERE<\/code> en fournissant leurs informations de connexion et la liste compl\u00e8te de leurs primitives.<\/p>\n\n\n
\n
\"Interface
Quick Pick runtime<\/figcaption><\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
Une fois connect\u00e9, toutes les commandes transitent sur une connexion TCP persistante. Pas de nouvelle connexion \u00e0 chaque \u00e9change \u2014 le socket reste ouvert de la connexion \u00e0 la d\u00e9connexion explicite.<\/p>\n\n\n\n
\n\n\n\n
Le grand bug UDP<\/h2>\n\n\n\n
Parlons du moment le plus \u00e9pique de cette session de d\u00e9veloppement : le bug UDP.<\/p>\n\n\n\n
L’id\u00e9e \u00e9tait simple \u2014 diffuser un message broadcast sur le r\u00e9seau local pour d\u00e9couvrir les runtimes MOGWAI disponibles. MOGWAI STUDIO fait exactement \u00e7a, en C#, sans probl\u00e8me. Mais notre impl\u00e9mentation Node.js refusait obstin\u00e9ment de fonctionner.<\/p>\n\n\n\n
On a d’abord cru \u00e0 un probl\u00e8me de port \u2014 on bindait sur 255.255.255.255<\/code> au lieu de l’adresse de broadcast du sous-r\u00e9seau. On a corrig\u00e9. Toujours rien.<\/p>\n\n\n\n
Ensuite, le port 1968 \u00e9tait d\u00e9j\u00e0 occup\u00e9 par le runtime lui-m\u00eame. On a essay\u00e9 reuseAddr: true<\/code>. Windows a r\u00e9pondu EACCES<\/code>. On a ajout\u00e9 une r\u00e8gle de firewall. Toujours EACCES<\/code>.<\/p>\n\n\n\n
On a mis des logs partout. On a ouvert les DevTools de VS Code (Help \u2192 Toggle Developer Tools \u2014 peu de gens savent que c’est possible). Et l\u00e0, on a vu nos messages partir, nos propres broadcasts nous revenir en \u00e9cho… mais aucune r\u00e9ponse du runtime.<\/p>\n\n\n\n
La cl\u00e9 \u00e9tait dans le code C# de MOGWAI STUDIO. Le runtime r\u00e9pond en unicast \u2014 directement \u00e0 l’adresse source du paquet UDP re\u00e7u \u2014 et non en broadcast. Donc si on bind sur un port fixe, le runtime r\u00e9pond \u00e0 ce port fixe, que le runtime lui-m\u00eame occupe d\u00e9j\u00e0. La solution : binder sur le port 0<\/strong> (al\u00e9atoire), laisser le syst\u00e8me choisir un port libre, et le runtime r\u00e9pond sur ce port. Simple, \u00e9l\u00e9gant, et \u00e7a a fonctionn\u00e9 imm\u00e9diatement.<\/p>\n\n\n\n
Trois heures de d\u00e9bogage pour un seul changement : remplacer socket.bind(udpPort, () => {<\/code>… par socket.bind(0, () => {<\/code>…<\/p>\n\n\n\n
\n\n\n\n
L’ex\u00e9cution et le debug<\/h2>\n\n\n\n
Une fois la connexion \u00e9tablie, l’ex\u00e9cution est remarquablement simple. On envoie le code via la commande RUN<\/code>, et le runtime r\u00e9pond avec des messages structur\u00e9s : PRG START<\/code> au lancement, PRG STOP<\/code> \u00e0 la fin normale (avec la dur\u00e9e d’ex\u00e9cution), PRG ERROR<\/code> en cas d’erreur.<\/p>\n\n\n
\n
\"Capture
Output Channel ex\u00e9cution r\u00e9ussie<\/figcaption><\/figure>\n<\/div>\n\n\n
Le message d’erreur est particuli\u00e8rement riche : il contient le code d’erreur MOGWAI (MW.2<\/code>, MW.21<\/code>…), le message complet, et surtout les positions du premier et du dernier caract\u00e8re de l’instruction en erreur dans le code source. L’extension se sert de ces positions pour surligner pr\u00e9cis\u00e9ment la zone probl\u00e9matique en rouge dans l’\u00e9diteur et y positionner le curseur automatiquement.<\/p>\n\n\n
\n
\"Capture
Erreur avec position<\/figcaption><\/figure>\n<\/div>\n\n\n
Le mode debug va plus loin. La commande DEBUG<\/code> au lieu de RUN<\/code> active la prise en compte des points d’arr\u00eat (debug.halt<\/code> ou \u00a4<\/code>). Quand le runtime se met en pause, il envoie PRG PAUSE<\/code> suivi de PRG INFO<\/code> avec la position de l’instruction courante \u2014 que l’extension surligne en bleu dans le code.<\/p>\n\n\n
\n
\"Capture
Instruction courante en bleu<\/figcaption><\/figure>\n<\/div>\n\n\n
Depuis la toolbar de l’\u00e9diteur, des boutons contextuels apparaissent selon l’\u00e9tat : Pause<\/strong> pendant l’ex\u00e9cution debug, Step<\/strong> et Resume<\/strong> en pause. Tout dispara\u00eet quand le programme s’arr\u00eate.<\/p>\n\n\n\n
\n\n\n\n
Le panneau Runtime<\/h2>\n\n\n\n
L’une des fonctionnalit\u00e9s dont je suis le plus satisfait est le panneau Runtime, visible dans la sidebar de VS Code. Il affiche en temps r\u00e9el l’\u00e9tat interne du moteur MOGWAI :<\/p>\n\n\n\n