javascript - 为 monaco-editor 添加 vue js 语言支持

Question

我一直在尝试为 monaco 编辑器添加 vuejs 语言支持，但到目前为止我的所有尝试都失败了。我试过了 monaco-vue编辑器的插件，但它似乎也不起作用。

我想要实现的最终结果是像 codesandbox.io 一样提供补全。如果不如vetur (vscode 的 vuejs 插件)。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

据我所知，Monaco-vue 使您能够通过 Vue 组件轻松地将 Monaco Editor 呈现到您的 Vue 应用程序中。编辑器中的 Vue 语言支持要求您将编辑器连接到符合语言服务器协议(protocol) (LSP) 的服务。我相信 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 为我工作。通过将编辑器渲染到已安装钩子(Hook)上的 DOM 的已安装生命周期钩子(Hook)嵌入并不难，如下所示:

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