将Vue.js语言支持添加到Monaco编辑器

Question

我一直在尝试为 Monaco 编辑器添加 Vue.js 语言支持，但到目前为止都没有成功。我尝试了 monaco-vue 插件，但它似乎也无法正常工作。

我的最终目标是提供与 codesandbox.io 相同甚至更好的自动完成功能，就像 vetur（用于 VSCode 的 Vue.js 插件）一样。

非常感谢您的任何帮助。谢谢！

- Nishkal Kashyap

Answer 1

据我所知，Monaco-vue可以通过Vue组件轻松地将Monaco编辑器渲染到你的Vue应用程序中。编辑器内的Vue语言支持需要你将编辑器连接到一个符合LSP（Language Server Protocol）标准的服务上。我相信Vetur是一个LSP实现，但我尚未尝试将我的Monaco编辑器连接到它上面。Vetur LSP项目似乎有很好的文档：https://github.com/vuejs/vetur/tree/master/server

有关将LSP集成到Monaco编辑器中的概述，请参见此链接：https://typefox.io/teaching-the-language-server-protocol-to-microsofts-monaco-editor

...以及一个帮助实现此功能的模块的链接（同样来自Typefox）：https://github.com/TypeFox/monaco-languageclient

请注意，截至我上次访问该项目时，它不能与最新版本的 Monaco 一起使用 - 尽管我通过留在 14.xx 版本没有失去任何值得注意的功能。

此外，我无法让 Monaco Vue 对我起作用。通过挂载生命周期钩子将编辑器呈现到 DOM 上的 mounted 钩子中嵌入并不难，像这样：

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

- Stephen Newport

---

感谢您的回复，Stephen。但我认为您混淆了vue-monaco npm包和monaco-vue，前者是一个vue组件，而后者则是编辑器的vue语言服务。正如您可以在monaco-vue的github页面上阅读到的那样，它是从vetur分支出来的，应该像我们已经为typescript、html和css提供的支持一样，直接提供vue语言支持。但不幸的是，它并没有起作用。它确实在浏览器中创建了一个vue-worker，但只会抛出各种错误。因此，我正在自己编写一个新的语言服务包，并将在完成后在这里更新。 - Nishkal Kashyap

嘿，你们中有人知道如何将 Vetur LSP 与 Monaco 编辑器实例连接吗？ 感激不尽！ 如果有任何帮助/有用文档的链接，请告诉我。 - Albert Rannetsperger