Когда несколько лет назад был выпущен редактор Github Atom, я, как и многие другие веб-разработчики, подумал примерно так: «Аккуратно! Расширяемый редактор, построенный на известном мне стеке ». Многие разработчики сразу же начали вносить свой вклад, и это сделало редактор отличным.
Я начал использовать Atom по двум причинам:
- Каждую вторую неделю выходили новые потрясающие расширения.
- Я знал весь стек, что делало его классным для взлома и означало, что однажды я смогу создать свое собственное расширение.
Большое расширение курсора
Когда я начал использовать Atom, я программировал на трех языках с отступами: Slim, Sass и CoffeeScript.
Я понятия не имел, что могу изменить размеры вкладок, поэтому использовал вкладку с одним пробелом. Было сложно понять, где закончится блок отступов. Поэтому я подумал, что было бы здорово, если бы я мог преобразовать курсор редактора в своего рода линейку, чтобы видеть, где все заканчивается. Я хотел что-то вроде этого:
Чтобы понять, как это сделать, я просто переключил инструменты разработчика на Atom, выбрал элемент курсора и изменил его CSS. Это было в значительной степени доказательством правильности концепции. Я знал, что это можно сделать, теперь все, что мне нужно было сделать, это на самом деле сделать это.
Я создал расширение, выбрав опцию в меню Atom для его создания. Мне пришлось немного взглянуть на документацию, чтобы понять, как зарегистрировать команду и как применить класс к курсору. Первая итерация расширения была довольно простой, она сводилась к следующему:
Просто и это сработало.
Что с ним случилось?
Когда я писал, что версия 1 расширения Atom еще не вышла, это означало, что API продолжал меняться, и, честно говоря, поскольку он мне больше не нужен, я просто прекратил его разработку.
Введите VSCode
Перенесемся на пару лет вперед, и я начал использовать VSCode вместо Atom. Пару месяцев назад я использовал изящное расширение, чтобы изменить имена некоторых переменных на регистр верблюда, регистр змеи и т. Д.…
Открывать палитру и вводить имя команды становилось все чаще. Я не хотел создавать для него привязку клавиш. Итак, я подумал о псевдонимах в оболочке ZSH.
В ZSH есть много плагинов, которые вы можете добавить, которые, помимо других функций, предоставляют вам более короткие версии команд оболочки. Например, с подключаемым модулем Git git checkout равно gco или с подключаемым модулем Rails rails server равно rs.
Таким образом, для такой команды, как «Изменить регистр змеиного регистра», я мог просто взять первую букву каждого слова и иметь команду с именем ccsc, которая запускала бы ее.
Написание расширения VSCode
Поэтому я решил посмотреть, как создавать расширения VSCode. Я уже был немного знаком с тем, как будет выглядеть код, благодаря некоторым вкладам, которые я сделал для Scry (языковой сервер для Crystal), который включал изучение расширения Crystal VSCode.
Расширение VSCode создается с помощью генератора Yeoman (честно говоря, я понятия не имел, что это все еще существует). А это выглядит так:
Каркас расширения Typescript довольно аккуратный, он может настроить вас с более строгим tsconfig (что означает, что файлы Typescript могут не компилироваться чаще, что иногда хорошо), а также он может настраивать tslint (который является линтером для Typescript ).
После завершения работы генератора у вас будет расширение hello world, которое добавляет команду, которая регистрирует «hello world». В проекте используются задачи отладки VSCode, чтобы иметь возможность запускать экземпляр VSCode с включенным расширением. Это действительно легко настроить, и вы также можете добавлять точки останова, так что изучать API - это здорово.
Теперь, чтобы попытаться создать желаемое расширение, мне нужно было узнать, как:
- Создайте палитру, в которой пользователь может печатать.
- Отфильтруйте поле палитры, чтобы отобразить команды в соответствии с краткой версией, которую вводит пользователь.
- Получите все доступные команды, чтобы в поле было что искать.
- Выполните команду.
Это потребовало некоторого изучения доступных документов и примеров репозиториев. Проблема в том, что API очень ограничен. Вот как я приступил к решению четырех запланированных задач.
- Создайте палитру, в которой пользователь может печатать.
У вас нет доступа к модели DOM или представлению. По сути, существует набор представлений, которые вы можете создать (одно из них - это настоящая панель HTML, на которой вы можете управлять всем HTML). К счастью, есть вид для палитры, мне просто нужно было понять, как это работает.
2. Отфильтруйте палитру.
Это был своего рода взлом, API для компонента QuickPick не предлагает опции фильтрации. У него есть событие, которое вы можете перехватить всякий раз, когда пользователь вводит текст, и я просто каждый раз меняю список опций. Работает на удивление хорошо.
3. Получите все доступные команды.
Получение всех команд было немного странным, вы можете получить список других установленных расширений, для каждого из которых вы можете получить доступ к проанализированной версии его package.json, в котором перечислены команды расширения.
4. Выполните команду
Это было довольно просто, просто вызов API для выполнения определенной команды.
В итоге расширение выглядит так:
Завершение
Это был мой опыт разработки расширений редактора. Моя цель при написании этой статьи состояла в том, чтобы показать, что, хотя в ней есть свои проблемы, в ней нет ничего особенного. Надеюсь, я вдохновил вас написать свой собственный. По крайней мере, исходя из моего опыта, очень часто в голове возникает представление о том, что может быть лучше в используемых инструментах, и создание расширения может быть ответом.
Ссылки на материалы
- Большой курсор Atom Extension
- Короткие команды расширения VSCode
- API расширения VSCode
- Образцы репо VSCode
- Предсказание
У вас есть идея для расширения? Вы когда-нибудь пробовали создать свой собственный? Мне бы хотелось узнать о вашей идее или опыте, просто оставьте комментарий ниже!
Я работаю в Runtime Revolution из солнечного Лиссабона, разрабатывая отличные продукты. Если вы хотите сотрудничать с нами, просто свяжитесь с нами.
