Ich habe zu einem Open-Source-Editor beigetragen, und Sie können das auch

Vor einigen Monaten machte ein Beitrag von Jason Grigsby über die Autovervollständigung in Formularen die Runde. Mir gefiel die Idee, Benutzern zu ermöglichen, ihre Kreditkartendaten einzugeben, indem sie ein Foto ihrer Karte machen. Was ich nicht mochte, war, alle möglichen Werte für das automatische Ausfüllen auswendig zu lernen. In meinem Alter werde ich faul.

In letzter Zeit bin ich verwöhnt worden, einen Editor zu verwenden, der intelligente Autovervollständigung für mich erledigt, etwas, das in der Vergangenheit nur massive komplexe IDEs angeboten haben. Ich öffnete den Editor meiner Wahl, erstellte ein input und fügte ein autocomplete -Attribut hinzu, nur um festzustellen, dass die Codevervollständigung mir den Status on oder off anbot. Enttäuschend.

Was ich wollte war folgendes:

Das Tolle an unseren heutigen Entwicklungsumgebungen ist, dass wir die Tools, die wir verwenden, in den Technologien erstellen, die wir zum Schreiben verwenden. Ja, das klingt verwirrend – wir haben Code Inception erreicht. Mit Node.js können wir JavaScript im Backend ausführen, und mit Electron können wir mithilfe von HTML, CSS und JavaScript installierbare Anwendungen für alle Plattformen erstellen.

Weiterführende Literatur zu SmashingMag:

• Sie haben sich also entschieden, ein Open-Source-Projekt bei der Arbeit zu machen
• Eine kurze Anleitung zu Open-Source-Lizenzen
• So starten Sie ein Open-Source-Projekt
• Argumente für Open-Source-Design

Atom war der erste Editor, der diese Technologie verwendete und Beiträge ermöglichte, indem er Open Source war, dicht gefolgt von Microsofts Visual Studio Code.

Fast alle anderen verwendeten Editoren ermöglichen es uns, Erweiterungen, Plugins oder Snippet-Sammlungen in verschiedenen Formaten zu schreiben. Ich wollte bewusst kein Plugin oder keine Erweiterung schreiben, sondern diese Funktionalität zum Kern des Editors hinzufügen. Plugins, Erweiterungen und Snippets haben ihre Vorzüge; Beispielsweise sind sie einfach zu aktualisieren. Das Problem ist, dass sie pro Benutzer gefunden und installiert werden müssen. Ich hielt die Autovervollständigung für zu wichtig und wollte stattdessen den Editor selbst hacken.

Sowohl Atom als auch Visual Studio Code sind auf GitHub verfügbar und enthalten Anweisungen zur Erweiterung. Die Herausforderung besteht darin, dass sich dies entmutigend anfühlen kann. Ich bin heute hier, um Ihnen zu zeigen, dass es nicht so schwer ist, wie Sie vielleicht denken. Visual Studio Code ist mein aktueller Editor und bietet eine erstaunliche automatische Vervollständigung. Das wollte ich angehen.

Erweiterbare und anpassbare Tools sind nichts Neues. Das meiste, was wir verwenden, lässt sich auf die eine oder andere Weise erweitern, sei es in Form von Add-Ons, Plugins oder Fachsprachen. Der erste Editor, den ich wütend benutzte, war Allaire und Macromedias HomeSite, die abgefahrene Sprachen wie VTML, WIZML und JScript, die damalige Windows-Version von JavaScript, enthielt. Ich habe viele Erweiterungen und Symbolleisten für diesen Editor geschrieben, was die Produktivität meiner Firma damals sehr gesteigert hat.

Glücklicherweise verstehen Unternehmen heutzutage, dass das Anbieten von Fachsprachen Zeitverschwendung ist, wenn der Web-Stack viel interessanter geworden ist, um damit Anwendungen zu erstellen.

Wenn Sie Visual Studio Code jetzt herunterladen, werden Sie sehen, dass meine Autocomplete-Funktion ein Teil davon ist. Und hier ist, wie ich das gemacht habe.

1. Beschweren

Mein erster Schritt bestand darin, zum GitHub-Repository von Visual Studio Code zu wechseln und ein Problem zu melden, in dem diese Funktion für den Editor angefordert wurde. Dies könnte auch Ihr letzter Schritt sein, wenn Sie es nicht selbst tun möchten. Jemand anderes, der etwas für das Projekt zu tun sucht, könnte Ihre Beschwerde finden und sie für Sie angehen. In meinem Fall wollte ich mehr erfahren.

2. Verzweigen Sie den Code

Anstatt nur ein Problem zu melden, ging ich zum GitHub-Repository und forkte den Code. Ich habe dafür mein persönliches Konto verwendet. Sie müssen nicht mit Microsoft verbunden sein oder zu einer speziellen Gruppe hinzugefügt werden. Das Repository ist öffentlich und offen. Jeder ist willkommen. Es gibt sogar einen Verhaltenskodex für Beiträge, was bedeutet, dass die Leute nett spielen sollten. Ich habe den Code auf meine Festplatte heruntergeladen und den Anweisungen zum lokalen Erstellen des Editors gefolgt.

3. Richten Sie den Entwicklungs-Workflow ein

Visual Studio Code ist in Node.js und TypeScript geschrieben. Der Entwicklungsablauf beginnt mit einem vom Team bereitgestellten Skript, das mir eine Entwicklungsversion von Visual Studio Code bereitstellt, die neben der von mir verwendeten ausgeführt wird. Ein Skript, das auf der Befehlszeile ausgeführt wird, stellt sicher, dass meine Änderungen erfasst werden und dass jedes Mal, wenn ich meinen Code speichere, die Entwicklungsversion des Editors neu gestartet wird und ich die Änderungen testen kann. All dies ist gut dokumentiert, vom Erstellen und Ausführen des Codes aus der Quelle bis zum Einrichten des Entwicklungsworkflows. Und es ist plattformunabhängig – Sie erhalten Anleitungen für Windows, Linux und Mac OS X.

Wie das auf meinem Computer aussieht, sehen Sie im folgenden Screenshot. Der Editor für große Ansichten (1) ist derjenige, den ich verwende, um den anderen zu codieren; rechts (3) ist die Entwicklungsausgabe; und unten (2) ist das Skript, das die neue Version der Entwicklungsedition erstellt. Das Schreiben eines Editors in einem Editor fühlt sich seltsam an, aber man gewöhnt sich daran.

Lassen Sie sich nicht entmutigen, wenn all dies nicht auf Anhieb funktioniert. Ich stieß auf ein paar Haken und musste mich an Google und StackOverflow wenden, um Lösungen zu finden. Die Node.js-Community war sehr hilfreich.

4. Schreiben Sie die Funktionalität

Als nächstes war ich bereit, alles zu geben und TypeScript zu verwenden, um cleveren Code zu schreiben. Ich habe verstanden, dass viele Leute hier das Handtuch werfen, weil sie es für zu schwierig halten, weiterzumachen.

Mein größtes Problem war, dass ich keine Ahnung hatte, wo ich mit dieser Funktionalität anfangen sollte. Also habe ich getan, was wir alle tun: Ich habe im gesamten Projekt eine Volltextsuche nach autocomplete . Mit diesem hochwissenschaftlichen Ansatz fand ich eine htmlTags.ts -Datei voller Tag-Definitionen und Arrays von Attributwerten. Ich habe das input nachgeschlagen und Folgendes gefunden:

 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']),

Diese autocomplete:o sah interessant aus, also habe ich überprüft, wo o definiert ist. Hier ist, was ich gefunden habe:

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

Das sah so aus, als ob ich ein autocomplete -Attribut hinzugefügt hätte. Um das zu ändern, bin ich zur Standarddefinition möglicher Autocomplete-Werte gegangen und habe sie kopiert.

Ich habe einen neuen Wertesatz namens inputautocomplete und die Werte eingefügt:

 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'], … }

Ich ging dann zu allen Definitionen von Elementen, die autocomplete unterstützen, und ersetzte das o durch mein eigenes 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' … ]),

Ich habe meine Änderungen gespeichert; das Skript hat den Editor neu erstellt; Ich habe die Entwicklungsversion des Editors ausprobiert; und die autocomplete funktionierte so, wie ich es wollte.

5. Senden Sie eine Pull-Anfrage

Das war das. Ich habe meine Änderungen an Git (innerhalb von Visual Studio Code) übergeben, bin zu GitHub gegangen und habe eine Pull-Anforderung hinzugefügt. Ein paar Tage später erhielt ich einen Kommentar, der besagte, dass meine Pull-Anforderung durchgegangen war und dass das, was ich tat, Teil des nächsten Builds sein würde.

6. Verblüfft sein

Ehrlich gesagt fand ich das nicht erstaunlich genug, um eine Änderung am Kern des Editors zu rechtfertigen. Ich wollte nur herumspielen. Viele von Ihnen denken vielleicht dasselbe über Ihre Arbeit. Und das ist die Sache: Wir liegen falsch. Um zu Open-Source-Projekten beizutragen, müssen Sie kein großartiger Entwickler sein. Es ist auch nicht erforderlich, dass Sie berühmt oder Teil der In-Crowd sind. Manchmal muss man sich nur etwas ansehen, es analysieren und einen Weg finden, es zu verbessern.

Es liegt an uns, die Tools, die wir verwenden, besser zu machen. Wenn Sie eine Möglichkeit sehen, zu einem Open-Source-Projekt beizutragen, seien Sie nicht schüchtern. Sie könnten derjenige sein, der auf eine Idee kommt, die so offensichtlich und so einfach ist, dass andere sie übersehen haben. Sie könnten derjenige sein, der etwas brauchbarer oder schöner zum Ansehen macht. Wir alle haben Fähigkeiten, die wir einbringen können. Machen wir mehr davon.