Расширение синтаксиса JavaScript в Monaco Editor с полной интеграцией - PullRequest
0 голосов
/ 05 октября 2018

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

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

Моя первая попытка была вызвать setMonarchTokensProvider , передавая измененную версию правил токенизатора TypeScript .В частности, я смог добавить разделитель начала-ограждения к корневому правилу и создать новое правило для подъязыка таким же образом, как документация для Monarch (подсветка синтаксиса Монако) описывает , используя @ nextEmbedded .(В целях тестирования я жестко программировал CSS как встроенный язык.)

Когда я вызываю setMonarchTokensProvider, например, для языка "javascript" , он полностью игнорирует подсветку синтаксиса.tokenizer, и окрашивает кодовые границы CSS как недопустимый JavaScript, указывая, что вы не можете переопределить встроенный режим JavaScript таким образом.

Когда я вызываю setMonarchTokensProvider с новым языком (например, «mylang») и устанавливаюредактор, использующий этот язык, предоставляет правильную подсветку синтаксиса (!) для этого гибридного языка CSS-in-JS.Но все другие расширенные функции, которые были найдены в режиме JavaScript, больше не присутствуют.В редакторе не было интеллектуального автозаполнения для методов, определенных для классов в одном и том же файле, или сообщений об ошибках в редакторе для неверного синтаксиса, или каких-либо его торговых марок Функции JavaScript IDE .

Итак, моей следующей попыткой было изменить определение TypeScript предварительно скомпонованного кода Монако, чтобы включить мои собственные правила подсветки синтаксиса.Это правильно выделило мой код CSS-in-JS полностью (!), Когда при установке языка на «машинописный текст» и оставили все остальные функции без изменений (!), Включая диагностические отчеты (живая проверка и подчеркиваниеошибки), автозаполнение, все это!(Я не пробовал это с «javascript», но можно предположить, что он, вероятно, работает или тривиально, чтобы заставить его работать, поскольку JavaScript фактически реализован как вариант конфигурации режима TypeScript в Монако .)

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

The thing almost working.

Я знаю, что этотеоретически выполнимо, потому что в режиме HTML вы можете встраивать CSS или JS с полной поддержкой для правильной проверки и автозаполнения и любой другой функции IDE;по сути, каждый подъязык в файле HTML работает так, как будто он находится в своем собственном файле: функции HTML в корне файла, функции CSS в тегах стиля, функции JS в тегах сценария.

Но, углубляясь в реализацию плагина TypeScript внутри Монако, неясно, с чего начать редактирование, будь то пользователь библиотеки Монако, или разветвление и исправление его в случае необходимости.Я начал пытаться изменить DiagnostcsAdapter [sic] и отследить, где он на самом деле реализован, но застрял в двух вызовах функций, где, кажется, выдвигается обещание проверки синтаксиса который возвращает значение, которое будет использовано позже , но реализация getSyntacticDiagnostics просто переводит работу в какую-то другую реализацию, которую я не могу найти где-либо еще в репо ни в репо на монако-языках , ни в репо vscode .

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

По словам создателя Монако:

Архитектурно, вы можете сделать следующее:

  • напрямую использовать ядро ​​monaco-editor
  • определите новый язык для редактора
  • fork monaco-typcript и измените его для работы с новым идентификатором langauge.Затем измените код хоста языка TS, чтобы не передавать исходные модели в TypeScript, но сначала запустите предварительную обработку, которая удаляет ваш пользовательский язык из текста, а затем только передает действительный TypeScript компилятору TS.Одна из идей - заменить каждый удаляемый символ пробелом.Это оставит всю работу по вычислению положения / смещения без каких-либо усилий на вашей стороне.

Удачи!

0 голосов
/ 13 октября 2018

Я делаю похожую вещь.Мое решение состоит в том, чтобы разместить не-JS-код внутри комментария блока:

regularJsCode()
/* 
[your-syntax-identifying-start-token]
place any syntax you want here
[your-syntax-identifying-end-token]
*/
regularJsCode()

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

Этот подход предпочтительнее, потому что ваш файл JS по-прежнему остается на 100% действительным файлом JS.

Если вы все еще не хотитечтобы поместить свой синтаксис в комментарии, вам нужно создать собственное расширение файла , например .jsx / .tsx.На практике это означает, что вам нужно создать расширение VSCode с языковым сервером и прочим.Это не так просто, но документация хорошая.Вы можете собрать свой собственный код подсветки JS внутри расширения VSCode, используя языковой сервер: https://github.com/sourcegraph/javascript-typescript-langserver

...