/task-3

Задание 3. Найдите ошибки — ШРИ, Москва, осень 2019

Primary LanguageTypeScript

Задание 3. Найдите ошибки

В этом репозитории находятся материалы тестового задания «Найди ошибки» для 15-й Школы разработки интерфейсов (осень 2019, Москва).

Для работы приложения нужен Node.JS v10 или выше, а также редактор VS Code.

Задание

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

Тестовое приложение — это плагин VS Code для удобного прототипирования интерфейсов с помощью дизайн-системы из первого задания. Вы можете описать в файле .json блоки, из которых состоит интерфейс. Плагин добавляет превью (1) и линтер (2) для структуры блоков.

скриншот интерфейса

1. Превью интерфейса

  • Превью интерфейса доступно для всех файлов .json.
  • Превью открывается в отдельной вкладке:
    • при выполнении команды Example: Show preview через палитру команд;
    • при нажатии кнопки сверху от редактора (см. скриншот);
    • при нажатии горячих клавиш ⌘⇧V (для macOS) или Ctrl+Shift+V (для Windows).
  • Вкладка превью должна открываться рядом с текущим редактором.
  • Если превью уже открыто, то вместо открытия ещё одной вкладки пользователь должен переходить к уже открытой.
  • При изменении структуры блоков в редакторе превью должно обновляться.
  • Сейчас превью отображает структуру блоков в виде прямоугольников — реализуйте отображение превью с помощью вёрстки и JS из первого задания.

2. Линтер структуры блоков

  • Линтер применяется для всех файлов .json.
  • Линтер подсвечивает ошибочное место в файле и отображает сообщение при наведении мыши.
  • Линтер отображает сообщения на панели Problems (⌘⇧M для macOS или Ctrl+Shift+M для Windows), сообщения группируются по файлам, при клике происходит переход к ошибочному месту.
  • Сейчас плагин использует линтер-заглушку, проверяющий всего два правила: 1) «запрещены названия полей в верхнем регистре»; 2) «в каждом объекте должно быть поле block». Подключите в проект линтер из второго задания.

3. Настройки

Плагин добавляет в настройки VS Code новый раздел Example с параметрами:

  • example.enable — использовать линтер;
  • example.severity.uppercaseNamesIsForbidden — тип сообщения для правила «запрещены названия полей в верхнем регистре»;
  • example.severity.blockNameIsRequired — тип сообщения для правила «в каждом объекте должно быть поле block».

Типы сообщений: Error, Warning, Information, Hint.

При изменении конфигурации новые настройки должны применяться к работе линтера.

Как запустить

  1. Открыть проект в VS Code.
  2. Запустить npm i.
  3. Нажать F5.

Должно открыться ещё одно окно VS Code с подключённым плагином.

Что мы проверяем этим заданием

В этом задании мы хотим проверить вашу способность разобраться в незнакомом коде и API, а также ваш навык отладки. Пожалуйста, опишите в коде или файле README ход ваших мыслей: какие ошибки и как вы нашли, почему они возникли, какие способы их исправления существуют. Мы не ограничиваем вас в использовании сторонних инструментов и библиотек, но будем ждать от вас комментария — что и зачем вы использовали.