Добавить поддержку языка vue js в редактор monaco

Question

Я пытался добавить поддержку языка vuejs в редактор monaco, но все мои попытки пока не увенчались успехом. Я пробовал плагин monaco-vue для редактора, но, похоже, он тоже не работает.

Конечный результат, которого я хотел бы достичь, состоит в том, чтобы предоставить дополнения, такие как https://codesandbox.io/, если они не так хороши, как vetur (плагин vuejs для vscode).

Любая помощь будет признательна. Заранее спасибо.

Answer 1

Monaco-vue, насколько мне известно, просто позволяет вам легко рендерить Monaco Editor в ваше приложение Vue с помощью компонента Vue. Поддержка языка Vue в редакторе требует подключения редактора к службе, совместимой с протоколом языка сервера (LSP). Я считаю, что Vetur является реализацией LSP - хотя я еще не пытался подключить к нему мой редактор Monaco. Проект Vetur LSP, похоже, имеет приличную документацию: https://github.com/vuejs/vetur/tree/master/server

Обзор интеграции LSP в редактор Монако см. По адресу: https://typefox.io/teaching-the-language-server-protocol-to-microsofts-monaco-editor

... и ссылка на модуль, который помогает с этим (также из Typefox): https://github.com/TypeFox/monaco-languageclient

Помните, что во время моего последнего посещения этого проекта он не работал с самой последней версией Монако - хотя я не потерял ни одной заметки, оставаясь версией 14.xx.

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

  mounted: function () {
    this.editor = monaco.editor.create(document.getElementById('container'), {
      value: 'this is code',
      automaticLayout: true
    })
  },