Редактор Monaco

Редактор Monaco — это полнофункциональный редактор кода от VS Code. Ознакомьтесь с документацией VS Code, чтобы увидеть некоторые из поддерживаемых функций.

Попробуйте!

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

Установка

> npm install monaco-editor

Вы получите:

• внутри /esm: ESM-версия редактора (совместима, например, с webpack);
• внутри /dev: AMD в комплекте, не минифицированный;
• внутри /min: AMD в комплекте и минифицированный;
• внутри /min-maps: исходные карты для min;
• monaco.d.ts: определяет API редактора (именно это фактически версионируется, всё остальное считается частным и может сломаться с любым выпуском). Рекомендуется разрабатывать версию dev, а в продакшене использовать версию min.

Концепции

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

Модели

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

URI

Каждая модель идентифицируется по URI. Вот почему невозможно, чтобы две модели имели один и тот же URI. В идеале, когда вы представляете контент в редакторе Monaco, вы должны думать о виртуальной файловой системе, которая соответствует файлам, которые редактируют ваши пользователи. Например, вы можете использовать file:/// в качестве базового пути. Если модель создана без URI, её URI будет inmemory://model/1. Номер увеличивается по мере создания новых моделей.

Редакторы

Редактор — это пользовательский вид модели. Это то, что прикрепляется к DOM и что видят ваши пользователи визуально. Типичные операции редактора включают отображение модели, управление состоянием представления или выполнение действий или команд.

Провайдеры

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

Диспозитивы

Многие связанные с Монако объекты часто реализуют метод .dispose(). Этот метод предназначен для выполнения очистки, когда ресурс больше не нужен. Например, вызов model.dispose() отменит регистрацию модели, освободив URI для новой модели. Редакторы следует утилизировать, чтобы освободить ресурсы и удалить слушателей модели.

Документация

— Узнайте, как интегрировать редактор с этими полными примерами. — [Интеграция AMD... Версия

• Интеграция версии ESM.

• Узнайте, как использовать API редактора и опробовать собственные настройки на площадке для игр.

• Изучите документацию по API или прочитайте её прямо из monaco.d.ts.

• Прочитайте это руководство, чтобы обеспечить доступность редактора для всех ваших пользователей!

• Создайте токенизатор Monarch для нового языка программирования на площадке Monarch.

• Задавайте вопросы на StackOverflow! Ищите открытые и закрытые вопросы, там есть много советов!

Проблемы

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

Часто задаваемые вопросы

❓ Что такое связь между VS Code и редактором Monaco?

Редактор Monaco создан непосредственно из источников VS Code с некоторыми прокладками вокруг служб, которые нужны коду, чтобы он работал в веб-браузере вне своей среды.

❓ Какова связь между версией VS Code и версией редактора Monaco?

Никакой. Редактор Monaco — это библиотека, и он отражает исходный код напрямую.

❓ Я написал расширение для VS Code, будет ли оно работать в браузере с редактором Monaco?

Нет.

Примечание: если расширение полностью основано на LSP и если языковой сервер написан на JavaScript, то это возможно.

❓ Зачем все эти веб-воркеры и почему мне стоит о них беспокоиться?

Языковые службы создают веб-воркеров для выполнения тяжёлых вычислений вне потока пользовательского интерфейса. Они почти не требуют ресурсов, и вам не стоит слишком беспокоиться о них, пока они работают (см. выше случай междоменного взаимодействия).

❓ Что это за loader.js? Могу ли я использовать require.js?

Это загрузчик AMD, который мы используем в VS Code. Да.

❓ У меня появляется предупреждение «Не удалось создать веб-воркера». Что делать?

HTML5 не позволяет страницам, загруженным через file://, создавать веб-воркеров. Пожалуйста, загрузите редактор с веб-сервера по схемам http:// или https://.

❓ Поддерживается ли редактор в мобильных браузерах или мобильных веб-приложениях?

Нет.

❓ Почему редактор не поддерживает грамматики TextMate?

Пожалуйста, посмотрите https://github.com/bolinfest/monaco-tm, который объединяет monaco-editor, vscode-oniguruma и vscode-textmate, чтобы получить поддержку грамматики TM в редакторе.

Вклад / Локальная разработка

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

Кодекс поведения

Этот проект принял Кодекс поведения Microsoft с открытым исходным кодом. Для получения дополнительной информации см. Часто задаваемые вопросы о кодексе поведения или свяжитесь с opencode@microsoft.com с любыми дополнительными вопросами или комментариями.

Лицензия

Лицензия MIT.