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

Чтобы обеспечить эти возможности, нам нужен достаточно мощный редактор кода и добавление к нему поддержки нашего пользовательского языка, чтобы пользователи могли получить достаточную поддержку в подсветке синтаксиса, автозаполнении и т. д.

Почему Редактор Монако?

Visual Studio Code — очень популярный в мире редактор кода, а Monaco Editor — это редактор кода, используемый для создания основных функций VSCode, который предоставляет довольно много возможностей для реализации различных возможностей редактирования кода. А Microsoft предоставляет отдельный проект для Monaco Editor с отдельным скриптом упаковки, поэтому мы можем легко интегрировать Monaco Editor в наши собственные веб-приложения.

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

Итак, приступим!

Шаг 1. Зарегистрируйте язык

Здесь мы не будем подробно останавливаться на том, как внедрить Monaco Editor в веб-приложение, инструкции по интеграции Monaco Editor различными способами представлены в репозитории Monaco Editor.

Чтобы сообщить редактору Monaco, что мы добавляем поддержку пользовательского языка, нам нужно зарегистрировать идентификатор пользовательского языка, и здесь мы выбираем mylang в качестве нашего идентификатора пользовательского языка.

Регистрация пользовательского языка для редактора Monaco очень проста и может быть выполнена с помощью одной строки кода:

Все сделано!

Конечно, это только первый шаг в добавлении поддержки пользовательского языка, он просто сообщает редактору Monaco, что нам нужно добавить собственный язык под названием mylang. Предстоит проделать большую работу, чтобы сделать этот пользовательский язык более похожим на полностью поддерживаемый язык в редакторе Monaco.

Шаг 2. Добавьте ключевые слова

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

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

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

Начнем со списка ключевых слов, входящих в mylang, через который проходит массив слов:

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

Конечно, нам также нужно определить, в каком формате находятся строки и комментарии, и это можно сделать и с помощью регулярных выражений, например, строка, заключенная в двойные кавычки, обычно может быть представлена ​​следующим регулярным выражением:

А использование двойной косой черты для обозначения однострочного комментария можно сопоставить со следующим регулярным выражением:

Наконец, всю подсветку синтаксиса можно добавить в наш пользовательский язык с помощью setMonarchTokensProvider редактора Monaco:

Теперь посмотрим, что у нас есть:

О, поддержка подсветки синтаксиса с ключевыми словами, строками и комментариями завершена!

Что, кажется, здесь упущено? Да! Цвета здесь — это определения для ключевых слов, строк и цветов комментариев в теме, которая поставляется с редактором Monaco Editor. Как нам это сделать, если нам нужно определить разные цвета?

Ага, видите, мы получаем совершенно другой результат подсветки синтаксиса:

К настоящему времени мы завершили базовую подсветку синтаксиса ключевых слов для нашего пользовательского языка, и этот редактор имеет начальную доступную возможность кодирования с помощью нашего пользовательского языка mylang.

Шаг 3. Добавьте автозаполнение

Какая еще важная функция при использовании редактора кода? Да, автозаполнение!

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

Благодаря функции зарегистрированного поставщика автозаполнения Monaco Editor легко добавить возможности автозаполнения к нашему пользовательскому языку.

Здесь мы предоставим возможность автозаполнения для всех ключевых слов. Когда пользователь вводит первые несколько символов всех ключевых слов в списке ключевых слов в редакторе, он получает список автозаполнения, чтобы указать полное ключевое слово, и он может сделать это автоматически, нажав клавишу Tab.

Это очень просто? Чтобы увидеть, как это работает:

Как видите, редактор запрашивает полную строку ключевого слова после ввода всего двух символов, и вы можете нажать клавишу Tab, чтобы закончить ввод одним щелчком мыши.

Шаг 4. Добавьте маркер ошибки синтаксического анализа

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

Например, в mylang строка является ключевым словом, а строка — нет. Если в код введена строка и наш компилятор может указать на ошибку, то мы можем использовать функцию маркера редактора Monaco, чтобы определить проблему, чтобы пользователь мог быстро узнать, где находится ошибка, и быстрее исправить проблему.

Например, внутренний компилятор может выдать такую ​​структуру сообщений об ошибках:

Затем мы можем использовать редактор Monaco, чтобы запросить эту ошибку в редакторе кода со следующим кодом:

Внимание: редактор здесь — это объект-экземпляр, созданный редактором Monaco.

В конце концов, мы получаем полезный индикатор сообщения об ошибке, и пользователь может навести указатель мыши на эту ошибку и получить соответствующее сообщение об ошибке:

К настоящему времени мы завершили полную поддержку разработки для пользовательского языка, mylang, с подсветкой синтаксиса ключевых слов, автозаполнением ключевых слов и подсказками об ошибках компиляции, все из которых являются важными функциями, предоставляемыми редактором Monaco.

В конце

Конечно, не забудьте указать язык экземпляра редактора Monaco в качестве нашего пользовательского языка mylang при его инициализации, иначе он не будет отображать и запрашивать код, как мы ожидаем.

Кроме того, поддержка пользовательских языков в Monaco Editor не ограничивается этими функциями, есть более мощные возможности, которые можно изучить в API Monaco Editor.

Надеюсь, эта статья будет для вас полезной.