Un développeur a présenté une nouvelle extension pour l’éditeur de code open source de Microsoft, Visual Studio Code. L’extension du nom de Gimli est un outil de programmation visuelle à l’endroit des développeurs front-end pour leur permettre de faire de la mise en page, de la manipulation du code d’un template existant, d’importer des extraits personnalisés, etc. Selon sa FAQ, l’outil est actuellement en version bêta et devrait être disponible vers la fin du troisième trimestre ou le début du quatrième trimestre de l’année 2019 et sa première version stable est prévue pour début 2020. Il existe actuellement peu d’explications sur Gimli de la part de son concepteur. Une chose qu’il a promis de rectifier au fur et à mesure que la conception de Gimli avance. Cependant, il souligne que l’extension dispose de nombreuses fonctionnalités et qu’il ne s’agit pas simplement d’une solution « no code » contrairement à ce que beaucoup pourraient penser en le voyant. « Contrairement aux autres plateformes de développement visuel, Gimli est destiné aux développeurs front-end. Gimli n'est pas une solution « no code ». Au lieu de cela, il essaie de combiner les outils visuels que l'on trouve souvent dans les solutions « no code » avec votre environnement de développement Visual Studio Code », a-t-il expliqué. Pour son fonctionnement, Gimli dispose d’un minuscule script que vous devez inclure au cours de votre développement. Selon les réponses tirées de la FAQ dédiée à l’extension Gimli, sa configuration serait très simple et pourrait être réalisée avec l’aide des outils de compilation comme webpack ou manuellement. Voici présenter ci-dessous quelques-uns des fonctionnalités de Gimli :
Gimli apporte des outils de mise en page
La création de mises en page dynamiques complexes nécessite souvent l'utilisation de Grid et de Flexbox. Apprendre toutes les propriétés possibles et leur interaction peut être difficile. Gimli résout ce problème en fournissant des outils visuels qui simplifient grandement ce processus. En "mode présentation", Gimli active les outils de présentation en fonction de l'élément sélectionné. Par exemple, si la propriété d'affichage d'un élément est définie sur Grid, un ensemble d'outils axés sur Grid sera activé. Si un élément a un parent avec une propriété d'affichage définie sur Flex, un ensemble d'outils axés sur les éléments flexibles sera activé, etc.
Gimli vous permet de trouver la source d’un élément HTML de la page Web
Naviguez facilement dans vos fichiers grâce à la fonction « trouver la source » de Gimli. L’extension vous permet de trouver instantanément le code source des règles CSS et des éléments HTML. Lorsque vous sélectionnez un élément HTML de votre template, un simple click sur le bouton "source" ouvrira instantanément le code source pour cet élément ou une règle CSS.
Gimli permet d’appliquer des styles
Pas besoin de copier et coller des styles. En utilisant la fonctionnalité "Appliquer les styles" de Gimli, vous pouvez voir quels styles ont été ajoutés, supprimés ou modifiés. Vous pouvez ensuite appliquer tout ou une partie de ces différents styles.
Gimli fonctionne avec n’importe quel framework ou bibliothèque
Comme les outils de développement de votre navigateur, Gimli est conçu pour fonctionner avec n’importe quel framework ou bibliothèque avec lequel vous avez choisi de travailler. D’après ses concepteurs, jusqu'à présent, Gimli a été testé avec React, WordPress, Bootstrap, VueJS, Angular et Stencil.
Par ailleurs, selon son créateur, ces quatre caractéristiques précitées ne constituent qu’un avant-goût de la puissance de l’extension. Ces fonctionnalités représentent ceux qui fonctionnent réellement à l’heure actuelle pour l’extension Gimli. Il espère, avec le temps et les ressources nécessaires, continuer à améliorer les fonctionnalités existantes et à implémenter de nouvelles fonctionnalités. Pour les fonctionnalités futures à implémenter, il cite : la typographie et des outils de texte, la possibilité d’importer des extraits personnalisés, des outils de transformation et de perspective, l’exportation HTML et le formatage, une vue de l’arborescence du DOM et des outils pour les couleurs et les marques.
Cela dit, aucune version bêta de l’extension n’est disponible pour essai, ce que demande d’ailleurs la communauté. Ils estiment que cela aidera le créateur de Gimli à avoir un peu plus de contributions de la part de la communauté et plus de retours sur les éventuels bugs ou améliorations qu’il pourrait corriger ou apporter au produit. « Je vous recommande de rendre l'application disponible pour les tests bêta avec certains utilisateurs. Ne faites pas l'erreur d'attendre d'avoir le produit parfait, car vous êtes seul et vos ressources sont limitées », a déclaré l’un d’entre eux.
D’autres de leur côté l’incitent à rendre le projet open source. « Une suggestion que je peux vous faire est de rendre le projet open source ou au moins gratuit pour un usage personnel. Cela amènera beaucoup d'utilisateurs qui voudront avoir le même outillage sur leur lieu de travail. Vous pouvez alors avoir des licences commerciales que vous faites payer aux entreprises », explique l’un d’eux.
Source : Gimli
Et vous ?
Que pensez-vous de cette extension pour Visual Studio Code ?Voir aussi
Visual Studio Code 1.8 disponible avec le mode Zen pour écrire son code sans distraction et d'autres améliorations pour la productivité et l'UX Les outils Cordova débarquent sur Visual Studio Code sous forme d'extension pour faciliter le développement d'applications mobiles cross-platform Visual Studio Code 1.31 est disponible et permet désormais d'installer des extensions sans redémarrer l'éditeur Microsoft lance une extension de débogage Java pour Visual Studio Code et envisage d'offrir un support complet pour le développement Java sur VS Code 
