為 monaco-editor 添加 vue js 語言支持

Question

我一直在嘗試向 monaco 編輯器添加 vuejs 語言支持，但到目前為止我所有的嘗試都失敗了。 我已經嘗試過用於編輯器的monaco-vue插件，但它似乎也不起作用。

我想要實現的最終結果是提供與codesandbox.io一樣的完成，如果不如vetur （vuejs插件vscode）。

任何形式的幫助將不勝感激。 提前致謝。

Answer 1

據我所知，Monaco-vue 只是讓您能夠通過 Vue 組件輕松地將 Monaco Editor 渲染到您的 Vue 應用程序中。 編輯器中的 Vue 語言支持要求您將編輯器連接到符合語言服務器協議 (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 為我工作。 通過將編輯器渲染到安裝鈎子上的 DOM 的安裝生命周期鈎子嵌入並不難，如下所示：

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