Вы когда-нибудь чувствовали, что вашему экземпляру VS Code не хватает je ne sais quoi? Как будто ему нужен личный дворецкий, который угадывает каждое ваше желание в процессе кодирования? Вот тут-то и приходят на помощь расширения, а создание их с помощью TypeScript — это как добавление порций эспрессо в ваш рабочий процесс разработки. Сегодня мы закатим рукава и создадим такое расширение с нуля. Без лишнего, только чистая, неподдельная алхимия кода. Готовы? Давайте превратим этот редактор в вашу вторую половинку.

🧪 Предварительные условия: Подготовимся!

Перед тем как вызвать демонов кода:

  1. VS Code (очевидно)
  2. Node.js (рекомендуется версия 16 и выше)
  3. TypeScript (npm install -g typescript)
  4. Щепотка смелости (необязательно, но приветствуется)

⚙️ Шаг 1: Создаём структуру проекта

Запустите терминал и выполните:

npx yo code

Это запустит генератор расширений VS Code. При появлении запроса:

  • Выберите «New Extension (TypeScript)».
  • Назовите его vscode-sass-master (или как-то менее претенциозно).
  • Заполните другие метаданные, как татуировку на ноутбуке. Вуаля! У вас появился скелет проекта. Структура выглядит так:
├── .vscode
├── src
│   ├── extension.ts  # Мозг операции
├── package.json      # Удостоверение расширения
└── tsconfig.json     # Правила TypeScript

🧠 Шаг 2: Разбираемся в анатомии

Давайте проанализируем критические части package.json:

{
  "activationEvents": ["onCommand:sassMaster.compile"],
  "contributes": {
    "commands": [{
      "command": "sassMaster.compile",
      "title": "Скомпилировать Sass в CSS"
    }]
  }
}
  • activationEvents: Когда ваше расширение активируется (например, при выполнении команды).
  • contributes.commands: Голос вашего расширения — команды, которые вызывают пользователи.

🧩 Шаг 3: Пишем магию

Откройте src/extension.ts. Замените код по умолчанию следующим волшебством для компиляции Sass:

import * as vscode from 'vscode';
import { compile } from 'sass';
export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('sassMaster.compile', async () => {
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
      vscode.window.showErrorMessage('Нет активного редактора!');
      return;
    }
    const sassCode = editor.document.getText();
    try {
      const result = compile(sassCode).css;
      // Создаём новый документ с скомпилированным CSS
      const cssDoc = await vscode.workspace.openTextDocument({
        content: result,
        language: 'css'
      });
      vscode.window.showTextDocument(cssDoc);
    } catch (error) {
      vscode.window.showErrorMessage(`Ошибка компиляции Sass: ${error}`);
    }
  });
  context.subscriptions.push(disposable);
}

Вот что происходит, когда пользователь запускает Скомпилировать Sass в CSS:

  1. Получает содержимое активного редактора.
  2. Компилирует Sass → CSS с помощью пакета sass.
  3. Открывает новую вкладку с чистым CSS.

🔥 Шаг 4: Отладка как профи

Нажмите F5, чтобы запустить хост разработки расширений. В новом экземпляре VS Code:

  1. Откройте файл .scss.
  2. Нажмите Ctrl+Shift+P → «Скомпилировать Sass в CSS».
  3. Вух! CSS появляется как кролик из шляпы!

🚀 Шаг 5: Повышаем уровень с помощью Webview

Хотите пользовательский интерфейс? Давайте добавим панель для предварительного просмотра CSS:

// Добавляем в activate()
const cssPreviewCommand = vscode.commands.registerCommand('sassMaster.preview', () => {
  const panel = vscode.window.createWebviewPanel(
    'cssPreview',
    'Предварительный просмотр CSS',
    vscode.ViewColumn.Beside,
    {}
  );
  const css = compile(editor.document.getText()).css;
  panel.webview.html = `<style>${css}</style><body>Предварительный просмотр в реальном времени!</body>`;
});
context.subscriptions.push(cssPreviewCommand);

Теперь ваше расширение показывает предварительный просмотр CSS в реальном времени! Добавьте это в массив commands в package.json:

{
  "command": "sassMaster.preview",
  "title": "Предварительный просмотр CSS в реальном времени"
}

🌌 Объяснение жизненного цикла расширения

Что происходит за кулисами, когда ваше расширение запускается?

sequenceDiagram participant Пользователь participant VS Code participant Расширение Пользователь->>VS Code: Запускает «Скомпилировать Sass в CSS» VS Code->>Расширение: activate() Расширение->>VS Code: Регистрирует команду VS Code->>Расширение: Вызывает команду Расширение->>sass: compile(Sass) sass-->>Расширение: Возвращает CSS Расширение->>VS Code: Показывает CSS в новой вкладке

🧪 Тестирование: Не отправляйте вслепую!

Добавьте этот тест в src/test/runTest.ts:

import * as assert from 'assert';
import * as vscode from 'vscode';
suite('Набор тестов для расширения', () => {
  test('Тест компиляции', async () => {
    // Открываем test.scss
    const doc = await vscode.workspace.openTextDocument({ 
      content: '$color: red; body { color: $color; }', 
      language: 'scss' 
    });
    await vscode.window.showTextDocument(doc);
    // Запускаем команду компиляции
    await vscode.commands.executeCommand('sassMaster.compile');
    // Проверяем вывод CSS
    const cssDoc = vscode.window.activeTextEditor?.document.getText();
    assert.strictEqual(cssDoc, 'body { color: red; }');
  });
});

Запускайте тесты через тестовый раннер VS Code. Зелёные галочки? Отправляем! 🚢

📦 Упаковка и публикация

  1. Установите vsce: npm install -g vsce
  2. Запустите vsce package → создаётся файл .vsix
  3. Загрузите на VS Code Marketplace

🎉 Напутствие

Создание расширений — это как обучение VS Code приёмам карате — внезапно он может пробивать стены, о существовании которых вы даже не подозревали. Типобезопасность TypeScript? Ваш спарринг-партнёр, который ловит ваши ошибки до того, как вы упадёте лицом вниз. Теперь вперёд! Превратите этот редактор в своё личное додзё программирования. Помните: лучшие расширения — это не просто инструменты; это любовные письма вашему рабочему процессу. Сделайте своё поэтическим. ✨