sli.dev Course Manager

VS Code расширение для управления курсами презентаций на sli.dev

📋 Описание

sli.dev Course Manager — это VS Code расширение, которое упрощает создание и управление курсами презентаций, построенных на фреймворке sli.dev (Slidev). Расширение предоставляет полный набор инструментов для работы с курсами: от создания новых курсов до сборки и публикации.

Статус: Preview (v0.0.2) • Publisher: AltmanEA

🚀 Установка

Из VS Code Marketplace (рекомендуется)

Откройте VS Code
Перейдите в раздел Extensions (Ctrl+Shift+X)
Найдите "sli.dev Course manager"
Нажмите Install

Из VSIX файла

code --install-extension sliman-vscode-extension-0.0.1.vsix

⭐ Основные возможности

📚 Управление курсами

Создание курсов: Быстрая инициализация нового курса с готовой структурой
Сканирование курсов: Автоматическое обнаружение и анализ существующих курсов
Course Explorer: Удобный древовидный интерфейс для навигации по курсу

📖 Управление лекциями

Добавление лекций: Создание новых лекций с автогенерацией имен папок
Редактирование: Открытие лекций в режиме разработки с hot reload
Структура лекций: Автоматическая настройка package.json и зависимостей

🔨 Сборка и публикация

Локальная сборка: Компиляция лекций в статические файлы
Сборка курса: Пакетная сборка всех лекций курса
GitHub Pages: Автоматическая настройка для публикации на GitHub Pages
Локальный просмотр: Запуск HTTP сервера для предварительного просмотра

🧩 Модульная система лекций

Shiki — красивая подсветка синтаксиса кода с поддержкой тем
Monaco Editor — интерактивный редактор кода (JavaScript, TypeScript, Python, Java, C++, C#, SQL и др.)
KaTeX — рендеринг математических формул LaTeX с поддержкой макросов
Mermaid — создание диаграмм и блок-схем (flowcharts, sequence, class diagrams)
Drauu — инструменты рисования и аннотаций на слайдах
Iconify — библиотека иконок (7000+ иконок: Material Design, Carbon и др.)

🛠️ Инструменты разработчика

Транслитерация: Автоматическое преобразование русских названий в латинские имена папок
Валидация: Проверка корректности имен курсов и лекций
Интеграция с терминалом: Выполнение команд сборки в встроенном терминале VS Code

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

Руководство по Monaco Editor — интерактивный редактор кода
Руководство по Iconify — библиотека иконок

🚀 Быстрый старт

1. Открытие Course Explorer

Установите расширение и перезапустите VS Code
Откройте папку для курса или создайте новую
Course Explorer появится в боковой панели (иконка "Course")
Если панель не видна: View → Appearance → Show Course Explorer

2. Создание первого курса

В Course Explorer нажмите "Create Course"
Или используйте палитру команд: sli.dev Course: Create Course
Введите название курса (например, "Мой первый курс")
Подтвердите создание структуры курса

3. Добавление лекции

В Course Explorer нажмите "Add Lecture"
Или используйте палитру команд: sli.dev Course: Add Lecture
Введите заголовок лекции (например, "Введение в программирование")
Расширение автоматически создаст папку lecture-vvedenie-v-programmirovanie/

4. Редактирование лекции

В Course Explorer дважды кликните на лекцию или нажмите "Edit"
Откроется файл slides.md и запустится dev сервер
Для просмотра слайдов в браузере используйте "View"

5. Сборка и просмотр курса

Для сборки лекции: нажмите "Build" в Course Explorer
Для просмотра курса: нажмите "View Course" (запускает HTTP сервер)

Примечание о названиях команд

В Course Explorer команды отображаются сокращенно для экономии места:

"Edit" = "Edit Lecture"
"View" = "Open slides.md"
"Build" = "Build Lecture"

📋 Команды

Основной способ работы — через панель Course Explorer в боковой панели VS Code.

Все команды также доступны через палитру команд (Ctrl+Shift+P) с префиксом "sli.dev Course:":

Команда	Описание	Доступ через
Create Course	Создаёт новую структуру курса	Course Explorer, палитра
Scan Course	Сканирует курс и отображает информацию	Палитра команд
Add Lecture	Добавляет новую лекцию	Course Explorer, палитра
Edit Lecture	Открывает лекцию + dev сервер	Course Explorer, палитра
Delete Lecture	Удаляет лекцию с подтверждением	Course Explorer, палитра
Build Lecture	Собирает лекцию в терминале	Course Explorer, палитра
View Course	Запускает HTTP сервер просмотра	Course Explorer, палитра
Open slides.md	Открывает файл слайдов	Course Explorer, палитра
Refresh	Обновляет Course Explorer	Course Explorer панель

🌳 Course Explorer

Course Explorer — это основной интерфейс расширения, расположенный в боковой панели VS Code. Он предоставляет удобную навигацию и быстрый доступ ко всем функциям курса.

Как открыть Course Explorer:

Найдите иконку "Course" в боковой панели VS Code
Если панель скрыта: View → Appearance → Show Course Explorer
Course Explorer автоматически обновляется при изменениях в курсе

Структура Course Explorer:

Когда курс не создан:

📁 Course Explorer
└── ➕ Create Course  ← Нажмите для создания нового курса

Когда курс создан:

📁 Course Explorer
└── 📁 Мой курс (название курса)
    ├── ➕ Add Lecture        ← Добавить новую лекцию
    ├── 👁️ View Course        ← Просмотр курса в браузере
    └── 📂 Lectures           ← Список всех лекций
        ├── 📁 lecture-vvedenie (Введение в программирование)
        │   ├── 👁️ View          ← Открыть файл slides.md
        │   ├── ✏️ Edit          ← Редактировать + dev сервер
        │   ├── 🔨 Build         ← Собрать лекцию
        │   └── 🗑️ Delete        ← Удалить лекцию
        └── 📁 lecture-osnovy (Основы)
            ├── 👁️ View
            ├── ✏️ Edit
            ├── 🔨 Build
            └── 🗑️ Delete

Возможности Course Explorer:

Быстрые действия: Все основные команды доступны одним кликом
Контекстное меню: Правый клик на лекции для дополнительных опций
Автообновление: Автоматическая синхронизация с файловой системой
Визуальные индикаторы: Иконки для разных типов элементов и действий
Двойной клик: Быстрое открытие или редактирование лекций

📋 Требования

Системные требования

VS Code: версия 1.85.0 или выше
Node.js: версия 18.18.0 или выше
pnpm: рекомендуется как менеджер пакетов

Зависимости

sli.dev (Slidev): Устанавливается автоматически для каждой лекции
http-server: Для локального просмотра курса

Поддерживаемые платформы

✅ Windows 10/11
✅ macOS 10.15+
✅ Linux (Ubuntu 18.04+)

🛠️ Разработка

Установка для разработки

# Клонирование репозитория
git clone https://github.com/AltmanEA/sliman-vscode-extension.git
cd sliman-vscode-extension

# Установка зависимостей
pnpm install

# Компиляция TypeScript
pnpm run compile

# Запуск в режиме разработки
F5 в VS Code

Доступные скрипты

# Компиляция TypeScript
pnpm run compile

# Компиляция в режиме отслеживания изменений
pnpm run watch

# Линтинг с автоисправлением
pnpm run lint

# Проверка линтером
pnpm run lint:check

# Запуск всех тестов
pnpm run test

# Категорийные тесты
pnpm run test:course      # Тесты CourseManager
pnpm run test:lecture     # Тесты LectureManager
pnpm run test:build       # Тесты BuildManager
pnpm run test:manager     # Тесты ManagersContainer

Архитектура

Проект построен по модульной архитектуре:

extension.ts: Точка входа расширения
managers/: Основные менеджеры (Course, Lecture, Build)
providers/: Tree View и Data Provider для Course Explorer
utils/: Вспомогательные утилиты
commands.ts: Регистрация и обработка команд

Подробная техническая документация: KODA.md

📝 Структура курса

После создания курс имеет следующую структуру:

my-course/
├── sliman.json              # Конфигурация курса
├── slides/                  # Директория с лекциями
│   ├── lecture-intro/
│   │   ├── slides.md        # Слайды лекции
│   │   └── package.json     # Зависимости лекции
│   └── lecture-basics/
│       ├── slides.md
│       └── package.json
├── my-course/              # Собранный курс
│   ├── slides.json         # Конфигурация всех лекций
│   ├── index.html          # Главная страница курса
│   ├── lecture-intro/      # Собранная лекция 1
│   └── lecture-basics/     # Собранная лекция 2
├── .github/
│   └── workflows/
│       └── static.yml      # GitHub Pages workflow (автоматически)
└── .gitignore              # Git ignore файл (автоматически)

Автоматические компоненты:

GitHub Pages: Workflow создается автоматически при создании курса
.gitignore: Настраивается под конкретный курс
index.html: Главная страница с навигацией по лекциям

🤝 Поддержка

Issues: GitHub Issues
Документация: KODA.md
sli.dev: Официальная документация

📄 Лицензия

Этот проект лицензирован под MIT License.

Сделано с ❤️ для сообщества sli.dev

sli.dev Course manager

AltmanEA