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

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

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

Написание расширения

Мне нравится продуктивность и автоматизация, поэтому я начинаю новые проекты очень рационально.

Орудие труда

Я написал шаблон для быстрого запуска новых проектов, он очень простой:

  1. в качестве входных данных используется папка («шаблон»).
  2. он обрабатывает все свои файлы с помощью ручек, запрашивающих замену для каждого найденного заполнителя (например, {{name}}).
  3. он выводит новую папку с замененными заполнителями.

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

Шаблон

Затем я использую свой шаблон template-vscode-extension для запуска нового расширения VSCode.

И теперь у меня есть работающее расширение Hello-World-ish. Этот шаблон включает в себя множество вспомогательных функций, которые я часто использую: он поддерживает загрузку пользовательского файла конфигурации из папки .vscode, он автоматически регистрирует команды, он может определять текущий корень на основе активного файла и т. Д.

Если бы я мог вернуться в прошлое, я бы, вероятно, поместил все эти вспомогательные функции в отдельный vscode-utils пакет, вместо того, чтобы дублировать их во всех своих расширениях, к сожалению, я не знал с самого начала, что буду делать 10 расширений, сейчас обновление всех из них потребует довольно много времени.

Если вы думаете о создании расширений VSCode, я бы порекомендовал вам создать свой собственный шаблон, возможно, взяв за основу мой.

Документация

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

Вы также захотите прочитать весь раздел «Справочник по расширяемости».

Расширения

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

Мои расширения

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

Хорошо это или плохо, я нахожу создание расширений забавным, и нет недостатка в вещах, которые можно автоматизировать, поэтому после первого расширения я сделал второе, третье… и тридцать третье!

Проверьте страницу каждого расширения для получения более подробной информации и снимков экрана.

Расширения для создания расширений

№1 Debug Launcher: запускайте отладку (даже отдельных файлов!), Без необходимости определять какие-либо задачи или запускать конфигурации, даже с терминала. Я не хотел загромождать свои репозитории повторяющимися конфигурациями запуска и задачами (кто вообще использует задачи?). Однако запуск отладчика с терминала действительно должен быть включен в сам VSCode.

№2 StatusBar Debugger: добавляет отладчик в строку состояния, менее навязчивый, чем плавающий по умолчанию. Потому что панель инструментов по умолчанию просто отстой. Если бы только они открывали больше состояний, это расширение могло бы быть намного лучше.

№3 Установить .VSIX: установить .vsix расширения прямо из проводника, щелкнув правой кнопкой мыши. Потому что установка .vsix тоже отстой.

№4 Bump: поднять версию вашего проекта и обновить журнал изменений. Мнение, но настраиваемое. Каждое достойное расширение нуждается в журнале изменений, но это не значит, что вам нужно писать его вручную. Это расширение - одно из моих любимых, я, вероятно, сделаю из него CLI версию, и в будущем я хочу, чтобы оно выпускало и для меня GitHub.

№5 Оптимизация изображений: оптимизируйте одно или все изображения в вашем проекте с помощью вашего любимого приложения. Всего одна команда, и готово.

Управление проектами

№6 Проекты +: Расширение для управления проектами. Многофункциональный, настраиваемый, автоматически находит ваши проекты. Project Manager - наиболее часто используемое расширение такого рода, но у меня более сотни репозиториев, мне нужны правильные инструменты для управления ими, одна из которых - неограниченно вложенные группы.

Управление задачами

№7 Todo +: легко управляйте списками задач. Мощный, простой в использовании и настраиваемый. Если вам не нужна подсветка синтаксиса для TODO файлов и, возможно, вам нужна встроенная базовая подсветка, вы можете попробовать Дерево Todo, это очень хорошо.

№8 Подсветка: расширенная подсветка текста на основе регулярных выражений. Полезно для задач, аннотаций и т. Д. Большинство людей просто используют TODO Highlight, но мой вариант более общий и более мощный, возможно, он быстрее.

№9 Markdown Todo: легко управляйте списками задач внутри файлов уценки. Ничего особенного, но некоторые ярлыки Todo +, которые вы знаете и любите, в основном работают внутри файлов Markdown.

№10 Проекты + Todo +: обзор ваших проектов с высоты птичьего полета, просмотр всех ваших файлов задач, собранных в один. Если вы используете Projects + для управления проектами и Todo + для управления своими задачами, теперь вы можете объединить все свои задачи по всем (или некоторым) проектам в один файл.

Открыть в…

Для меня важно быстрое переключение между различными приложениями / веб-сайтами, поэтому я сделал много Open in... расширений.

№11 Открыть в приложении: откройте произвольный файл в приложении по умолчанию или в том приложении, которое вы хотите. Обобщенное расширение Open in....

№12 Открыть в браузерах: добавляет несколько команд для открытия текущего файла или проекта в любом браузере, который вам нравится, даже всех одновременно.

№13 Открыть в коде: легко переключаться между кодом и инсайдерами кода.

# 14 Открыть в Finder: добавляет несколько команд для открытия текущего файла или проекта в Finder.

№15 Открыть в GitHub: открыть текущий проект или файл на github.com. Для этого есть много других расширений, но когда я их попробовал, они были просто переполнены вещами, которые мне не нужны или которые не работали.

№16 Открыть в GitTower: добавляет команду для открытия текущего проекта в GitTower.

# 17 Открыть в Торговой площадке: Добавляет команду для открытия текущего проекта в Торговой площадке.

# 18 Открыть в node_modules: открыть текущий выбор или произвольную строку в node_modules. Полезно, если вы хотите глубже изучить используемые вами модули.

№19 Открыть в NPM: открыть текущий выбор, проект или произвольную строку на npmjs.com. Полезно для быстрого просмотра ридми.

№20 Открыть на корабле: добавляет команду для открытия текущего проекта на корабле. К сожалению, поддержка Ship устарела и больше не работает. Теперь у меня есть специальная вкладка в Noty для управления предстоящими проблемами.

# 21 Открыть в Терминале: добавляет несколько команд для открытия текущего проекта в Терминале.

# 22 Открыть в передаче: добавляет несколько команд для открытия текущего файла или проекта в Передача.

Разное

№23 Обновление браузера: обновите браузер с помощью ⌘R, прямо из кода. Не нужно переключать на него фокус. Полезно, когда вы не можете использовать горячую перезагрузку и не хотите, чтобы browser-sync обновляла страницу, когда в этом нет необходимости.

# 24 Команды: запускать произвольные команды из строки состояния. Поддерживает передачу аргументов!

№25 Diff: Diff 2 открывает файлы с легкостью. Потому что бег code — diff path1 path2 - это слишком медленно.

# 26 История файлов Git: просмотр или сравнение с предыдущими версиями текущего файла. Для этого есть много других расширений, но когда я их попробовал, они были просто переполнены вещами, которые мне не нужны или которые не работали.

№27 Уведомления GitHub: безопасный, настраиваемый значок в строке состояния, который уведомляет вас об уведомлениях на GitHub.

№28 Ночная тема Монокай: полная, темная и минималистичная тема, вдохновленная монокай. Ни одна тема, которую я пробовал, не выглядела подходящей, мне пришлось сделать свою собственную.

# 29 Нет [Unsupported]: расширение для удаления [Unsupported] из заголовка. Сейчас это устарело, вместо этого я рекомендую Исправить контрольные суммы VSCode. К сожалению, после некоторого обсуждения и некоторого дополнительного обсуждения суффикс [Unsupported] уже есть, готовый нас раздражать.

# 30 Открыть несколько файлов: открыть сразу все файлы в папке, при желании можно фильтровать глобусом.

№31 Поиск - Открыть все результаты: Открыть все результаты поиска сразу с помощью одной команды.

№32 Диспетчер терминалов: расширение для одновременной настройки нескольких терминалов или просто выполнения некоторых команд. На самом деле это было мое первое расширение! Если вы вообще пользуетесь терминалами, вам стоит проверить этот, он очень хорош.

# 33 Transmit: добавляет несколько команд для взаимодействия с Transmit.

Уф! На это потребовалось время. Интересная мелочь: я думаю, что у меня есть учетная запись с наибольшим количеством расширений, опубликованных в Marketplace, сразу после Microsoft, по крайней мере, если есть кто-то, у кого опубликовано больше расширений, я не нашел его / ее. Исправление: Грег сделал на 2 расширения больше, чем я, мне нужно вернуться к работе!

Управление расширениями

Управление несколькими репозиториями может быть проблемой, вот как я это делаю.

Повторяющиеся коммиты

Рано или поздно вы захотите что-то изменить во всех своих репозиториях, это означает, что вы будете делать в основном одни и те же коммиты в нескольких репозиториях, что быстро надоест.

Для автоматизации подобных задач я создал autogit - инструмент для выполнения команд в нескольких репозиториях.

Я продолжаю находить ему применение, совсем недавно я использовал его для внесения следующих изменений во все репозитории моих расширений:

  • В комплекте с webpack: я вижу, что время запуска сократилось примерно на 80%.
  • Игнорируется package-lock.json: это просто шум в моей истории коммитов, прочтите причины игнорирования Синдре Сорхуса здесь.
  • Обновление tsconfig.json для вывода современного кода: асинхронные функции, которые я использую довольно часто, переводятся в медленный код, когда целевая версия <= es5, а поскольку VSCode поставляется с современной версией Node.js, в этом нет необходимости.
  • Удален TSLint: я заметил, что в основном игнорирую его вывод, поэтому я вообще убрал поддержку линтинга.
  • Использование логотипа высокого разрешения в ридми: использование логотипа высокого разрешения в ридми вместо того, что я использовал до 128x128, способствует лучшему ридми, к сожалению, у меня нет особенно хороших логотипов, но это уже другая история :)

Вы можете видеть, как вносятся только эти 5 изменений, но в 33 репозиториях они быстро складываются.

Синхронизация описания и ключевых слов с GitHub

Этого не нужно делать, но было бы неплохо, если бы существовал инструмент, который сделает это за вас. К счастью, autogit и команда autogit-command-github-sync тоже могут это сделать:

Я также сделал autogit-command-github-publish для автоматизации создания репозиториев GitHub.

Составление отчетов

Вскоре после создания первых нескольких расширений мне стало интересно узнать, сколько новых загрузок они получают. Вы можете просмотреть все свои расширения на одной странице, здесь вы можете найти, например, мое, но это не решит проблему, если вы не помните, сколько загрузок было загружено вашими расширениями при предыдущей проверке. Вот почему я сделал rssa, инструмент, который сообщает вам, когда что-то меняется. Вы можете отслеживать практически все, что доступно с помощью URL-адреса.

Разве не было бы здорово иметь диаграммы? Я еще не опубликовал этот инструмент, но, используя историю rssa, мы можем создавать диаграммы, вот диаграмма количества загрузок Todo +:

Обратите внимание, как иногда происходит резкое увеличение загрузок, что происходит, когда публикуется новое обновление: обновления учитываются как загрузки 😅 Любой может получить расширение с миллионом загрузок, просто отправив много обновлений, это одна из проблем Marketplace .

Спасибо

Здорово, ты дожил до конца! Спасибо за внимание, надеюсь, вы нашли здесь что-то полезное.

Как вы разрабатываете расширения VSCode? А какие расширения вы используете?