Development of the VS Code extension for code_aster
Do you want to simplify the use of code_aster in VS Code?
This article presents a dedicated extension, designed to automate the generation of .export files, facilitate access to documentation, and enrich the development experience with auto-completion and intelligent signatures. We'll show you how it works, what technologies it uses, and the technical choices that guided its creation.
The extension was designed to simplify the daily work of code_aster users. Several key features have been developed with this goal in mind:
- An interactive form to create .export files, allowing you to quickly define simulation parameters without having to manually manipulate text blocks that are sometimes poorly documented.
- Direct and contextualized access to the official code_aster documentation, to see at a glance the definition of different commands when writing .comm files.
- Improved code readability, with syntax highlighting, completion assistance and adaptive signatures.
But how were these features designed? What were the technical choices to meet these specific needs? And what technologies does this extension rely on to offer a smooth and consistent experience in VS Code?
1. Creating the interactive form: how to implement a VS Code extension?
VS Code allows developers to extend the editor's functionality through an extension system. These rely primarily on a TypeScript/JavaScript backend, capable of communicating with the editor via the vscode module.
Implementing an interactive form means first diving into the vscode module documentation to use objects optimized for communicating with the editor.
And that's perfect! The module offers the possibility to open interactive views (called WebViews) to provide custom interfaces, beyond the classic code editor.
Setting up a WebView Panel
The form is displayed in a WebView, a side panel in the editor. Concretely, it's an HTML/CSS/JS space embedded in the editor, but controlled from the extension (written in TypeScript).
Communication between TypeScript extension and WebView via JavaScript
A key aspect of the functionality lies in bidirectional communication between the WebView (frontend) and the TypeScript backend. This is done through:
vscode.postMessage()from the WebView to the backendpanel.webview.onDidReceiveMessage()andpanel.webview.postMessage()in the other direction
This channel allows, for example, validating data, pre-filling fields, or triggering processes (like generating the .export file).
An example of .export file creation:
2. How to integrate technical documentation into a VS Code extension?
An effective extension doesn't just provide tools: it must also guide the user. For this, we needed to integrate code_aster's technical documentation seamlessly.
Identifying a reliable source
The official documentation is exhaustive but difficult to exploit as is. That's why we relied on AsterStudy, an open-source project that contains a structured database of usable commands.
Filtering and extracting the essential
The challenge: not to integrate everything, but to isolate relevant commands, their arguments, and useful descriptions, to feed completion tools, tooltips, or dynamic signatures.
Integrating data into the extension
The extracted data is then used on the TypeScript side and via a language server (see next section) to generate contextual help. This step required fine parsing and typing work, and clean integration into frontend/backend components.
An example of documentation displayed when hovering over a command:
3. Adding intelligence to code: completion, signatures and documentation
To go beyond simple text editing, the extension relies on a Language Server, a fundamental component in VS Code's architecture.
Why a Language Server?
Some advanced features (like completion or tooltips) cannot be coded on the client side. This is where the Language Server Protocol (LSP) comes in, a standardized protocol for providing editing "intelligence" in the editor.
We therefore set up a dedicated server in Python based on Pygls, to benefit from both Python's power (and its dependencies like code_aster) and compatibility with VS Code.
What the server allows to implement
- Intelligent completion: by analyzing the context, the server suggests relevant keywords and parameters.
- Dynamic signatures: when opening a parenthesis, expected parameters are displayed dynamically.
- Integrated documentation: hovering over a command displays an explanatory tooltip, enriched with types, default values, etc.
.comm file with syntax highlighting and signature display:
In short, we hope that with this article you were able to understand the ins and outs of this extension, and especially, that you'll be able to take full advantage of it! To do so, contact us to try it by writing to us at info@simvia.tech.
