У всех нас есть те или иные проблемы, когда мы пытаемся кодировать что-то в коде VS. Некоторые вещи мы хотим, чтобы ESLint ловил, некоторые ручные задачи должны выполняться автоматически, а некоторые ошибки могут быть исправлены автоматически, а более продвинутые, мы хотели бы, чтобы кто-то хотел, чтобы наш код писался автоматически (чат GPT-3 уже делает это) . Так что самое время узнать, как создать расширение VS Code с нуля, чтобы быть в игре.

Вот пошаговое руководство по созданию расширения Visual Studio Code (VS Code):

  1. Установите необходимые инструменты: чтобы создать расширение VS Code, на вашем компьютере должны быть установлены Node.js и npm (или yarn). Вы можете скачать Node.js с официального сайта, вместе с ним автоматически установится npm.
  2. Создайте новый проект: откройте окно терминала и создайте новую папку для своего расширения. Внутри этой папки запустите команду npm init (или yarn init), чтобы создать новый файл package.json. Этот файл будет содержать все необходимые метаданные для вашего расширения, такие как его имя и номер версии.
  3. Установите генератор расширений VS Code: Чтобы упростить создание нового расширения, вы можете использовать генератор расширений VS Code. Для его установки выполните команду npm install -g yo generator-code.
  4. Создайте новое расширение: запустите команду yo code в корне вашего проекта, это запустит генератор расширений и проведет вас через процесс создания вашего расширения. Вам будет предложено ввести имя и идентификатор вашего расширения, а также его описание и другую информацию.
  5. Добавьте функциональность к вашему расширению: как только генератор расширений будет завершен, вы найдете новую папку с именем «src» в своем проекте. Эта папка содержит основной код вашего расширения, включая файл с именем extension.ts или extension.js, который содержит скелет класса, представляющего ваше расширение. Вы можете добавить новые функции в этот класс или создать новые файлы по мере необходимости.
  6. Проверьте свое расширение: вы можете протестировать свое расширение, выполнив команду npm run watch (или yarn watch) в терминале. Эта команда запустит локальный сервер разработки и запустит новый экземпляр VS Code с установленным расширением. Вы можете вносить изменения в свой код и видеть результаты в режиме реального времени.
  7. Опубликуйте свое расширение: как только вы будете удовлетворены своим расширением, вы можете упаковать его и опубликовать в VS Code Marketplace. Вы можете использовать команду vsce publish, чтобы создать файл .vsix и опубликовать его на рынке.

Пример:

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

1. Создайте новую папку для своего расширения:

mkdir my-extension
cd my-extension

2. Инициализируйте файл package.json:

npm init

3. Создайте новую папку с именем src:

mkdir src

4. Создайте новый файл с именем extension.ts в папке src:

touch src/extension.ts

5. Добавьте следующий код в extension.ts:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "my-extension" is now active!');

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

    context.subscriptions.push(disposable);
}

export function deactivate() {}

Этот код определяет расширение с одной командой с именем my-extension.helloWorld, которая показывает сообщение при выполнении.

6. Добавьте следующий код в package.json для настройки расширения

"contributes": {
    "commands": [{
        "command": "my-extension.helloWorld",
        "title": "Hello World"
    }]
},

7. Проверьте свое расширение:
Вы можете проверить свое расширение, выполнив команду npm run watch (или yarn watch) в терминале. Эта команда запустит локальный сервер разработки и запустит новый экземпляр VS Code с установленным расширением. Вы можете вносить изменения в свой код и видеть результаты в режиме реального времени.

8. Опубликуйте расширение:

Когда вы будете удовлетворены своим расширением, вы можете упаковать его и опубликовать на VS Code Marketplace. Вы можете использовать команду vsce publish, чтобы создать файл .vsix и опубликовать его на рынке.