Мы постоянно улучшаем наш редактор кода, чтобы студентам было удобнее учиться. Теперь мы подсвечиваем ошибки в коде сразу, добавили подсказки с сигнатурой Python, автодополнения для PHP и Ruby, подсветку для всех языков и поиск по содержимому файлов. А еще вкладку логов, вывод тестов в терминал и несколько приятных мелочей. Показываем подробнее.
Ошибки в коде видны до тестов
Раньше студент замечал пропущенную скобку только после проверки: нажимал «Проверить», ждал результат, получал ошибку и искал нужное место в коде. Даже из-за простой опечатки приходилось запускать проверку заново.
Теперь такие ошибки видны сразу во время набора. Редактор подчеркивает незакрытые скобки, пропущенные точки с запятой и другие опечатки. Это работает для Python, PHP, Ruby, Java, Go, YAML, XML и HTML.
При этом студент видит настоящее сообщение от инструмента языка — например:
unexpected 'echo' (T_ECHO), expecting ';'
Так он с самого начала привыкает читать те же ошибки, с которыми будет сталкиваться и после обучения на Хекслете.
Улучшенные подсказки по коду
Автодополнение подхватывало в основном слова из текущего файла. Если один раз ошибиться в имени переменной, редактор мог потом предлагать ту же опечатку.
Теперь подсказки для Python учитывают сам язык и типы данных. При наборе редактор предлагает функции и методы стандартной библиотеки, показывает их сигнатуру и краткое описание.
Например, если написать os.path.basename(...) и поставить точку, редактор поймет, что результат — строка, и предложит строковые методы. Он также видит соседние открытые файлы проекта, поэтому может подсказать функцию или объект из другого модуля.
Дополнительно редактор предупреждает о неопределенных именах и неиспользованных импортах. Это предупреждения, а не ошибки: такой код иногда может запускаться, поэтому стилистическая или потенциальная проблема не выглядит как сломанный файл.
Подсказка с сигнатурой и описанием частично заменяет документацию прямо в редакторе. Студенту реже приходится переключаться в браузер, чтобы вспомнить название функции, порядок аргументов или доступные методы.
Раньше редактор предлагал в основном слова, которые уже встречались в текущем файле. Такие подсказки мало помогали, если нужно было вспомнить функцию стандартной библиотеки или ее аргументы.
Для PHP и Ruby в автодополнении появились реальные функции стандартной библиотеки. Редактор показывает их сигнатуру и краткое описание из документации.
Даже для языков, где редактор не делает такой глубокий анализ кода, как для Python, подсказки стали полезнее. Вместо случайных слов из файла студент получает функции, которыми действительно может воспользоваться, и сразу видит, как их вызывать.
Подсветка для всех языков курсов
Было. Часть форматов редактор распознавал плохо или не распознавал совсем. Makefile и файлы .erl могли оставаться обычным серым текстом, а .vue подсвечивался как HTML. На курсах, где Makefile — обычный рабочий инструмент, студенту приходилось редактировать его почти вслепую.
Стало. Теперь нормальная подсветка работает для Makefile, Erlang, Vue, Scheme, ini и других менее распространенных форматов, которые встречаются в курсах.
Бонус. Для Makefile редактор отдельно помогает с классической ошибкой: команда начинается с пробелов вместо табуляции.
Код в редакторе теперь выглядит так же, как в примерах и теории. Студенту проще читать файлы и сразу замечать ошибки в структуре.
Поиск по содержимому файлов
Было. Редактор умел искать только по именам файлов. Если нужно было найти, где используется функция или встречается нужная строка, приходилось открывать файлы по одному.
Стало. Теперь Cmd/Ctrl + Shift + F открывает поиск по всему проекту. Результаты появляются сразу по мере ввода, а по клику редактор открывает нужный файл и ставит курсор прямо на найденную строку.
Даже в проекте из десятка файлов это экономит время и лишние клики. А еще студент осваивает важный рабочий навык: поиск по кодовой базе, которым постоянно пользуются разработчики.
Вкладка «Лог»: видно, что делают сервисы
Было. Логи уже отображались в отдельной вкладке, но работать с ними было неудобно. Автопрокрутка постоянно возвращала вниз, даже если студент специально отмотал ленту вверх, чтобы прочитать ошибку. При переходе между вкладками позиция терялась, а при большом потоке сообщений интерфейс мог подтормаживать. Логи разных сервисов при этом шли одной общей лентой.
Стало. Теперь во вкладке «Лог» можно смотреть сообщения всех запущенных сервисов или оставить только нужный. Строки легче различать: у каждого сервиса свой цвет префикса, ERROR и FATAL выделяются красным, WARN — желтым.
Автопрокрутка тоже стала умнее: если отмотать логи вверх, редактор не будет уводить обратно вниз. Когда пользователь сам возвращается к последним сообщениям, автопрокрутка включается снова.
В проектах с несколькими сервисами логи — один из главных инструментов диагностики. Чем проще отделить сообщения нужного сервиса и спокойно прочитать ошибку, тем быстрее можно понять, что именно пошло не так.
Улучшение вывода тестов
Было. Результаты проверки отображались неудобно: большой объем вывода мог тормозить вкладку, длинные строки уезжали за экран, а сам текст было сложнее читать.
Стало. Теперь результаты тестов показываются в полноценном терминале. Сохраняются цвета, длинный вывод не подвисает, прокрутка работает привычно, а ссылки можно открывать кликом.
Вывод тестов — то, с чем студент работает постоянно. Чем быстрее он появляется и чем больше похож на обычный терминал, тем проще находить ошибки и привыкать к реальной среде разработки.
Мелочи, которые раздражали
Cmd/Ctrl + Sтеперь сохраняет файл. Раньше браузер перехватывал эту комбинацию и открывал окно «Сохранить страницу», хотя студент хотел сохранить код.Тесты запускаются на той версии кода, которая сейчас открыта в редакторе. Раньше в редких случаях запуск мог произойти раньше сохранения, и проверялась предыдущая версия файла.
Переключение вкладок теперь работает там, где находится фокус. Если студент работает в терминале, горячие клавиши не будут неожиданно листать вкладки редактора.
Ошибки при работе с файлами снова видны. Если файл не удалось создать, переименовать или удалить, редактор покажет уведомление, а не оставит пользователя гадать, почему ничего не произошло.
Описание задания тоже стало аккуратнее. Блоки кода больше не перегружены лишними номерами строк, а изменения в diff подсвечиваются привычно: добавленные строки — зеленым, удаленные — красным.
Начните любой курс бесплатно и протестируйте обновление.