Ho contribuito a un editor open source e anche tu puoi

Alcuni mesi fa, il post di Jason Grigsby sull'autocompletamento nei moduli ha fatto il giro. Mi è piaciuta l'idea di consentire agli utenti di inserire i dettagli della loro carta di credito scattando una foto della loro carta. Quello che non mi piaceva era imparare a memoria tutti i valori possibili per il riempimento automatico. Sto diventando pigro nella mia vecchiaia.

Ultimamente, sono stato viziato dall'usare un editor che esegue il completamento automatico intelligente per me, qualcosa che in passato offrivano solo enormi IDE complessi. Aprendo il mio editor di scelta, ho creato un elemento di input e ho aggiunto un attributo di autocomplete , solo per scoprire che il completamento del codice mi offriva lo stato on o off . Deludente.

Quello che volevo era il seguente:

La cosa grandiosa dei nostri ambienti di sviluppo in questi giorni è che costruiamo gli strumenti che utilizziamo nelle tecnologie che li usiamo per scrivere. Sì, sembra confuso: abbiamo raggiunto il codice Inception. Node.js ci consente di eseguire JavaScript sul back-end e con Electron possiamo creare applicazioni installabili per tutte le piattaforme utilizzando HTML, CSS e JavaScript.

Ulteriori letture su SmashingMag:

• Quindi hai deciso di creare un progetto open source al lavoro
• Una breve guida alle licenze Open Source
• Come avviare un progetto open source
• Il caso del design open source

Atom è stato il primo editor a utilizzare questa tecnologia ea consentire contributi essendo open source, seguito da vicino da Visual Studio Code di Microsoft.

Quasi tutti gli altri editor in uso ci consentono di scrivere estensioni, plugin o raccolte di snippet in vari formati. Non volevo deliberatamente scrivere un plug-in o un'estensione, ma volevo piuttosto aggiungere questa funzionalità al nucleo dell'editor. Plugin, estensioni e snippet hanno i loro pregi; ad esempio, sono facili da aggiornare. Il problema è che devono essere trovati e installati per utente. Consideravo il completamento automatico troppo importante e volevo invece hackerare l'editor stesso.

Sia Atom che Visual Studio Code sono disponibili su GitHub e includono istruzioni su come estenderli. La sfida è che questo può sembrare scoraggiante. Sono qui oggi per mostrarti che non è così difficile come potresti pensare. Visual Studio Code è il mio editor attuale e presenta un incredibile completamento automatico. Questo è ciò che volevo affrontare.

Gli strumenti estensibili e personalizzabili non sono una novità. La maggior parte di ciò che utilizziamo può essere esteso in un modo o nell'altro, sotto forma di componenti aggiuntivi, plug-in o linguaggi specialistici. Il primo editor che ho usato con rabbia è stato Allaire e HomeSite di Macromedia, che aveva linguaggi funky come VTML, WIZML e JScript, la versione Windows di JavaScript all'epoca. Ho scritto molte estensioni e barre degli strumenti per quell'editor, il che ha notevolmente aumentato la produttività della mia azienda all'epoca.

Per fortuna, in questi giorni le aziende capiscono che offrire linguaggi specialistici è una perdita di tempo, quando lo stack web è diventato molto più interessante con cui creare applicazioni.

Se scarichi Visual Studio Code ora, vedrai che la mia funzionalità di completamento automatico ne fa parte. Ed ecco come l'ho fatto.

1. Reclami

Il mio primo passaggio è stato quello di accedere al repository GitHub di Visual Studio Code e segnalare un problema richiedendo questa funzionalità per l'editor. Questo potrebbe anche essere il tuo ultimo passaggio se non vuoi farlo da solo. Qualcun altro che sta cercando qualcosa da fare per il progetto potrebbe trovare il tuo reclamo e affrontarlo per te. Nel mio caso volevo saperne di più.

2. Forcella il codice

Invece di segnalare un problema, sono andato al repository GitHub e ho eseguito il fork del codice. Ho usato il mio account personale per questo. Non è necessario essere affiliato a Microsoft o essere aggiunto a un gruppo speciale. Il repository è pubblico e aperto. Tutti sono i benvenuti. C'è anche un codice di condotta per i contributi, il che significa che le persone dovrebbero giocare bene. Ho scaricato il codice sul mio disco rigido e ho seguito le istruzioni su come creare l'editor in locale.

3. Metti in atto il flusso di lavoro di sviluppo

Il codice di Visual Studio è scritto in Node.js e TypeScript. Il flusso di sviluppo inizia con uno script fornito dal team, che mi fornisce una versione di sviluppo di Visual Studio Code in esecuzione accanto a quella che sto utilizzando. Uno script in esecuzione sulla riga di comando assicura che le mie modifiche vengano acquisite e che ogni volta che salvo il codice, la versione di sviluppo dell'editor si riavvii e io possa testare le modifiche. Tutto questo è ben documentato, dalla creazione e dall'esecuzione del codice dal sorgente all'impostazione del flusso di lavoro di sviluppo. Ed è indipendente dalla piattaforma: ottieni istruzioni per Windows, Linux e Mac OS X.

Puoi vedere come appare sul mio computer nello screenshot seguente. L'editor wide-view (1) è quello che uso per codificare l'altro; quella a destra (3) è l'edizione di sviluppo; e in basso (2) c'è lo script che crea la nuova versione dell'edizione di sviluppo. Scrivere un editor in un editor è strano, ma ci si abitua.

Non scoraggiarti se tutto questo non funziona per te al primo tentativo. Ho riscontrato alcuni ostacoli e ho dovuto rivolgermi a Google e StackOverflow per le soluzioni. La community di Node.js è stata molto utile.

4. Scrivi la funzionalità

Successivamente, ero pronto per andare all in e usare TypeScript per scrivere del codice intelligente. Ho capito che è qui che molte persone gettano la spugna, considerando che è troppo difficile continuare.

Il mio problema più grande era che non avevo idea da dove cominciare con questa funzionalità. Quindi, ho fatto quello che facciamo tutti: ho fatto una ricerca di testo completo per il autocomplete nell'intero progetto. Utilizzando questo approccio altamente scientifico, ho trovato un file htmlTags.ts pieno di definizioni di tag e array di valori di attributo. Ho cercato l'elemento di input e ho trovato questo:

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

Quel autocomplete:o sembrava interessante, quindi ho controllato dove o è definito. Ecco cosa ho trovato:

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

Sembrava quello che stava succedendo quando ho aggiunto un attributo di autocomplete . Per cambiarlo, sono andato alla definizione standard di possibili valori di completamento automatico e li ho copiati.

Ho creato un nuovo set di valori chiamato inputautocomplete e incollato nei valori:

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

Sono quindi passato a tutte le definizioni degli elementi che supportano il autocomplete e ho sostituito o con il mio 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' … ]),

Ho salvato le mie modifiche; lo script ha ricostruito l'editor; Ho provato la versione di sviluppo dell'editor; e il autocomplete ha funzionato come volevo.

5. Invia una richiesta pull

Quello era quello. Ho eseguito il commit delle mie modifiche su Git (all'interno di Visual Studio Code), sono andato su GitHub e ho aggiunto una richiesta pull. Alcuni giorni dopo, ho ricevuto un commento in cui si diceva che la mia richiesta di pull è andata a buon fine e che ciò che ho fatto sarebbe stato parte della build successiva.

6. Sii sconcertato

Francamente, non pensavo che questo fosse abbastanza sorprendente da giustificare un cambiamento nel nucleo dell'editor. Volevo solo giocare. Molti di voi potrebbero pensare lo stesso del lavoro che fate. E questo è il punto: ci sbagliamo. Contribuire a progetti open source non richiede che tu sia uno sviluppatore straordinario. Né richiede che tu sia famoso o parte della folla. A volte tutto ciò che devi fare è guardare qualcosa, analizzarla e trovare un modo per migliorarla.

Sta a noi migliorare gli strumenti che utilizziamo. Se vedi un modo per contribuire a un progetto open source, non essere timido. Potresti essere tu quello che ha un'idea così ovvia e così semplice che altri l'hanno trascurata. Potresti essere quello che rende qualcosa di più utilizzabile o più bello da guardare. Tutti abbiamo le capacità per contribuire. Facciamo di più.