Представляем Elm Editor — веб-интерфейс IDE для программ на языке Elm

(Оригинальная публикация на https://michaelrätzel.com/blog/introducing-elm-editor-a-web-based-ide-for-elm-programs)

Около года назад я начал работать над Elm Editor, веб-приложением для разработки программ на языке Elm.

Будучи интегрированной средой разработки, оно помогает нам читать, писать и тестировать Elm-программы, а также сотрудничать с другими разработчиками.

Этот проект минимизирует трудности, с которыми сталкиваются новички, приступая к программированию. Поскольку внешний интерфейс полностью основан на веб-технологиях, он практически не требует настройки. Для его использования достаточно любого современного веб-браузера.

Чтобы увидеть Elm Editor в действии, посмотрите публичный экземпляр на сайте https://elm-editor.com.

Это видео — краткая демонстрация цикла редактирования кода в Elm Editor:

Функции в 2021 году

Некоторые из функций поставляются бесплатно вместе с редактором Monaco Editor. Другие потребовали дополнительных усилий и создания кода на javascript для связи и синхронизации с редактором кода. (В этом проекте я узнал много нового о javascript)

  • Просмотр и редактирование всех файлов модулей Elm, а также других текстовых файлов в вашем проекте.
  • Проверка программ на наличие проблем, таких как ошибки компилятора Elm.
  • Сохранение и обмен текущим состоянием проекта, включая все файлы.
  • Импорт полных проектов из публичных git-репозиториев.
  • Для внешних веб-приложений просмотр и тестирование приложения в iframe.
  • Визуальные маркеры в коде для быстрого поиска мест возникновения проблем.
  • Показ описаний ошибок при наведении мыши.
  • Предложения по завершению для обнаружения доступных деклараций и изучения полезных кодов.
  • Показ документации и подробностей при наведении курсора мыши на часть кода.
  • Палитра команд для открытия новых функций и сочетаний клавиш.
  • Поиск текста с опциями чувствительности к регистру, регулярными выражениями и заменой совпадений.

Помимо этих функций, которые также встречаются в традиционных больших настольных IDE, есть и более инновационные возможности, такие как дифференциальная модель состояния проекта.

Организация и реализация проекта

Elm Editor — это проект с открытым исходным кодом, организованный для легкой настройки и развертывания пользовательских экземпляров. Исходный код находится на сайте https://github.com/elm-fullstack/elm-fullstack/tree/main/implement/example-apps/elm-editor.

Большая часть действий происходит во фронтенде. Основная роль back-end заключается в интеграции таких инструментов, как исполняемые файлы Elm и elm-формата, и взаимодействии с сервисами хостинга Git, такими как GitHub и GitLab.

Фронтенд в основном написан на Elm и интегрирует редактор Monaco из проекта VS Code. Приложение Elm реализует порты с редактором Monaco Editor на основе javascript. На стороне Elm также реализованы языковые сервисы, которые обеспечивают работу функций редактора, требующих понимания синтаксиса и семантики языка программирования Elm.

Outlook

Развитие продолжается, чтобы сделать чтение и разработку программ на Elm еще более эффективными. Интеграция бегуна тестов кажется одной из наиболее очевидных вещей, которые необходимо добавить в ближайшее время. Добавление REPL кажется еще одним замечательным дополнением. REPL — это более интерактивная альтернатива для тестирования и изучения поведения кода в текущей рабочей области.

Есть и более мелкие улучшения, такие как предварительный просмотр файлов Markdown и просмотрщики изображений и аудиофайлов (для тех, кто работает над видеоиграми).

Есть масса идей для новых функций; я мог бы продолжать часами. Как и в других моих проектах с открытым исходным кодом, расстановка приоритетов во многом зависит от ваших отзывов. Помимо обсуждения в Elm, хорошее место для обсуждения и обратной связи — на GitHub по адресу https://github.com/elm-fullstack/elm-fullstack/discussions или в разделе issues.

Оцените статью
Procodings.ru
Добавить комментарий