Расширение для Visual Studio Code. С чего начать

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

Сам VS Code написан на TypeScript, что даёт огромный потенциал для создания расширений. Но если ты предпочитаешь другой язык, это не проблема — можно использовать любой, который компилируется в JavaScript.

Принципы работы расширений

• Node.js — расширения работают на базе Node.js, что даёт множество возможностей:
  - Работа с файлами (fs).
  - Выполнение HTTP-запросов (http, https).
• API VS Code — расширения взаимодействуют с редактором через API.
• npm-пакеты — можно подключать любые библиотеки, например:
  - Webpack — для сборки кода.
  - Lodash — для работы с данными.
  - Axios — для HTTP-запросов.
  Все зависимости управляются через package.json.

Производительность и изоляция:

• Расширения работают в отдельном процессе (Extension Host), поэтому их сбои не влияют на работу VS Code.
• Для повышения производительности стоит использовать асинхронные операции и многопоточность.

Первые шаги

Начать разрабатывать расширение для VS Code очень просто. Для этого есть удобный генератор, который создаст всю необходимую структуру проекта.

1. Установи необходимые инструменты:

npm install -g yo generator-code

2. Создай структуру проекта:

yo code

3. Выбери тип расширения:

• New Extension (TypeScript) — расширение на TypeScript.
• New Color Theme — создание собственной цветовой темы.
• New Language Support — поддержка нового языка программирования.
• New Code Snippets — создание сниппетов.

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

И вуаля — у тебя готова структура с небольшим примером! В файле vsc-extension-quickstart.md ты найдешь инструкцию по запуску и ссылки на документацию.

Запуск расширения

Если ты выбрал в генераторе опцию «Новое расширение на TS (JS)», то можно сразу запустить расширение в режиме отладки. Убедись, что папка src лежит в корне проекта, и сделай следующее:

• Нажми F5 или выбери Run > Start Debugging.
• Либо запусти команду `Hello World` через Ctrl+Shift+P (или Cmd+Shift+P на macOS).

И вот, твоё расширение запустилось. Дальше можно смело идти по туториалам и выполнять упражнения, чтобы углубиться в процесс разработки. Кроме того, в файле vsc-extension-quickstart.md ты найдёшь полезную информацию. Также, если хочешь исследовать API, открой файл node_modules/@types/vscode/index.d.ts — там всего 20 тысяч строк кода для изучения.

Документация и полезные детали

Документация по созданию расширений для VS Code достаточно полная и насыщенная, и если ты уже готов писать своё расширение — дерзай. Но я всё-таки добавлю немного полезной информации.

В проекте два ключевых файла — это файл расширения extension.ts и package.json. Давай разберём их подробнее, если ты ещё не убежал пилить своё расширение мечты.

extension.ts (или extension.js)

Это основной файл, содержащий логику расширения. Он отвечает за регистрацию команд, обработку событий и взаимодействие с API VS Code.

Что важно знать:

• activate — точка входа расширения. Она вызывается при активации (например, когда пользователь запускает команду). Внутри этой функции ты регистрируешь команды, подписываешься на события и настраиваешь поведение расширения.

deactivate — опциональная функция, вызываемая при деактивации расширения (например, когда VS Code закрывается или расширение отключается). Используется для очистки ресурсов, таких как закрытие соединений и освобождение памяти.

VS Code предоставляет широкие возможности через своё API. Например:

• vscode.TextEditorEdit — используется для изменения текста в редакторе.
• vscode.workspace.fs — позволяет читать, записывать и удалять файлы и папки.
• vscode.TreeView — создаёт пользовательские представления в боковой панели (древовидные структуры).
• vscode.Webview — позволяет создавать пользовательские интерфейсы с использованием HTML, CSS и JavaScript.
• vscode.window.showInformationMessage — показывает информационное сообщение.
• vscode.commands.registerCommand — регистрирует новую команду.

package.json — манифест твоего расширения

Давай разберёмся, как устроен package.json и на что стоит обратить внимание.

• engines — самое важное поле. Лучше сразу указать версию с «крышечкой» (^), чтобы избежать проблем с запуском.

Убедитесь, что идентификаторы команд в package.json и extension.ts совпадают.

В contributes.commands:

• command — идентификатор команды.
• title — имя, под которым команда отображается в UI.

Сниппеты — как ускорить разработку

Сниппеты помогут ускорить разработку расширения, автоматизируя повторяющийся код.

Как создать сниппет:

1. Открой File (Файл) > Preferences (Настройки) > Configure User Snippets (Настроить пользовательские сниппеты).
2. Выбери язык, для которого хочешь создать сниппеты (например, typescript.json).
3. В открывшемся JSON-файле добавь свои сниппеты.

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

Чтобы использовать сниппеты, после их добавления выполни следующие шаги:

1. Открой файл, в котором хочешь использовать сниппет.
2. Начни вводить его префикс (например, @vsc-register-command).
3. VS Code предложит автодополнение — нажми Tab или Enter, чтобы вставить сниппет.
4. Заполни плейсхолдеры (например, ${1:extensionName}), переключаясь между ними клавишей Tab.

Выводы и полезные ссылки

Создание расширений для VS Code — это увлекательный процесс, который позволяет добавить в редактор уникальную функциональность. Начать просто: используй генератор кода (yo code), изучай документацию и экспериментируй с API. Не бойся пробовать — даже небольшое расширение может сделать твою работу удобнее и вдохновить других разработчиков.

• Архитектура VS Code — статья о внутреннем устройстве редактора.
• Официальная документация по API VS Code — всё о возможностях API для создания расширений.
• Руководство по созданию расширений — пошаговые инструкции для разработки расширений.
• Yeoman — инструмент для генерации структуры проекта.
• Примеры расширений — репозиторий с примерами для различных задач.
• UX-гайдлайны для расширений — рекомендации по созданию пользовательского интерфейса.
• Создание сниппетов в VS Code — руководство по созданию и использованию пользовательских сниппетов

Ещё больше полезного контента найдёшь в нашем Telegram.