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

Question

I've been trying to add vuejs language support to monaco editor, but all my attempts have failed so far. I've tried monaco-vue plugin for editor for but it doesnt seem to work either.

The end result that I would want to achieve is to provide completions just as codesandbox.io if not as good as vetur (vuejs plugin for vscode).

Any kind of help would be appreciate. Thanks in advance.

Answer 1

Monaco-vue, to my knowledge, simply enables you to easily render the Monaco Editor into your Vue app by way of a Vue component. Vue language support within the editor requires that you hook up the editor to a Language Server Protocol (LSP)-compliant service. I believe Vetur is an LSP implementation - though I have not yet attempted to connect my Monaco editor to it as of yet. The Vetur LSP project seems to have decent documentation: https://github.com/vuejs/vetur/tree/master/server

For an overview of integrating LSP into a Monaco editor, see this: https://typefox.io/teaching-the-language-server-protocol-to-microsofts-monaco-editor

...and a link to a module that helps with this (also from Typefox): https://github.com/TypeFox/monaco-languageclient

Beware that, as of my last visit to that project, it does not work with the very latest version of Monaco - though I haven't lost any features of note by staying back at version 14.xx.

Also, I couldn't get Monaco Vue to work for me. It isn't hard to embed via the mounted lifecycle hook that renders the editor to the DOM on the mounted hook, like this:

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