Une toute nouvelle extension Visual Studio Code à votre disposition

4D prend désormais en charge le protocole Language Server pour permettre à des éditeurs de code source externes de manipuler du code 4D et de leur fournir des fonctionnalités standard telles que la coloration syntaxique, l’aide syntaxique, l’accès à la définition ou la saisie anticipée. Voyons comment en tirer parti dans Visual Studio Code.

Important

Nous savons que la communauté 4D est très attachée à l’éditeur de code inclus dans l’IDE 4D. Il vous permet de développer rapidement, avec tout ce dont vous avez besoin pour construire une application métier, sans quitter 4D : concevoir une structure de données, concevoir des écrans, coder, tester et recommencer.
Avec la sortie de Projects in 4D, nous avons ouvert la porte au contrôle des sources et à l’édition des sources 4D en dehors de 4D IDE.
Nous constatons sur le forum et dans les discussions que les avis divergent. Certains d’entre vous n’envisageraient jamais d’utiliser autre chose que 4D IDE – que nous continuons à améliorer version après version. Cependant, un nombre croissant de développeurs 4D utilisent déjà d’autres éditeurs tels que Visual Studio Code car ils y trouvent de nombreux avantages : possibilité d’ouvrir un projet 4D pour travailler sur la source 4D mais aussi sur d’autres sources (HTML ou javascript, par exemple), outil répandu dans la communauté des développeurs en général, intégration avec Git, etc.
C’est pourquoi nous voulons profiter de la sortie de la version v19 R6 de 4D pour vous proposer une extension VS Code « 4D Analyzer » et recueillir vos commentaires à son sujet. Cette extension ne prend en charge que la coloration syntaxique à ce stade, mais nous prévoyons d’en fournir davantage dans les semaines/mois à venir : tapez à l’avance et tous les avantages que 4D pourrait tirer du support de LSP.
Bien sûr, cette initiative n’a pas d’impact sur votre éditeur de code 4D ! C’est un support de réflexion, pour échanger avec vous sur toutes les possibilités, et pour partager des idées.

Nous espérons que vous aurez plaisir à l’utiliser !

Rendu dans Visual Studio Code

Voici le rendu d’un fichier 4DM ouvert dans VS Code lorsque la nouvelle extension est installée, avec la coloration syntaxique par défaut :

Si vous voulez rendre votre code encore plus lisible dans VS Code, n’oubliez pas que vous pouvez configurer 4D pour écrire les fichiers 4DM sans tokens.

Comment cela fonctionne-t-il ?

Une extension VS Code pour la coloration syntaxique du code 4D était déjà disponible, mais elle était basée sur regex et était limitée à la coloration syntaxique.

A partir de la v19 R6, 4D supporte le Language Server Protocol (LSP ), une interface standard entre les éditeurs de code et les langages.
LSP fournit plusieurs fonctionnalités couramment utilisées dans les éditeurs de code, comme la coloration syntaxique, l’aide syntaxique, l’accès à la définition ou la saisie anticipée. L’équipe 4D intègre ce protocole standard et a créé une toute nouvelle extension Visual Studio Code pour en tirer parti.
Techniquement, lorsque vous ouvrez un fichier 4DM avec VS code, l’extension lance une instance 4D en mode headless pour communiquer avec son serveur LSP. Cette instance 4D charge le fichier 4DM et le contexte pour fournir les fonctionnalités LSP à l’éditeur VS Code via l’extension.

Installation de l’extension Visual Studio Code

L’installation de l’extension est très simple. Il suffit d’ouvrir VS Code, l’onglet Extensions, et de rechercher l’extension « 4D-Analyzer » dans le marché.
Une fois trouvée, sélectionnez-la et cliquez sur le bouton « installer ».

Une autre solution consiste à télécharger l’extension 4D-Analyzer directement depuis la place de marché de Visual Studio Code!

Une fois l’installation terminée, ouvrez les paramètres de l’extension (le bouton avec la petite icône en forme d’engrenage). Dans le paramètre Server Path, entrez le chemin de l’application 4D (4D ou 4D Server) qui sera utilisée par l’extension.

Si vous développez sur macOS, il y a une limitation du système d’exploitation que vous devez connaître : le système ne vous permettra pas d’ouvrir une instance 4D (autonome ou serveur) si vous l’avez déjà exécutée avec le code VS. La solution de contournement consiste à configurer un exécutable distinct dans l’extension ou à ouvrir 4D avant VSCode.

Ouverture d’un fichier 4DM

Une fois l’extension installée et configurée, vous pouvez voir le résultat !

Selon la façon dont vous utilisez VS Code, vous pouvez ouvrir un seul fichier 4DM en utilisant le menu « Open file » ou un projet entier en utilisant le menu « Open folder » et en sélectionnant le dossier du projet. Dans le dernier cas, il suffit de cliquer sur un fichier 4DM dans l’explorateur VS Code pour l’ouvrir dans l’éditeur.

Lors de l’ouverture d’un fichier 4DM dans l’éditeur VS Code, l’extension lancera une instance exécutable 4D en mode headless qui traitera le fichier 4DM. Ainsi, l’instance exécutable 4D manipulera le projet entier du fichier 4DM pour charger tout le contexte du code du projet. Et lorsque la fenêtre VS Code est fermée, l’instance 4D dédiée à cette fenêtre est également fermée.

Vous pouvez constater que tout est géré automatiquement pour vous !

Une première étape

Après avoir installé et paramétré l’extension VS Code, vous bénéficierez automatiquement des autres capacités LSP offertes par les versions ultérieures de 4D. Pour l’instant, la prochaine étape consiste à paramétrer les couleurs en fonction de votre schéma de couleurs, comme expliqué dans cet article de blog.

Nous sommes très enthousiastes à propos de cette nouvelle extension. N’hésitez pas à nous faire part de vos commentaires sur le forum 4D !