J'ai contribué à un éditeur open-source, et vous aussi

Il y a quelques mois, le post de Jason Grigsby sur l'auto-complétion dans les formulaires a fait le tour. J'ai adoré l'idée de permettre aux utilisateurs de remplir les détails de leur carte de crédit en prenant une photo de leur carte. Ce que je n'aimais pas, c'était d'apprendre par cœur toutes les valeurs possibles pour le remplissage automatique. Je deviens paresseux dans ma vieillesse.

Dernièrement, j'ai été gâté en utilisant un éditeur qui fait de l'auto-complétion intelligente pour moi, quelque chose qui dans le passé ne proposait que des IDE complexes massifs. En ouvrant l'éditeur de mon choix, j'ai créé un élément d' input et ajouté un attribut de autocomplete -automatique, pour constater que la complétion de code m'offrait l'état on ou off . Décevant.

Ce que je voulais était le suivant :

La grande chose à propos de nos environnements de développement de nos jours est que nous construisons les outils que nous utilisons dans les technologies que nous les utilisons pour écrire. Oui, cela semble déroutant - nous avons atteint le code Inception. Node.js nous permet d'exécuter JavaScript sur le back-end, et avec Electron, nous pouvons créer des applications installables pour toutes les plateformes utilisant HTML, CSS et JavaScript.

Lectures complémentaires sur SmashingMag :

• Vous avez donc décidé d'open-sourcer un projet au travail
• Un petit guide des licences open source
• Comment démarrer un projet open-source
• Le cas de la conception open source

Atom a été le premier éditeur à utiliser cette technologie et à permettre des contributions en étant open source, suivi de près par Visual Studio Code de Microsoft.

Presque tous les autres éditeurs utilisés nous permettent d'écrire des extensions, des plugins ou des collections d'extraits dans différents formats. Je n'ai délibérément pas voulu écrire un plugin ou une extension, mais plutôt ajouter cette fonctionnalité au cœur de l'éditeur. Les plugins, extensions et snippets ont leurs mérites ; par exemple, ils sont faciles à mettre à jour. Le problème est qu'ils doivent être trouvés et installés par utilisateur. Je considérais la saisie semi-automatique trop importante et je voulais plutôt pirater l'éditeur lui-même.

Atom et Visual Studio Code sont disponibles sur GitHub et sont accompagnés d'instructions sur la façon de les étendre. Le défi est que cela peut sembler intimidant. Je suis ici aujourd'hui pour vous montrer que ce n'est pas aussi difficile que vous pourriez le penser. Visual Studio Code est mon éditeur actuel et il propose une auto-complétion incroyable. C'est ce que je voulais aborder.

Les outils extensibles et personnalisables ne sont pas nouveaux. La plupart de ce que nous utilisons peut être étendu d'une manière ou d'une autre, que ce soit sous la forme d'add-ons, de plugins ou de langages spécialisés. Le premier éditeur que j'ai utilisé avec colère était HomeSite d'Allaire et Macromedia, qui avait des langages funky comme VTML, WIZML et JScript, la version Windows de JavaScript à l'époque. J'ai écrit beaucoup d'extensions et de barres d'outils pour cet éditeur, ce qui a beaucoup stimulé la productivité de mon entreprise à l'époque.

Heureusement, de nos jours, les entreprises comprennent que proposer des langages spécialisés est une perte de temps, alors que la pile Web est devenue beaucoup plus intéressante pour créer des applications.

Si vous téléchargez Visual Studio Code maintenant, vous verrez que ma fonctionnalité de saisie semi-automatique en fait partie. Et voici comment j'ai procédé.

1. Se plaindre

Ma première étape a consisté à accéder au référentiel GitHub de Visual Studio Code et à signaler un problème demandant cette fonctionnalité pour l'éditeur. Cela pourrait également être votre dernière étape si vous ne voulez pas le faire vous-même. Quelqu'un d'autre qui cherche quelque chose à faire pour le projet pourrait trouver votre plainte et s'en occuper pour vous. Dans mon cas, je voulais en savoir plus.

2. Fourchez le code

Au lieu de simplement signaler un problème, je suis allé dans le référentiel GitHub et j'ai forké le code. J'ai utilisé mon compte personnel pour cela. Vous n'avez pas besoin d'être affilié à Microsoft ou d'être ajouté à un groupe spécial. Le dépôt est public et ouvert. Tout le monde est le bienvenu. Il existe même un code de conduite pour les contributions, ce qui signifie que les gens doivent être gentils. J'ai téléchargé le code sur mon disque dur et suivi les instructions pour construire l'éditeur localement.

3. Mettez en place le workflow de développement

Visual Studio Code est écrit en Node.js et TypeScript. Le flux de développement commence par un script fourni par l'équipe, qui me donne une version de développement de Visual Studio Code s'exécutant à côté de celle que j'utilise. Un script s'exécutant sur la ligne de commande garantit que mes modifications sont capturées et qu'à chaque fois que j'enregistre mon code, la version de développement de l'éditeur redémarre et je peux tester les modifications. Tout cela est bien documenté, de la construction et de l'exécution du code à partir de la source à la configuration du workflow de développement. Et il est indépendant de la plate-forme - vous obtenez des instructions pour Windows, Linux et Mac OS X.

Vous pouvez voir à quoi cela ressemble sur mon ordinateur dans la capture d'écran suivante. L'éditeur grand format (1) est celui que j'utilise pour coder l'autre ; celui de droite (3) est l'édition de développement ; et en bas (2) se trouve le script créant la nouvelle version de l'édition de développement. Écrire un éditeur dans un éditeur semble étrange, mais on s'y habitue.

Ne vous découragez pas si tout cela ne fonctionne pas pour vous du premier coup. J'ai rencontré quelques problèmes et j'ai dû me tourner vers Google et StackOverflow pour trouver des solutions. La communauté Node.js a été très utile.

4. Écrivez la fonctionnalité

Ensuite, j'étais prêt à tout faire et à utiliser TypeScript pour écrire du code intelligent. J'ai compris que c'est là que beaucoup de gens jettent l'éponge, considérant qu'il est trop difficile de continuer.

Mon plus gros problème était que je ne savais pas par où commencer avec cette fonctionnalité. J'ai donc fait ce que nous faisons tous : j'ai effectué une recherche plein texte pour la autocomplete -automatique dans l'ensemble du projet. En utilisant cette approche hautement scientifique, j'ai trouvé un fichier htmlTags.ts rempli de définitions de balises et de tableaux de valeurs d'attributs. J'ai cherché l'élément input et j'ai trouvé ceci:

 input: new HTMLTagSpecification( nls.localize('tags.input', 'The input element represents a typed data field, usually with a form control to allow the user to edit the data.'), ['accept', 'alt', 'autocomplete:o', 'autofocus:v', 'checked:v', 'dirname', 'disabled:v', 'form', 'formaction', 'formenctype:et', 'formmethod:fm', 'formnovalidate:v', 'formtarget', 'height', 'inputmode:im', 'list', 'max', 'maxlength', 'min', 'minlength', 'multiple:v', 'name', 'pattern', 'placeholder', 'readonly:v', 'required:v', 'size', 'src', 'step', 'type:t', 'value', 'width']),

Cette autocomplete:o avait l'air intéressante, j'ai donc vérifié où o est défini. Voici ce que j'ai trouvé :

 var valueSets: IValueSets = { … o: ['on', 'off'], … }

Cela ressemblait à ce qui se passait lorsque j'ai ajouté un attribut de autocomplete -automatique. Pour changer cela, je suis allé à la définition standard des valeurs de saisie semi-automatique possibles et je les ai copiées.

J'ai créé un nouvel ensemble de valeurs nommé inputautocomplete et collé les valeurs :

 var valueSets: IValueSets = { … inputautocomplete: ['additional-name', 'address-level1', 'address-level2', 'address-level3', 'address-level4', 'address-line1', 'address-line2', 'address-line3', 'bday', 'bday-year', 'bday-day', 'bday-month', 'billing', 'cc-additional-name', 'cc-csc', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-family-name', 'cc-given-name', 'cc-name', 'cc-number', 'cc-type', 'country', 'country-name', 'current-password', 'email', 'family-name', 'fax', 'given-name', 'home', 'honorific-prefix', 'honorific-suffix', 'impp', 'language', 'mobile', 'name', 'new-password', 'nickname', 'organization', 'organization-title', 'pager', 'photo', 'postal-code', 'sex', 'shipping', 'street-address', 't].sort()el-area-code', 'tel', 'tel-country-code', 'tel-extension', 'tel-local', 'tel-local-prefix', 'tel-local-suffix', 'tel-national', 'transaction-amount', 'transaction-currency', 'url', 'username', 'work'], … }

Je suis ensuite allé à toutes les définitions d'éléments qui prennent en charge la autocomplete -automatique et j'ai remplacé le o par mon propre inputautocomplete :

 input: new HTMLTagSpecification( nls.localize('tags.input', 'The input element represents a typed data field, usually with a form control to allow the user to edit the data.'), ['accept', 'alt', 'autocomplete:inputautocomplete' … ]),

J'ai enregistré mes modifications ; le script a reconstruit l'éditeur ; J'ai essayé la version de développement de l'éditeur ; et la autocomplete -automatique a fonctionné comme je le voulais.

5. Envoyer une demande d'extraction

C'était ça. J'ai validé mes modifications sur Git (dans Visual Studio Code), je suis allé sur GitHub et j'ai ajouté une demande d'extraction. Quelques jours plus tard, j'ai reçu un commentaire disant que ma demande d'extraction avait abouti et que ce que j'avais fait ferait partie de la prochaine version.

6. Soyez déconcerté

Franchement, je ne pensais pas que c'était assez étonnant pour justifier un changement au cœur de l'éditeur. Je voulais juste jouer. Beaucoup d'entre vous pourraient penser la même chose à propos du travail que vous faites. Et c'est le problème : nous nous trompons. Contribuer à des projets open source ne vous oblige pas à être un développeur exceptionnel. Cela ne vous oblige pas non plus à être célèbre ou à faire partie de la foule. Parfois, tout ce que vous avez à faire est de regarder quelque chose, de l'analyser et de trouver un moyen de l'améliorer.

C'est à nous d'améliorer les outils que nous utilisons. Si vous voyez un moyen de contribuer à un projet open source, ne soyez pas timide. Vous pourriez être celui qui propose une idée si évidente et si simple que d'autres l'ont ignorée. Vous pourriez être celui qui rend quelque chose plus utilisable ou plus agréable à regarder. Nous avons tous des compétences à apporter. Faisons plus de cela.