Stepik для VS Code (Fork)
[EN]
Fork: su-mt/stepik-vscode.
Автор: Данил Проскурин (꧁༒☬𝔉𝔜𝔡𝔡𝔡𝔡𝔰𝔰☬༒꧂).
Расширение для решения задач Stepik прямо в VS Code.
Проект распространяется под лицензией GPL-3.0. В этой версии добавлены
комментарии, форум решений, Markdown-форматирование, оценки, рендер формул,
экзамены, навигация по шагам и встроенный видеоплеер.
Содержание
Что умеет расширение
- вход в Stepik по OAuth;
- дерево курсов, разделов, уроков и шагов в боковой панели;
- отметки пройденных и начатых шагов;
- условие задачи и форма ответа в отдельной панели;
- кнопки «Назад» и «Далее» для перехода между шагами раздела;
- фоновая предзагрузка соседних шагов;
- отправка решений из редактора;
- папка решений
~/.stepik со структурой «курс → урок → шаг»;
- папка решений создаётся автоматически и не требует открытия в VS Code;
- все проверяемые типы заданий Stepik;
- экзаменационные разделы с таймером и блокировкой отправки;
- встроенный видеоплеер;
- комментарии, ответы, оценки и сортировки;
- форум решений для всех проверяемых типов заданий;
- Markdown и подсветка кода в комментариях;
- рендер математических формул через KaTeX/MathML.
Требования
- VS Code 1.85 или новее;
- аккаунт на stepik.org;
- собственное OAuth-приложение Stepik (создаётся за пару минут, см. ниже);
- для сборки из исходников — Node.js 18+.
Расширение не является официальным клиентом Stepik. Оно работает через
публичный API Stepik и использует ваши OAuth-данные.
Установка
Готовый файл VSIX
- Откройте раздел
Releases.
- Скачайте последний файл
stepik-vscode-fork-0.4.1.vsix.
- Установите его одним из способов:
из терминала:
code --install-extension stepik-vscode-fork-0.4.1.vsix
или в VS Code: Extensions → … → Install from VSIX…, затем выберите
скачанный файл.
- Перезагрузите окно: Developer: Reload Window.
После установки в панели активности появится значок Stepik.
Из исходников
Требуется Node.js 18+.
npm ci
npm run build
npx @vscode/vsce package
code --install-extension stepik-vscode-fork-0.4.1.vsix
Готовые файлы сборки: dist/extension.js и dist/audioWorker.js.
Установочный пакет: stepik-vscode-fork-0.4.1.vsix.
Первый запуск
- Нажмите на значок Stepik в панели активности слева.
- Расширение автоматически создаст папку решений
~/.stepik. Открывать её
как рабочую папку не нужно.
- Выполните вход: значок входа в заголовке панели или команда
Stepik: Login.
- Введите OAuth-данные приложения Stepik.
- Выберите курс командой Stepik: Select Course.
- Откройте любой шаг в дереве.
Папка решений не зависит от проекта, открытого в VS Code. Файлы и служебный
файл сопоставления «файл → шаг» всегда хранятся в ~/.stepik. Подробнее — в
разделе Папка решений.
Настройка OAuth
Расширение использует OAuth 2.0 с типом client-credentials. Это значит, что
ему нужны client id и client secret вашего приложения Stepik. Логин и
пароль от аккаунта Stepik вводить не нужно.
- Войдите на Stepik и откройте
https://stepik.org/oauth2/applications/.
- Нажмите «Новое приложение» (или New application).
- Заполните поля:
- Название — любое, например
Stepik VS Code;
- Client type —
confidential;
- Authorization grant type —
client-credentials;
- Redirect uris — можно оставить пустым.
- Сохраните приложение.
- Скопируйте Client ID и Client Secret.
В VS Code выполните Stepik: Login и вставьте сначала Client ID, затем
Client Secret. Секрет вводится скрыто.
Данные хранятся в защищённом хранилище VS Code (SecretStorage), а не в
обычных настройках. Access token обновляется автоматически, пока сохранены
Client ID и Client Secret. Команда Stepik: Logout удаляет сохранённые
учётные данные и открытую панель задачи.
Если нужно войти под другим аккаунтом Stepik, сначала выполните
Stepik: Logout, затем Stepik: Login с данными другого приложения.
Вход и выбор курса
- Stepik: Login — вход по Client ID и Client Secret.
- Stepik: Logout — выход и удаление сохранённых данных.
- Stepik: Select Course — выбор курса из списка ваших курсов.
- Stepik: Refresh — обновление дерева курса и прогресса.
После входа выбранный курс сохраняется. При следующем запуске расширение
восстанавливает его автоматически.
В список попадают курсы, на которые вы записаны на Stepik. Если нужного курса
нет, проверьте запись на курс на сайте и нажмите Stepik: Refresh.
Интерфейс
Боковая панель
В панели Stepik отображается дерево выбранного курса:
Цвета и значки подсказывают состояние:
- зелёный — шаг или урок пройден;
- жёлтый — шаг начат, но ещё не пройден;
- замок — материал заблокирован или недоступен;
- экзаменационный раздел показывает действие «Начать экзамен».
В заголовке панели доступны кнопки выбора курса, обновления, выхода и входа.
Панель задачи
При открытии шага справа открывается панель Stepik Task. В ней есть:
- кнопки «← Назад» и «Далее →»;
- ссылка Open on Stepik ↗;
- тип задания;
- условие задачи;
- форма ответа или выбор языка для задач с кодом;
- блок комментариев и вкладка решений.
Для задач с кодом файл решения открывается в редакторе, а панель задачи
остаётся рядом.
Решение задач
Задачи с кодом
- Откройте шаг типа код в дереве.
- В панели задачи выберите язык программирования.
- Нажмите Open in Editor.
- Расширение создаст файл и откроет его в редакторе. Путь:
~/.stepik/<курс>/<урок>/step-<номер>.<расширение>.
- Напишите решение и сохраните файл.
- Отправьте решение:
- кнопкой облака со стрелкой в заголовке редактора;
- или командой Stepik: Submit Solution из палитры команд.
Расширение использует последнюю попытку задания. Результат появится в
уведомлении, а подробности ошибки — в панели Output → Stepik.
Если файл не был создан через открытие шага или был перемещён после создания,
отправка не сработает: расширение не найдёт связь файла с заданием. В этом
случае откройте шаг заново из дерева.
Файл шаблона создаётся один раз. Если файл уже существует, расширение не
перезаписывает его — можно спокойно продолжать работу.
Тесты и другие типы заданий
В панели задачи поддерживаются все проверяемые типы Stepik:
- тест (
choice) — один или несколько вариантов ответа;
- короткий ответ (
string) — текст;
- число (
number);
- формула (
math) — обычная запись или LaTeX;
- развёрнутый ответ (
free-answer) — текст;
- сортировка (
sorting) — перетаскивание и кнопки ↑/↓;
- сопоставление (
matching) — выпадающие списки;
- таблица (
table) — чекбоксы или радиокнопки;
- пропуски (
fill-blanks) — текстовые поля и списки;
- SQL-запрос (
sql);
- HTML/CSS (
html) — редакторы HTML и CSS и чек-лист требований;
- файл данных (
dataset) — данные попытки и поле для решения;
- химическая формула (
chemical) — слоты формулы;
- пазл (
puzzle) — отметка о собранном пазле;
- код (
code) — файл решения в редакторе.
Порядок работы:
- Откройте шаг.
- Заполните форму или выберите варианты.
- Нажмите «Отправить».
- Дождитесь результата. Если ответ неверный, расширение покажет сообщение
или подробности в Output → Stepik.
- Кнопка «Новая попытка» создаёт новую попытку для тестовых заданий.
Для заданий string с файловым ответом и free-answer с вложениями есть
ограничение: расширение отправляет только текст. Файлы-вложения нужно
прикреплять на сайте Stepik.
Шаги text и random-tasks показываются как материал. При открытии они
отмечаются просмотренными, поэтому прогресс курса обновляется.
Форум решений
Вкладка «Решения» доступна у всех проверяемых типов заданий. Пока форум
закрыт, вкладка объясняет условие открытия и показывает кнопку
«Проверить снова».
Обычно решения открываются:
- после правильного ответа;
- или после заданного числа попыток.
После отправки ответа расширение автоматически проверяет доступ к форуму.
В форуме можно:
- переключаться между комментариями и решениями;
- сортировать обсуждение;
- открывать ответы;
- приложить своё отправленное решение через список «Мое решение»;
- посмотреть приложенный ответ: код, выбранные варианты, порядок сортировки,
пары, ячейки таблицы, значения пропусков, SQL/HTML или файл;
- увидеть решения преподавателя.
Если Stepik возвращает 403 или 404, форум считается недоступным до
следующей проверки.
Экзамены
Если раздел является экзаменом, его шаги скрыты до начала экзамена.
- Нажмите «Начать экзамен» у экзаменационного раздела.
- Подтвердите старт.
- Расширение создаст экзаменационную сессию через API Stepik и откроет
первый шаг.
- В панели задачи появится таймер «Осталось …».
После окончания времени кнопки отправки блокируются. Начать экзамен повторно
нельзя.
Если экзамен уже начат на сайте или в другом окне, расширение продолжит
существующую сессию и откроет шаги без повторного создания сессии. Активная
сессия восстанавливается после перезагрузки окна.
Не открывайте экзамен в нескольких окнах одновременно: таймер и состояние
сессии могут разойтись.
Видео
Видео-шаги открываются во встроенном плеере. Доступны:
- выбор качества;
- субтитры, если Stepik их отдаёт;
- превью и длительность;
- ссылка на оригинал;
- кнопка «На весь экран»;
- кнопка «Открыть в браузере».
При открытии шага расширение отправляет на Stepik запись о просмотре, поэтому
прогресс курса обновляется без перехода на сайт.
Встроенный Chromium в VS Code не декодирует AAC-звук из MP4. При первом
открытии видео расширение скачивает ролик в фоне, извлекает звуковую дорожку,
конвертирует её в MP3 и кэширует. Прогресс показывается под плеером. При
следующих открытиях звук доступен сразу.
Если звук не включился автоматически, нажмите «Включить звук». Если
VS Code запрещает полноэкранный режим, плеер переходит в режим «театра» на всю
панель. Кнопка «Открыть в браузере» открывает видео в браузере, где
доступны настоящий полноэкранный режим и родной звук.
Комментарии и форум решений
Внизу панели задачи находится обсуждение Stepik.
Комментарии
- первая страница комментариев загружается при открытии шага;
- следующие страницы подгружаются при прокрутке или кнопкой
«Показать ещё комментарии»;
- закреплённые комментарии показываются отдельным блоком;
- ответы открываются кнопкой «Показать ответы (N)»;
- показываются автор, аватар, роль, дата, удалённые и закреплённые
комментарии;
- код подсвечивается;
- HTML с сайта очищается перед вставкой в панель.
Комментарии доступны у всех шагов, включая text и video.
Сортировка
В списке сортировок доступны:
- Сначала новые;
- Сначала самые обсуждаемые;
- Сначала популярные;
- Сначала самые свежие обновления;
- Сначала ответы преподавателя;
- Мои комментарии — свои комментарии и ответы на чужие комментарии.
Преподаватель
- комментарий преподавателя подсвечивается и получает отметку
«Ответ преподавателя»;
- родительский комментарий получает рамку и отметку
«Преподаватель ответил»;
- отметки обновляются после загрузки ответов и после отправки своего ответа.
Как написать комментарий
- Прокрутите панель задачи к обсуждению.
- Введите текст в поле «Написать комментарий…».
- При необходимости используйте панель форматирования:
B, I,
</>, ссылка, цитата, список, блок кода.
- Нажмите «Отправить» или
Ctrl+Enter.
Чтобы ответить на конкретный комментарий, нажмите «Ответить» под ним.
Поддерживается Markdown:
- заголовки, списки, цитаты, таблицы;
- зачёркивание, встроенный код, блоки кода;
- ссылки и автоссылки;
- формулы.
Сырой HTML не исполняется: Markdown рендерится с html: false, результат
проходит очистку.
Оценки комментариев
- кнопки ▲ и ▼ показывают текущий счёт;
- повторное нажатие убирает голос;
- переключение между ▲ и ▼ меняет оценку;
- счётчики обновляются сразу, при ошибке состояние восстанавливается;
- кнопки скрываются, если Stepik запрещает голосовать.
Форум решений
Вкладка «Решения» находится рядом с «Комментариями». Она доступна у
всех проверяемых типов Stepik, а не только у задач с кодом.
- вкладки переключают обсуждение без перехода на сайт;
- шапка с вкладками закрепляется при прокрутке;
- сортировки и подгрузка работают и для решений;
- ответы внутри решений загружаются по кнопке;
- в форме нового решения можно выбрать «Мое решение» из отправленных
решений;
- решения преподавателя подсвечиваются.
Формулы
Формулы рендерятся в условиях задач, вариантах ответа и комментариях.
Поддерживаются:
$...$ и $$...$$;\(...\) и \[...\];\dfrac, \sqrt, дроби, степени, интегралы и другие команды KaTeX.
Используется MathML-вывод KaTeX, поэтому внешние шрифты и ослабление CSP не
нужны. Кириллица внутри формул автоматически оборачивается в \text{...}.
Код внутри <pre>, <code>, <script>, <style> и готовые <math>-блоки
не разбираются.
Встроенные формулы остаются в строке с текстом, выключные — на отдельной
строке по центру.
Команды и горячие клавиши
Палитра команд: Ctrl+Shift+P (Windows/Linux) или Cmd+Shift+P (macOS).
| Команда |
Действие |
| Stepik: Login |
Вход по Client ID и Client Secret |
| Stepik: Logout |
Выход и удаление сохранённых данных |
| Stepik: Refresh |
Обновление дерева и прогресса |
| Stepik: Select Course |
Выбор курса |
| Stepik: Submit Solution |
Отправка текущего файла решения |
Команды Stepik: Open Step и Stepik: Start Exam вызываются из
интерфейса и скрыты из палитры команд.
Горячие клавиши в поле комментария или решения:
| Клавиши |
Действие |
Ctrl+B |
Жирный |
Ctrl+I |
Курсив |
Ctrl+E |
Встроенный код |
Ctrl+K |
Ссылка |
Ctrl+Enter |
Отправить комментарий или решение |
На macOS используйте Cmd вместо Ctrl. Отдельных пользовательских настроек
у расширения нет: все параметры задаются при входе и выборе курса.
Папка решений
Решения всегда сохраняются в ~/.stepik и не зависят от папки, открытой
в VS Code:
~/.stepik/
├── Курс 1/
│ ├── Урок 1/
│ │ ├── step-1.py
│ │ └── step-2.py
│ └── Урок 2/
│ └── step-1.cpp
└── .stepik/
└── mapping.json
Файлы называются step-<номер>.<расширение>. Расширение определяется по
языку задания: Python — .py, C++ — .cpp, Java — .java и так далее.
Служебный файл .stepik/mapping.json хранит соответствие между абсолютным
путём файла и заданием Stepik. Без него команда отправки не понимает, какое
решение и на какой шаг отправлять.
Поэтому:
- открывать
~/.stepik как рабочую папку не нужно — расширение создаёт её
автоматически при первом запуске;
- можно работать в любом проекте: решения всё равно сохраняются в
~/.stepik;
- не перемещайте файлы решений вручную без повторного открытия шага.
Если папку ~/.stepik всё же открыть в VS Code, расширение продолжит работать
как обычно.
Обновление и удаление
Обновление
- Скачайте новый
.vsix из Releases.
- Установите его поверх старой версии:
Extensions → … → Install from VSIX….
- Перезагрузите окно.
Сохранённые OAuth-данные, выбранный курс и файлы решений остаются на месте.
Удаление
- Откройте Extensions, найдите Stepik.
- Нажмите Uninstall.
- Перезагрузите окно.
При желании можно удалить папку ~/.stepik с решениями. Перед удалением
сделайте резервную копию, если решения нужны. Команда Stepik: Logout
удаляет сохранённые учётные данные из VS Code.
Решение проблем
Не удаётся войти
- Проверьте, что приложение Stepik имеет тип
confidential и grant type
client-credentials.
- Скопируйте Client ID и Client Secret заново, без лишних пробелов.
- Убедитесь, что используете данные того приложения, которое создали.
- Посмотрите Output → Stepik и уведомление с текстом ошибки.
Нет курсов в списке
- Проверьте, что вы записаны на курс на stepik.org.
- Выполните Stepik: Refresh.
- Выйдите и войдите снова, если аккаунт сменился.
Шаг не открывается
- Раздел может быть заблокирован до прохождения предыдущих уроков.
- Экзаменационный раздел требует нажатия «Начать экзамен».
- Проверьте, не истекло ли время экзамена.
Отправка решения не работает
- Убедитесь, что папка
~/.stepik доступна для записи.
- Откройте шаг из дерева заново, чтобы создать или обновить связь файла
с заданием.
- Проверьте, что файл не был перемещён после создания.
- Для экзамена — проверьте, что сессия активна и время не истекло.
Ответ не принимается
- Для
string с файловым ответом расширение отправляет только текст.
- В
free-answer вложения не поддерживаются.
- Проверьте формат ответа: для
number — число, для math — формула.
- Для HTML/CSS проверьте пункты чек-листа в панели.
Решения не открываются
- Форум может открываться после правильного ответа или после нескольких
попыток.
- Нажмите «Проверить снова».
- Если Stepik возвращает
403/404, доступ ограничен на стороне Stepik.
Нет звука в видео
- Подождите завершения скачивания и конвертации — прогресс виден под плеером.
- Нажмите «Включить звук», если автовоспроизведение заблокировано.
- Нажмите «Открыть в браузере» — там звук и полноэкранный режим работают
нативно.
Ошибки API
- Откройте Output → Stepik.
- Выполните Stepik: Refresh.
- Перезагрузите окно: Developer: Reload Window.
- API Stepik может меняться без предупреждения; если ошибка повторяется,
проверьте раздел Issues репозитория.
Сборка из исходников
Требуется Node.js 18+.
npm ci
npm run build
npx @vscode/vsce package
Проверка типов:
npx tsc --noEmit
Готовая сборка: dist/extension.js и dist/audioWorker.js.
Установочный пакет: stepik-vscode-fork-0.4.1.vsix.
Ограничения
- нужен аккаунт Stepik и собственное OAuth-приложение;
- отправка комментариев, голосование и форум решений зависят от прав
аккаунта и ограничений Stepik;
- файловые ответы и вложения в
free-answer не поддерживаются;
- расширение не является официальным клиентом Stepik;
- API Stepik может меняться без предупреждения;
- встроенный плеер зависит от кодека и возможностей Chromium в VS Code.
Автор
Автор проекта — Данил Проскурин
Псевдоним: ꧁༒☬𝔉𝔜𝔡𝔡𝔡𝔡𝔰𝔰☬༒꧂
Репозиторий: https://github.com/danilproskurin291-cmd/stepik-vscode
Оригинальный проект: https://github.com/su-mt/stepik-vscode
Лицензия
GNU General Public License v3.0. См. LICENSE.txt.
