Я довольно часто использую Github Gists. Я также обнаружил, что меня немного раздражает необходимость вручную копировать и вставлять код в новый Gist. Я подумал про себя эй, я, почему бы вам просто не сделать расширение VS Code, которое будет создавать Gist из выделенного текста. Я сам ответил, это отличная идея, давайте разберемся, как это сделать, даже не проверяя существующее решение на торговой площадке.
Так я сделал и расширение, и я очень гордился собой. Возможно, слишком горд, но недостаточно горд, чтобы рекламировать его, прежде чем проверять рынок, чтобы увидеть, действительно ли он там был. И, слава богу, я этого не сделал, потому что, к моему ужасу, это то, что я нашел, когда искал "суть"
Оказывается, это проблема, которую решали несколько раз. Хорошие расширения (то есть не мои) не только создают Gists, но и обрабатывают аутентификацию и управление Gists за вас. Один из них даже работает с использованием токенов личного доступа, поэтому вы можете обойтись без двухфакторной аутентификации. Моя просто создает тупой анонимный Gist. Что бы ни.
Итак, что я узнал? Я, конечно, научился делать базовое расширение кода, но, что более важно, я узнал, что вам, вероятно, следует сначала попробовать проверить, существует ли существующее решение вашей проблемы.
Решив, что час или два, которые я потратил на это расширение, не пропадут даром, я решил объяснить свой точный процесс создания этого дурацкого расширения специально для вас, дорогой читатель.
Процесс
Сначала я поискал в Google Как сделать расширение VS Code. Любой старший веб-разработчик скажет вам, что поиск в Google - это обязательный первый шаг и, как правило, непрерывный процесс. Я обнаружил, что команда Visual Studio Code написала несколько хорошо документированных примеров для начала. Я последовал примеру Hello World - генератор расширений сэкономил много времени и является очень приятным инструментом. Отличная работа, команда VS Code!
Во-вторых, я знал, что хочу, чтобы пользователь мог щелкнуть правой кнопкой мыши выделенный текст в редакторе и выбрать пункт меню, который затем дал бы им возможность ввести имя файла для сути. По сути, мне нужно было добавить параметр в контекстное меню редактора. Я погуглил добавление пункта контекстного меню в расширение VS Code или что-то в этом роде, что привело меня к документации по пунктам добавления в меню.
Я обнаружил, что в package.json расширения вы можете добавить menus в блок contributes, поэтому, прочитав документацию ОЧЕНЬ случайно, я заменил contributes в package.json следующим:
Теперь это добавит пункт меню в контекстное меню в редакторе, которое вы вызываете, щелкнув правой кнопкой мыши.
Прохладный. Классно круто круто. Итак, теперь мне нужно было выяснить, как заставить мое расширение делать что-то при щелчке по этому элементу. Я подумал, что мне придется внести все эти изменения в функцию обратного вызова сгенерированной функции registerCommand, которая находилась внутри функции activate. Я также понял, что, поскольку я принимал ввод пользователя и также вызываю API, я, вероятно, захочу использовать async / await. Итак, я создал асинхронную функцию под названием CreateGist - вот полное расширение для справки.
В строке 40 я вызываю CreateGist - он будет вызываться всякий раз, когда выполняется команда extension.createGist, что происходит при щелчке по этому пункту контекстного меню.
Мне нужно было выяснить, как получить выделенный текст, что было достаточно легко. Оказывается, пакет vscode имеет свойство window, которое, в свою очередь, имеет свойство activeTextEditor. Вот документация для окна, которую я, опять же, очень быстро просмотрел.
В строке 6 я получаю текущий выделенный текст в активном редакторе:
const text = editor.document.getText(editor.selection);
Милая. Теперь я просто хочу дать пользователю возможность назвать файл. Не совсем уверен, как это сделать, я сделал command + f на странице документации vscode API для слова ввод, надеясь, что там что-то есть, И ТАК БЫЛО!
Оказывается, вы можете легко визуализировать поле ввода с помощью vscode.window.showInputBox, что я сделал в строках с 9 по 11. Остальная часть кода не связана с расширением. Я отправляю HTTP-запрос на API Github, чтобы создать суть. Все действительно довольно скучно.
Наконец, я хотел открыть только что созданный Gist в окне браузера пользователя. Не чувствуя себя таким удачливым, я снова обратился к Google и поискал открыть новое окно в расширении VS Code, где я узнал о сложных командах, которые сначала напугали меня. Оказывается, они не такие уж и сложные. Существует команда vscode.open, которая принимает URI в качестве аргумента и открывает новое окно браузера. Итак, в строке 31 вы можете видеть, что я беру html_url из ответного вызова API Github и выполняю команду open.
Вуаля!
Опять же, не используйте это глупое расширение, потому что альтернативы намного лучше.
Рамзи - разработчик полного цикла JavaScript в компании по анализу данных в Спрингфилде, штат Вирджиния. Вы можете подписаться на него в твиттере или гитхабе. Ему нравится, когда ты это делаешь.
