Я внес свой вклад в редактор с открытым исходным кодом, и вы тоже можете

Несколько месяцев назад пост Джейсона Григсби об автозаполнении форм получил широкое распространение. Мне понравилась идея позволить пользователям вводить данные своей кредитной карты, фотографируя свою карту. Что мне не понравилось, так это выучить наизусть все возможные значения для автозаполнения. Я становлюсь ленивым в старости.

В последнее время я был избалован использованием редактора, который делает для меня интеллектуальное автозаполнение, что в прошлом предлагалось только массивными сложными IDE. Открыв предпочитаемый мной редактор, я создал элемент input и добавил атрибут autocomplete , но обнаружил, что автозавершение кода предлагало мне состояние on или off . Разочаровывает.

Я хотел следующее:

Самое замечательное в наших средах разработки в наши дни заключается в том, что мы создаем инструменты, которые мы используем, в технологиях, которые мы используем для написания. Да, это звучит запутанно — мы добрались до исходного кода. Node.js позволяет нам запускать JavaScript на серверной части, а с помощью Electron мы можем создавать устанавливаемые приложения для всех платформ с использованием HTML, CSS и JavaScript.

Дальнейшее чтение на SmashingMag:

• Итак, вы решили сделать проект с открытым исходным кодом на работе
• Краткое руководство по лицензиям с открытым исходным кодом
• Как начать проект с открытым исходным кодом
• Дело в дизайне с открытым исходным кодом

Atom был первым редактором, который использовал эту технологию и позволял вносить свой вклад, будучи открытым исходным кодом, за которым последовал Visual Studio Code от Microsoft.

Почти все другие используемые редакторы позволяют нам писать расширения, плагины или коллекции фрагментов в различных форматах. Я намеренно не хотел писать плагин или расширение, а хотел добавить эту функциональность в ядро ​​редактора. Плагины, расширения и сниппеты имеют свои достоинства; например, их легко обновить. Проблема в том, что их нужно найти и установить для каждого пользователя. Я посчитал автодополнение слишком важным и вместо этого хотел взломать сам редактор.

И Atom, и Visual Studio Code доступны на GitHub и содержат инструкции по их расширению. Проблема в том, что это может показаться пугающим. Сегодня я здесь, чтобы показать вам, что это не так сложно, как вы думаете. Visual Studio Code — мой текущий редактор, и в нем есть потрясающее автозаполнение. Это то, чем я хотел заняться.

В расширяемых и настраиваемых инструментах нет ничего нового. Большая часть того, что мы используем, может быть тем или иным образом расширена, будь то в виде надстроек, плагинов или специализированных языков. Первым редактором, который я использовал в гневе, был Allaire and Macromedia HomeSite, у которого были необычные языки, такие как VTML, WIZML и JScript, версия JavaScript для Windows в то время. Я написал множество расширений и панелей инструментов для этого редактора, что в то время значительно повысило производительность моей компании.

К счастью, в наши дни компании понимают, что предлагать специализированные языки — это пустая трата времени, когда веб-стек вырос и стал намного интереснее создавать приложения.

Если вы загрузите Visual Studio Code сейчас, вы увидите, что моя функция автозаполнения является его частью. И вот как я это сделал.

1. Пожаловаться

Моим первым шагом было перейти в репозиторий Visual Studio Code на GitHub и зарегистрировать проблему с запросом этой функции для редактора. Это также может быть вашим последним шагом, если вы не хотите делать это самостоятельно. Кто-то еще, кто ищет что-то сделать для проекта, может найти вашу жалобу и решить ее для вас. В моем случае я хотел узнать больше.

2. Разветвите код

Вместо того, чтобы просто зарегистрировать проблему, я пошел в репозиторий GitHub и разветвил код. Я использовал для этого свой личный кабинет. Вам не нужно быть аффилированным с Microsoft или добавляться в специальную группу. Репозиторий является общедоступным и открытым. Приветствуем всех. Существует даже кодекс поведения для взносов, который означает, что люди должны вести себя хорошо. Я загрузил код на свой жесткий диск и следовал инструкциям по сборке редактора локально.

3. Организуйте рабочий процесс разработки

Код Visual Studio написан на Node.js и TypeScript. Процесс разработки начинается со сценария, предоставленного командой, который дает мне версию Visual Studio Code для разработки, работающую рядом с той, которую я использую. Сценарий, работающий в командной строке, гарантирует, что мои изменения фиксируются и каждый раз, когда я сохраняю свой код, версия редактора для разработки перезапускается, и я могу протестировать изменения. Все это хорошо задокументировано, от создания и запуска кода из исходного кода до настройки рабочего процесса разработки. И это не зависит от платформы — вы получаете инструкции для Windows, Linux и Mac OS X.

Вы можете увидеть, как это выглядит на моем компьютере, на следующем снимке экрана. Редактор с большим экраном (1) — это тот, который я использую для кодирования другого; тот, что справа (3), — версия для разработчиков; а внизу (2) находится скрипт, создающий новую версию редакции для разработчиков. Написание редактора в редакторе кажется странным, но к этому привыкаешь.

Не расстраивайтесь, если все это не сработает у вас с первого раза. Я столкнулся с несколькими проблемами, и мне пришлось обратиться к Google и StackOverflow за решениями. Сообщество Node.js было очень полезным.

4. Напишите функциональность

Затем я был готов пойти ва-банк и использовать TypeScript для написания умного кода. Я понял, что именно здесь многие сдаются, считая, что это слишком сложно для продолжения.

Моя самая большая проблема заключалась в том, что я понятия не имел, с чего начать с этой функциональностью. Итак, я сделал то, что делаем все мы: я сделал полнотекстовый поиск для autocomplete по всему проекту. Используя этот высоконаучный подход, я нашел файл htmlTags.ts , полный определений тегов и массивов значений атрибутов. Я просмотрел элемент input и нашел это:

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

Это autocomplete:o выглядело интересно, поэтому я проверил, где определено o . Вот что я нашел:

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

Это было похоже на то, что происходило, когда я добавлял атрибут autocomplete . Чтобы изменить это, я перешел к стандартному определению возможных значений автозаполнения и скопировал их.

Я создал новый набор значений с именем inputautocomplete и вставил значения:

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

Затем я перешел ко всем определениям элементов, которые поддерживают autocomplete , и заменил o своим собственным 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' … ]),

Я сохранил свои изменения; скрипт пересобрал редактор; Я попробовал разрабатываемую версию редактора; и autocomplete работало так, как я хотел.

5. Отправьте запрос на слияние

Это было то. Я зафиксировал свои изменения в Git (внутри Visual Studio Code), зашел на GitHub и добавил запрос на извлечение. Несколько дней спустя я получил комментарий, в котором говорилось, что мой запрос на включение был выполнен и то, что я сделал, будет частью следующей сборки.

6. Будьте сбиты с толку

Честно говоря, я не думал, что это настолько удивительно, чтобы оправдывать изменение ядра редактора. Я просто хотел поиграть. Многие из вас могут думать то же самое о своей работе. И в том-то и дело: мы ошибаемся. Участие в проектах с открытым исходным кодом не требует от вас быть выдающимся разработчиком. Это также не требует, чтобы вы были знамениты или были частью толпы. Иногда все, что вам нужно сделать, это посмотреть на что-то, проанализировать это и найти способ улучшить это.

Мы должны сделать инструменты, которые мы используем, лучше. Если вы видите способ внести свой вклад в проект с открытым исходным кодом, не стесняйтесь. Возможно, вам пришла в голову идея настолько очевидная и простая, что другие ее не заметили. Вы можете быть тем, кто делает что-то более удобное или приятное на вид. У всех нас есть навыки, чтобы внести свой вклад. Давайте делать больше этого.