Zed, l'éditeur de code gratuit et open source, a publié dans sa version stable les très attendues parenthèses arc-en-ciel (rainbow brackets), introduisant des niveaux codés par couleur afin d'améliorer la lisibilité des codes profondément imbriqués. Annoncée par l'ingénieur Kirill Bulatov, cette fonctionnalité applique des couleurs distinctes aux niveaux de parenthèses imbriquées, ce qui permet un suivi visuel plus rapide des structures de code complexes, tout en offrant une activation par langage et un comportement des couleurs personnalisable. Zed est un éditeur de code open source pour Linux, macOS et Windows écrit en langage de programmation Rust. Il a été lancé par Nathan Sobo, l'un des créateurs d'Atom, et est développé par Zed Industries. L'éditeur lui-même est gratuit, mais les utilisateurs doivent payer pour utiliser certaines fonctionnalités d'IA. Les principales fonctionnalités de Zed comprennent l'édition collaborative en temps réel, des raccourcis clavier Vim optionnels et la prise en charge de Git. Zed prend également en charge les extensions.
Cette mise à jour intervient quelques mois après que Zed soit devenu un projet open source, un tournant majeur annoncé en janvier 2024 par les créateurs d’Atom et de Tree-sitter. En adoptant des licences copyleft pour l’éditeur et les composants serveur, le projet entend garantir que chaque amélioration profite à l’ensemble de la communauté, tandis que son framework GPUI, sous licence Apache 2, offre une base flexible pour des applications de bureau performantes.
Kirill Bulatov, l'un des ingénieurs logiciels à l'origine de Zed, a annoncé l'arrivée des parenthèses arc-en-ciel, une fonctionnalité réclamée par les utilisateurs depuis plus de trois ans, le 3 décembre dernier. Elle est désormais disponible dans la version stable de l'éditeur de code et s'adresse aux utilisateurs qui travaillent avec des fonctions complexes ou profondément imbriquées.
« En guise de cadeau de Noël de la part de Zed, nous vous proposons notre fonctionnalité la plus demandée à l'heure actuelle : les parenthèses arc-en-ciel. Si vous vous êtes déjà retrouvé à fixer une fonction profondément imbriquée en vous demandant quelle parenthèse correspondait à quoi, cette fonctionnalité est faite pour vous », a déclaré Kirill Bulatov. « Les parenthèses arc-en-ciel sont la fonctionnalité Zed la plus demandée depuis plus de 3 ans. Elle est disponible dès aujourd'hui dans la version stable. »
Grâce à cette fonctionnalité, chaque niveau de parenthèses imbriquées reçoit une couleur unique, ce qui permet aux développeurs de suivre plus facilement les blocs de code et de faire correspondre les parenthèses d'un seul coup d'œil. Si cette amélioration facilite la lisibilité du code pour tout le monde, elle est particulièrement utile pour ceux qui naviguent dans des bases de code complexes ou qui gèrent des fichiers volumineux.
Les parenthèses arc-en-ciel sont désactivés par défaut. Pour les utiliser, les utilisateurs doivent rechercher « Coloriser les parenthèses » dans les paramètres de l'application et activer l'option. Ce paramètre peut être personnalisé davantage : les utilisateurs peuvent activer les parenthèses arc-en-ciel pour des langages de programmation spécifiques, utiliser des couleurs de parenthèses adaptées au thème pour une meilleure intégration visuelle, ou même exclure certains types de parenthèses selon les besoins.
Modifications du code
Selon Kirill Bulatov, les modifications apportées au code ont été relativement limitées. L'ajout principal est une structure TreeSitterData qui réside dans chaque tampon :
| Code rust : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | pub struct TreeSitterData { chunks: RowChunks, brackets_by_chunks: Vec<Option<Vec<BracketMatch<usize>>>>, } pub struct BracketMatch<T> { pub open_range: Range<T>, pub close_range: Range<T>, pub color_index: Option<usize>, } |
Le champ chunks divise le tampon en segments de 50 lignes, chacun suivant sa propre version. Le champ brackets_by_chunks met en cache les résultats de la requête bracket pour chaque chunk. Lorsqu'un tampon change, le cache est invalidé immédiatement, mais une requête tree-sitter n'est relancée que lorsqu'un éditeur a réellement besoin d'afficher cette plage.
Du côté de l'éditeur, chaque éditeur garde une trace des morceaux qu'il a déjà récupérés. Lorsqu'un utilisateur fait défiler ou modifie le texte, l'éditeur demande au tampon les données des parenthèses dans la zone visible. Si ces morceaux sont mis en cache et toujours valides, ils sont renvoyés immédiatement. Sinon, Tree-Sitter est interrogé, les résultats sont mis en cache et les couleurs sont appliquées pour mettre le texte en évidence.
« Nous réutilisons l'infrastructure de mise en évidence existante de Zed pour le rendu réel, et nous veillons à ce que le contraste avec l'arrière-plan de l'éditeur soit minimal afin que les crochets restent lisibles quel que soit votre thème », a indiqué Kirill Bulatov.
Décisions de conception
Les décisions qui ont influencé la mise en œuvre sont :
Stockage des données des parenthèses dans la mémoire tampon, et non dans l'éditeur : Les éditeurs dans Zed sont éphémères. On peut les diviser, les fermer, avoir plusieurs éditeurs pointant vers le même fichier. La mémoire tampon est l'entité stable, selon Kirill Bulatov, c'est donc là que les résultats des requêtes de parenthèses sont mises en cache.
Invalidation rapide, réinterrogation lente : Les blocs sont invalidés à chaque modification du tampon (c'est-à-dire à chaque augmentation de la version clock::Global), mais une nouvelle requête à Tree-Sitter n'est renvoyée que lorsqu'un éditeur a réellement besoin d'afficher ces parenthèses, généralement uniquement dans la zone visible. Le remplissage se fait en fonction des zones visibles et des actions des éditeurs (défilement, redimensionnement des extraits multi-tampons, etc.).
Réutilisation des couleurs d'accentuation du thème : Chaque niveau d'imbrication reçoit la couleur d'accentuation suivante, puis revient au début une fois toutes les couleurs utilisées. Les utilisateurs de l'éditeur peuvent personnaliser ces couleurs via les remplacements de thème.
Activation par langue : Toutes les langues ne tirent pas le même parti des parenthèses arc-en-ciel. Zed permet donc de les activer ou de les désactiver pour chaque langue dans les paramètres.
Notation des tests visuels
Les développeurs de Zed indiquent qu'une grande partie de la mise en œuvre consistait en des tests. Ils ont principalement travaillé sur l'API de l'éditeur, et le fait d'avoir des tests à ce niveau les ont mieux aidés à raisonner sur la mise en œuvre.
L'équipe de développement a fini par visualiser les tests avec une notation similaire à celle utilisée par Zed pour les tests de sélection, chaque paire de crochets étant annotée avec son index de couleur :
| Code rust : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | fn main«1()1» «1{ let a = one«2(«3()3», «3{ «4()4» }3», «3()3»)2»; println!«2("{a}")2»; println!«2("{a}")2»; for i in 0..a «2{ println!«3("{i}")3»; }2» let b = «2{ «3{ «4{ «5[«6(«7[«1(«2[«3(«4[«5(«6[«7(«1[«2(«3[«4(«5[«6(«7[«1(«2[«3(«4()4», «4()4»)3»]2»)1»]7»)6»]5»)4»]3»)2»]1»)7»]6»)5»]4»)3»]2»)1»]7»)6»]5» }4» }3» }2»; }1» |
Cet extrait permet de voir comment les parenthèses profondément imbriquées parcourent les couleurs 1 à 7 et reviennent au début.
Performances
Selon l'équipe de Zed, Tree-sitter est déjà assez rapide, mais elle a tout de même voulu faire preuve de prudence. Les développeurs de l'outil ont apporté quelques améliorations en amont afin de réduire le nombre de nœuds d'arborescence traités pour les requêtes entre crochets.
[LIST][*] Ajout d'API « containing range » à QueryCursor[*] Correction de l'exécution lente des requêtes TreeSitter...[/*]
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.