Contribuí a un editor de código abierto, y tú también puedes

Hace unos meses, la publicación de Jason Grigsby sobre el autocompletado en formularios dio la vuelta. Me encantó la idea de permitir a los usuarios completar los detalles de su tarjeta de crédito tomando una foto de su tarjeta. Lo que no me gustó fue aprender de memoria todos los valores posibles para el autorrelleno. Me estoy volviendo perezoso en mi vejez.

Últimamente, me ha echado a perder el uso de un editor que realiza el autocompletado inteligente por mí, algo que en el pasado solo ofrecían los IDE complejos masivos. Al abrir el editor de mi elección, creé un elemento de input y agregué un atributo de autocomplete , solo para descubrir que la finalización del código me ofrecía el estado de on o off . Decepcionante.

Lo que queria era lo siguiente:

Lo mejor de nuestros entornos de desarrollo en estos días es que construimos las herramientas que usamos en las tecnologías que usamos para escribir. Sí, esto suena confuso: hemos llegado al código Inception. Node.js nos permite ejecutar JavaScript en el back-end, y con Electron podemos crear aplicaciones instalables para todas las plataformas usando HTML, CSS y JavaScript.

Lectura adicional en SmashingMag:

• Así que ha decidido abrir un proyecto de código abierto en el trabajo
• Una breve guía para las licencias de código abierto
• Cómo iniciar un proyecto de código abierto
• El caso del diseño de código abierto

Atom fue el primer editor en usar esta tecnología y permitir contribuciones al ser de código abierto, seguido de cerca por Visual Studio Code de Microsoft.

Casi todos los demás editores en uso nos permiten escribir extensiones, complementos o colecciones de fragmentos en varios formatos. Deliberadamente no quería escribir un complemento o una extensión, sino que quería agregar esta funcionalidad al núcleo del editor. Los complementos, extensiones y fragmentos tienen sus méritos; por ejemplo, son fáciles de actualizar. El problema es que necesitan ser encontrados e instalados por usuario. Consideré que el autocompletado era demasiado importante y, en su lugar, quería piratear el editor.

Tanto Atom como Visual Studio Code están disponibles en GitHub y vienen con instrucciones sobre cómo extenderlos. El desafío es que esto puede parecer desalentador. Estoy aquí hoy para mostrarte que no es tan difícil como crees. Visual Studio Code es mi editor actual y presenta un autocompletado increíble. Eso es lo que quería abordar.

Las herramientas extensibles y personalizables no son nada nuevo. La mayor parte de lo que usamos se puede ampliar de una forma u otra, ya sea en forma de complementos, complementos o lenguajes especializados. El primer editor que usé con ira fue Allaire y HomeSite de Macromedia, que tenía lenguajes raros como VTML, WIZML y JScript, la versión de Windows de JavaScript en ese momento. Escribí muchas extensiones y barras de herramientas para ese editor, lo que impulsó mucho la productividad de mi empresa en ese entonces.

Afortunadamente, en estos días, las empresas entienden que ofrecer idiomas especializados es una pérdida de tiempo, cuando la pila web ha crecido y se ha vuelto mucho más interesante para crear aplicaciones.

Si descarga Visual Studio Code ahora, verá que mi función de autocompletar es parte de él. Y así es como lo hice.

1. Quejarse

Mi primer paso fue ir al repositorio de GitHub de Visual Studio Code y presentar un problema solicitando esta característica para el editor. Este también podría ser su paso final si no quiere hacerlo usted mismo. Alguien más que esté buscando algo que hacer para el proyecto podría encontrar su queja y abordarla por usted. En mi caso, quería saber más.

2. Bifurca el código

En lugar de simplemente presentar un problema, fui al repositorio de GitHub y bifurqué el código. Usé mi cuenta personal para esto. No necesita estar afiliado a Microsoft ni ser agregado a un grupo especial. El repositorio es público y abierto. Todos son bienvenidos. Incluso hay un código de conducta para las contribuciones, lo que significa que la gente debería jugar bien. Descargué el código en mi disco duro y seguí las instrucciones sobre cómo construir el editor localmente.

3. Obtenga el flujo de trabajo de desarrollo en su lugar

Visual Studio Code está escrito en Node.js y TypeScript. El flujo de desarrollo comienza con una secuencia de comandos proporcionada por el equipo, que me brinda una versión de desarrollo de Visual Studio Code que se ejecuta junto a la que estoy usando. Un script que se ejecuta en la línea de comandos garantiza que se capturen mis cambios y que cada vez que guarde mi código, la versión de desarrollo del editor se reinicie y pueda probar los cambios. Todo esto está muy bien documentado, desde la creación y ejecución del código desde el origen hasta la configuración del flujo de trabajo de desarrollo. Y es independiente de la plataforma: obtiene instrucciones para Windows, Linux y Mac OS X.

Puede ver cómo se ve esto en mi computadora en la siguiente captura de pantalla. El editor de vista grande (1) es el que uso para codificar el otro; el de la derecha (3) es la edición de desarrollo; y en la parte inferior (2) está el script que crea la nueva versión de la edición de desarrollo. Escribir un editor en un editor se siente extraño, pero te acostumbras.

No te desanimes si todo esto no te funciona a la primera. Encontré algunos inconvenientes y tuve que recurrir a Google y StackOverflow para encontrar soluciones. La comunidad de Node.js fue muy útil.

4. Escribe la funcionalidad

Luego, estaba listo para hacerlo todo y usar TypeScript para escribir un código inteligente. Entendí que aquí es donde mucha gente tira la toalla, considerando que es demasiado difícil continuar.

Mi mayor problema era que no tenía idea de por dónde empezar con esta funcionalidad. Entonces, hice lo que todos hacemos: hice una búsqueda de texto completo para autocomplete en todo el proyecto. Usando este enfoque altamente científico, encontré un archivo htmlTags.ts lleno de definiciones de etiquetas y matrices de valores de atributos. Busqué el elemento de input y encontré esto:

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

Ese autocomplete:o parecía interesante, así que verifiqué dónde está definido o . Esto es lo que encontré:

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

Eso parecía lo que estaba sucediendo cuando agregué un atributo de autocomplete . Para cambiar eso, fui a la definición estándar de posibles valores de autocompletar y los copié.

Creé un nuevo conjunto de valores llamado inputautocomplete y pegué los valores:

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

Luego fui a todas las definiciones de elementos que admiten autocomplete y reemplacé la o con mi propia 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' … ]),

Guardé mis cambios; el guión reconstruyó el editor; Probé la versión de desarrollo del editor; y autocomplete funcionó como yo quería.

5. Enviar una solicitud de extracción

Eso fue eso. Confirmé mis cambios en Git (dentro de Visual Studio Code), fui a GitHub y agregué una solicitud de incorporación de cambios. Unos días después, recibí un comentario que decía que mi solicitud de extracción se realizó y que lo que hice sería parte de la próxima compilación.

6. Estar desconcertado

Francamente, no pensé que esto fuera lo suficientemente sorprendente como para justificar un cambio en el núcleo del editor. Solo quería jugar. Muchos de ustedes podrían pensar lo mismo sobre el trabajo que hacen. Y esa es la cosa: estamos equivocados. Contribuir a proyectos de código abierto no requiere que seas un desarrollador increíble. Tampoco requiere que seas famoso o parte de la multitud. A veces todo lo que necesitas hacer es mirar algo, analizarlo y encontrar una manera de mejorarlo.

Depende de nosotros hacer mejores las herramientas que usamos. Si ve una manera de contribuir a un proyecto de código abierto, no sea tímido. Puede que seas tú quien tenga una idea tan obvia y tan simple que otros la hayan pasado por alto. Usted puede ser el que hace que algo sea más útil o más agradable de ver. Todos tenemos habilidades para contribuir. Hagamos más de eso.