Contribuí para um editor de código aberto, e você também pode

Alguns meses atrás, o post de Jason Grigsby sobre preenchimento automático em formulários fez a ronda. Adorei a ideia de permitir que os usuários preencham os detalhes do cartão de crédito tirando uma foto do cartão. O que eu não amei foi aprender todos os valores possíveis para o preenchimento automático de cor. Estou ficando preguiçoso na minha velhice.

Ultimamente, tenho sido mimado por usar um editor que faz autocompletar inteligente para mim, algo que no passado apenas IDEs complexos e massivos ofereciam. Abrindo meu editor de escolha, criei um elemento input e adicionei um atributo de autocomplete , apenas para descobrir que o preenchimento de código me oferecia o estado de on ou off . Decepcionante.

O que eu queria era o seguinte:

A grande coisa sobre nossos ambientes de desenvolvimento hoje em dia é que construímos as ferramentas que usamos nas tecnologias que as usamos para escrever. Sim, isso parece confuso - chegamos ao código Inception. Node.js nos permite executar JavaScript no back-end, e com Electron podemos criar aplicativos instaláveis ​​para todas as plataformas usando HTML, CSS e JavaScript.

Leitura adicional no SmashingMag:

• Então você decidiu abrir um projeto de código aberto no trabalho
• Um pequeno guia para licenças de código aberto
• Como iniciar um projeto de código aberto
• O caso do design de código aberto

Atom foi o primeiro editor a usar essa tecnologia e permitir contribuições por ser de código aberto, seguido de perto pelo Visual Studio Code da Microsoft.

Quase todos os outros editores em uso nos permitem escrever extensões, plugins ou coleções de trechos em vários formatos. Eu deliberadamente não queria escrever um plugin ou extensão, mas queria adicionar essa funcionalidade ao núcleo do editor. Plugins, extensões e snippets têm seus méritos; por exemplo, eles são fáceis de atualizar. O problema é que eles precisam ser encontrados e instalados por usuário. Eu considerava o preenchimento automático muito importante e queria hackear o próprio editor.

Tanto o Atom quanto o Visual Studio Code estão disponíveis no GitHub e vêm com instruções sobre como estendê-los. O desafio é que isso pode parecer assustador. Estou aqui hoje para mostrar que não é tão difícil quanto você imagina. O Visual Studio Code é meu editor atual e apresenta um preenchimento automático incrível. Era isso que eu queria abordar.

Ferramentas extensíveis e personalizáveis ​​não são novidade. A maior parte do que usamos pode ser estendida de uma forma ou de outra, seja na forma de complementos, plugins ou linguagens especializadas. O primeiro editor que usei com raiva foi o Allaire and Macromedia's HomeSite, que tinha linguagens descoladas como VTML, WIZML e JScript, a versão Windows do JavaScript na época. Eu escrevi muitas extensões e barras de ferramentas para esse editor, o que aumentou muito a produtividade da minha empresa na época.

Felizmente, hoje em dia, as empresas entendem que oferecer linguagens especializadas é perda de tempo, quando a pilha da Web cresceu e se tornou muito mais interessante para criar aplicativos.

Se você baixar o Visual Studio Code agora, verá que meu recurso de preenchimento automático faz parte dele. E aqui está como eu fiz isso.

1. Reclamar

Meu primeiro passo foi ir ao repositório GitHub do Visual Studio Code e registrar um problema solicitando esse recurso para o editor. Este também pode ser o passo final se você não quiser fazer isso sozinho. Outra pessoa que está procurando algo para fazer pelo projeto pode encontrar sua reclamação e resolvê-la para você. No meu caso, queria saber mais.

2. Bifurque o Código

Em vez de apenas registrar um problema, fui ao repositório do GitHub e bifurquei o código. Usei minha conta pessoal para isso. Você não precisa ser afiliado à Microsoft ou ser adicionado a um grupo especial. O repositório é público e aberto. Todos são bem-vindos. Existe até um código de conduta para contribuições, o que significa que as pessoas devem ser legais. Baixei o código para o meu disco rígido e segui as instruções sobre como construir o editor localmente.

3. Implemente o fluxo de trabalho de desenvolvimento

O Visual Studio Code é escrito em Node.js e TypeScript. O fluxo de desenvolvimento começa com um script fornecido pela equipe, que me fornece uma versão de desenvolvimento do Visual Studio Code em execução ao lado da que estou usando. Um script em execução na linha de comando garante que minhas alterações sejam capturadas e que toda vez que eu salvar meu código, a versão de desenvolvimento do editor seja reiniciada e eu possa testar as alterações. Tudo isso está bem documentado, desde a construção e execução do código da fonte até a configuração do fluxo de trabalho de desenvolvimento. E é independente da plataforma — você recebe instruções para Windows, Linux e Mac OS X.

Você pode ver como isso se parece no meu computador na captura de tela a seguir. O editor de visualização grande (1) é o que uso para codificar o outro; o da direita (3) é a edição em desenvolvimento; e na parte inferior (2) está o script criando a nova versão da edição de desenvolvimento. Escrever um editor em um editor parece estranho, mas você se acostuma.

Não desanime se tudo isso não funcionar para você na primeira tentativa. Encontrei alguns problemas e tive que recorrer ao Google e ao StackOverflow para obter soluções. A comunidade Node.js foi muito útil.

4. Escreva a funcionalidade

Em seguida, eu estava pronto para usar o TypeScript para escrever um código inteligente. Eu entendi que é aqui que muitas pessoas jogam a toalha, considerando que é muito difícil continuar.

Meu maior problema era que eu não tinha ideia por onde começar com essa funcionalidade. Então, fiz o que todos nós fazemos: fiz uma pesquisa de texto completo para autocomplete em todo o projeto. Usando essa abordagem altamente científica, encontrei um arquivo htmlTags.ts cheio de definições de tags e matrizes de valores de atributos. Procurei o elemento input e encontrei isto:

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

Esse autocomplete:o parecia interessante, então verifiquei onde o está definido. Aqui está o que eu encontrei:

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

Isso parecia o que estava acontecendo quando adicionei um atributo de autocomplete . Para mudar isso, fui para a definição padrão de possíveis valores de preenchimento automático e os copiei.

Eu criei um novo conjunto de valores chamado inputautocomplete e colei nos 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'], … }

Em seguida, fui para todas as definições de elementos que suportam o autocomplete e substituí o o pelo meu próprio 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' … ]),

Salvei minhas alterações; o script reconstruiu o editor; Eu tentei a versão de desenvolvimento do editor; e o autocomplete funcionou do jeito que eu queria.

5. Envie uma solicitação pull

Aquilo foi aquilo. Confirmei minhas alterações no Git (dentro do Visual Studio Code), fui ao GitHub e adicionei um pull request. Alguns dias depois, recebi um comentário dizendo que minha solicitação de pull foi concluída e que o que eu fiz seria parte da próxima compilação.

6. Fique confuso

Francamente, não achei isso incrível o suficiente para justificar uma mudança no núcleo do editor. Eu só queria brincar. Muitos de vocês podem pensar o mesmo sobre o trabalho que fazem. E é isso: estamos errados. Contribuir para projetos de código aberto não exige que você seja um desenvolvedor incrível. Nem exige que você seja famoso ou faça parte da multidão. Às vezes, tudo o que você precisa fazer é olhar para algo, analisá-lo e encontrar uma maneira de melhorá-lo.

Cabe a nós melhorar as ferramentas que usamos. Se você vê uma maneira de contribuir para um projeto de código aberto, não seja tímido. Você pode ser aquele que surge com uma ideia tão óbvia e tão simples que os outros a ignoraram. Você pode ser aquele que faz algo mais útil ou mais agradável de se ver. Todos nós temos habilidades para contribuir. Vamos fazer mais disso.