Développement d'une extension VS Code pour code_aster
Voulez-vous simplifier l'utilisation de code_aster dans VS Code?
Cet article présente une extension dédiée, conçue pour automatiser la génération de fichiers .export, faciliter l'accès à la documentation, et enrichir l'expérience de développement avec l'auto-complétion et les signatures intelligentes. Nous allons vous montrer comment elle fonctionne, les technologies qu'elle utilise, et les choix techniques qui ont guidé sa création.
L'extension a été pensée pour simplifier le travail quotidien des utilisateurs de code_aster. Plusieurs fonctionnalités clés ont été développées dans ce but :
- Un formulaire interactif pour créer les fichiers .export, permettant de définir rapidement les paramètres de simulation sans avoir à manipuler manuellement des blocs de texte parfois mal documentés.
- Un accès direct et contextualisé à la documentation officielle de code_aster, pour consulter d'un coup d'œil la définition des différentes commandes lors de la rédaction des fichiers .comm..
- Une lisibilité du code améliorée, avec la coloration syntaxique, l'aide à la complétion et les signatures adaptatives.
Mais comment ces fonctionnalités ont-elles été conçues ? Quels ont été les choix techniques pour répondre à ces besoins spécifiques ? Et sur quelles technologies cette extension s'appuie-t-elle pour offrir une expérience fluide et cohérente dans VS Code ?
1. Création du formulaire interactif : comment implémenter une extension VS Code ?
VS Code permet aux développeurs d'étendre les fonctionnalités de l'éditeur via un système d'extensions. Celles-ci reposent principalement sur un backend TypeScript/JavaScript, capable de communiquer avec l'éditeur via le module vscode.
Implémenter un formulaire interactif, c'est d'abord plonger dans la documentation du module vscode pour utiliser des objets optimisés pour communiquer avec l'éditeur.
Et ça tombe bien ! Le module offre la possibilité d'ouvrir des vues interactives (appelées WebViews) pour fournir des interfaces personnalisées, au-delà de l'éditeur de code classique.
Mise en place d'un panneau WebView
Le formulaire est affiché dans une WebView, un panneau latéral dans l'éditeur. Concrètement, c'est un espace HTML/CSS/JS embarqué dans l'éditeur, mais contrôlé depuis l'extension (écrite en TypeScript).
Communication entre l'extension TypeScript et la WebView via JavaScript
Un aspect clé de la fonctionnalité réside dans la communication bidirectionnelle entre la WebView (frontend) et le backend TypeScript. Cela se fait via :
vscode.postMessage()de la WebView vers le backendpanel.webview.onDidReceiveMessage()etpanel.webview.postMessage()dans l'autre sens
Ce canal permet, par exemple, de valider des données, de pré-remplir des champs, ou de déclencher des processus (comme la génération du fichier .export).
Un exemple de création de fichier .export :
2. Comment intégrer la documentation technique dans une extension VS Code
Une extension efficace ne se contente pas de fournir des outils : elle doit aussi guider l'utilisateur. Pour cela, il nous fallait intégrer la documentation technique de code_aster de manière transparente.
Identification d'une source fiable
La documentation officielle est exhaustive mais difficilement exploitable telle quelle. C'est pourquoi nous nous sommes appuyés sur AsterStudy, un projet open-source qui contient une base de données structurée des commandes utilisables.
Filtrage et extraction de l'essentiel
Le défi : ne pas tout intégrer, mais isoler les commandes pertinentes, leurs arguments, et les descriptions utiles, pour alimenter les outils de complétion, les infobulles, ou les signatures dynamiques.
Intégration des données dans l'extension
Les données extraites sont ensuite utilisées côté TypeScript et via un serveur de langage (voir section suivante) pour générer l'aide contextuelle. Cette étape a nécessité un travail de parsing et de typage fin, et une intégration propre aux composants frontend/backend.
Un exemple de documentation affichée au survol d'une commande :
3. Ajouter de l'Intelligence au code : complétion, signatures et documentation
Pour aller au-delà de la simple édition de texte, l'extension s'appuie sur un Language Server, un composant fondamental dans l'architecture de VS Code.
Pourquoi un Language Server ?
Certaines fonctionnalités avancées (comme la complétion ou les infobulles) ne peuvent pas être codées côté client. C'est là qu'intervient le Language Server Protocol (LSP), un protocole standardisé pour apporter de « l'intelligence » d'édition dans l'éditeur. Nous avons donc mis en place un serveur dédié en Python basé sur Pygls, pour bénéficier à la fois de la puissance de Python (et de ses dépendances comme code_aster) et de la compatibilité avec VS Code.
Ce que le serveur permet d'implémenter
- Complétion intelligente: en analysant le contexte, le serveur suggère des mots-clés et des paramètres pertinents.
- Signatures dynamiques: à l'ouverture d'une parenthèse, les paramètres attendus sont affichés dynamiquement.
- Documentation intégrée: le survol d'une commande affiche une infobulle explicative, enrichie des types, valeurs par défaut, etc.
Fichier .comm avec coloration syntaxique et affichage des signatures :
En bref, nous espérons qu'avec cet article vous avez pu comprendre les tenants et aboutissants de cette extension, et surtout, que vous saurez en tirer pleinement parti ! Pour cela, contactez-nous pour l'essayer en nous écrivant à info@simvia.tech.
