M

MLOG

Русский

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

Разработка расширений VS Code: полное руководство для мировых разработчиков

Visual Studio Code (VS Code) стал основным редактором кода для миллионов разработчиков по всему миру. Его популярность обусловлена его легкостью, мощными функциями и, что самое главное, расширяемостью. Возможность создавать собственные расширения позволяет разработчикам адаптировать редактор к своим конкретным потребностям, повышая производительность и оптимизируя рабочие процессы. Это полное руководство проведет вас через процесс создания собственных расширений VS Code, от первоначальной настройки до публикации вашего творения для использования всем миром.

Зачем разрабатывать расширения VS Code?

Разработка расширений VS Code предлагает множество преимуществ как для отдельных разработчиков, так и для организаций:

Необходимые условия

Прежде чем приступить к разработке расширений, убедитесь, что у вас установлено следующее:

Настройка среды разработки

После выполнения необходимых условий вы готовы настроить среду разработки:

  1. Создайте новый проект расширения: откройте свой терминал и выполните следующую команду, чтобы запустить генератор расширений:
    2. yo code
  2. Ответьте на запросы: генератор задаст серию вопросов о вашем расширении. Вот разбивка распространенных запросов и рекомендуемых ответов:
    • Какой тип расширения вы хотите создать? Выберите «New Extension (TypeScript)» для расширения на основе TypeScript, что является рекомендуемым подходом.
    • Как называется ваше расширение? Выберите описательное и уникальное имя для своего расширения. Примеры: «Code Spell Checker», «JavaScript Snippets», «Python Autocomplete».
    • Какой идентификатор вашего расширения? Это уникальный идентификатор для вашего расширения, обычно в формате `publisher.extension-name`. Выберите имя издателя (например, ваше имя пользователя GitHub или название компании).
    • Какое описание вашего расширения? Предоставьте краткое и информативное описание того, что делает ваше расширение.
    • Инициализировать репозиторий git? Выберите «Yes», чтобы инициализировать репозиторий Git для контроля версий.
    • Хотите ли вы использовать eslint для линтинга кода? Выберите «Yes», чтобы обеспечить согласованность стиля кода.
  3. Откройте проект в VS Code: после завершения работы генератора откройте новую папку проекта в VS Code.

Понимание структуры проекта

Генератор расширений создает базовую структуру проекта со следующими ключевыми файлами:

Написание вашего первого расширения

Давайте начнем с создания простого расширения, которое отображает сообщение «Hello World» при выполнении команды:

  1. Откройте `src/extension.ts`: этот файл содержит функцию `activate`, которая вызывается при активации вашего расширения.
  2. Измените функцию `activate`: замените существующий код следующим:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Поздравляем, ваше расширение \"my-extension\" теперь активно!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Пояснение:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: регистрирует команду с идентификатором `my-extension.helloWorld`. Эта команда будет доступна в палитре команд VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: отображает информационное сообщение в окне VS Code.
    • `context.subscriptions.push(disposable)`: добавляет команду в подписки расширения, гарантируя, что она будет правильно удалена при деактивации расширения.
  4. Измените `package.json`: добавьте следующее в раздел `contributes`, чтобы определить команду:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Пояснение:
    • `"commands"`: определяет команды, которые ваше расширение предоставляет.
    • `"command": "my-extension.helloWorld"`: указывает идентификатор команды, который соответствует идентификатору, используемому в `extension.ts`.
    • `"title": "Hello World"`: задает отображаемое имя команды в палитре команд.

Тестирование вашего расширения

Теперь пришло время протестировать ваше расширение:

  1. Нажмите F5: это запустит новое окно VS Code с установленным вашим расширением. Это «Хост разработки расширения».
  2. Откройте палитру команд: нажмите `Ctrl+Shift+P` (или `Cmd+Shift+P` в macOS), чтобы открыть палитру команд.
  3. Введите «Hello World»: вы должны увидеть свою команду, перечисленную в палитре команд.
  4. Выберите «Hello World»: щелчок по команде выполнит ее и отобразит сообщение «Hello World» в окне VS Code.

Отладка вашего расширения

Отладка имеет решающее значение для выявления и исправления проблем в вашем расширении. VS Code предоставляет отличную поддержку отладки:

  1. Установите точки останова: щелкните в поле редактора рядом с номерами строк, чтобы установить точки останова в своем коде.
  2. Нажмите F5: это запустит Extension Development Host в режиме отладки.
  3. Запустите свое расширение: выполните команду или действие, которое запускает код, который вы хотите отладить.
  4. Проверьте переменные и стек вызовов: отладчик VS Code приостановит выполнение в ваших точках останова, что позволит вам проверять переменные, пошагово выполнять код и изучать стек вызовов.

Работа с API VS Code

API VS Code предоставляет богатый набор интерфейсов и функций для взаимодействия с редактором. Вот некоторые ключевые области API:

Пример: создание расширения фрагмента кода

Давайте создадим расширение, которое добавляет фрагмент кода для создания базового компонента React:

  1. Создайте папку `snippets`: создайте новую папку с именем `snippets` в корне вашего проекта.
  2. Создайте файл фрагмента кода: создайте файл с именем `react.json` в папке `snippets`.
  3. Добавьте определение фрагмента кода: добавьте следующий JSON в `react.json`:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Создает базовый компонент React"
	}
}
  4. Пояснение:
    • `"React Component"`: имя фрагмента кода.
    • `"prefix": "reactcomp"`: префикс, который запускает фрагмент кода. Ввод `reactcomp` и нажатие клавиши `Tab` вставит фрагмент кода.
    • `"body"`: массив строк, представляющих строки кода во фрагменте кода.
    • `${1:ComponentName}`: остановка табуляции, которая позволяет быстро изменить имя компонента.
    • `"description"`: описание фрагмента кода.
  5. Измените `package.json`: добавьте следующее в раздел `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Пояснение:
    • `"snippets"`: определяет фрагменты кода, которые предоставляет ваше расширение.
    • `"language": "javascriptreact"`: указывает язык, для которого применим фрагмент кода.
    • `"path": "./snippets/react.json"`: указывает путь к файлу фрагмента кода.
  7. Протестируйте свой фрагмент кода: откройте файл `.jsx` или `.tsx` и введите `reactcomp`. Нажмите `Tab`, чтобы вставить фрагмент кода.

Расширенные методы разработки расширений

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

Интернационализация и локализация (i18n и L10n)

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

Публикация вашего расширения

Когда ваше расширение будет готово, вы можете опубликовать его в Marketplace VS Code, чтобы другие могли его использовать:

  1. Создайте организацию Azure DevOps: вам потребуется организация Azure DevOps для публикации своего расширения. Если у вас его нет, создайте бесплатную учетную запись на веб-сайте Azure DevOps.
  2. Установите инструмент `vsce`: VS Code Extension Manager (`vsce`) — это инструмент командной строки для упаковки и публикации расширений. Установите его глобально с помощью npm:
    3. npm install -g vsce
  3. Создайте издателя: издатель — это организация, которая владеет вашими расширениями в Marketplace. Создайте издателя, используя команду `vsce create-publisher`. Вам потребуется указать имя издателя и личный маркер доступа (PAT) из Azure DevOps.
  4. Сгенерируйте личный маркер доступа (PAT): в Azure DevOps перейдите в раздел «Настройки пользователя» -> «Личные маркеры доступа» и создайте новый PAT с областью «Marketplace (Publish)».
  5. Упакуйте свое расширение: используйте команду `vsce package`, чтобы упаковать свое расширение в файл `.vsix`.
  6. Опубликуйте свое расширение: используйте команду `vsce publish`, чтобы опубликовать свое расширение в Marketplace. Вам потребуется указать имя вашего издателя и ваш PAT.

Рекомендации по разработке расширений

Следуйте этим рекомендациям, чтобы создавать высококачественные и удобные в обслуживании расширения VS Code:

Ресурсы сообщества

Вот несколько ценных ресурсов для получения дополнительной информации о разработке расширений VS Code:

Заключение

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