Get error: 'No workspace path found. Vetur initialization failed' when use vls in monaco-editor

[FoxDaxian]

Client code:

<template>
    <div id="editor" style="width: 500px; height: 500px"></div>
</template>

<script>
import { listen } from 'vscode-ws-jsonrpc';

window.setImmediate = window.setTimeout;

import {
    MonacoLanguageClient,
    CloseAction,
    ErrorAction,
    createConnection,
    MonacoServices,
} from 'monaco-languageclient';

import loader from '@monaco-editor/loader';

export default {
    name: 'Editor',
    async mounted() {
        loader.init().then((monaco) => {
            monaco.languages.register({
                id: 'vue',
            });
            monaco.languages.onLanguage('vue', () => {
                console.log('是vue文件');
            });
            const editorOptions = {
                // language: "python",
                language: 'vue',
                minimap: { enabled: true },
            };

            monaco.editor.create(
                document.getElementById('editor'),
                editorOptions
            );

            MonacoServices.install(monaco);
            this.connectToLangServer();
        });
    },
    methods: {
        createLanguageClient: function (connection) {
            return new MonacoLanguageClient({
                name: 'Monaco language client',
                clientOptions: {
                    documentSelector: [
                        {
                            language: 'vue',
                        },
                    ],
                    errorHandler: {
                        error: () => ErrorAction.Continue,
                        closed: () => CloseAction.Restart,
                    },
                },

                connectionProvider: {
                    get: (errorHandler, closeHandler) => {
                        return Promise.resolve(
                            createConnection(
                                connection,
                                errorHandler,
                                closeHandler
                            )
                        );
                    },
                },
            });
        },
        connectToLangServer: function () {
            const webSocket = new WebSocket('ws://127.0.0.1:8989');

            listen({
                webSocket: webSocket,
                onConnection: (connection) => {
                    var languageClient = this.createLanguageClient(connection);
                    var disposable = languageClient.start();

                    connection.onClose(function () {
                        return disposable.dispose();
                    });

                    connection.onError(function (error) {
                        console.log(error);
                    });
                },
            });
        },
    },
};
</script>

---

Server code:

const rpc = require('vscode-ws-jsonrpc');
const server = require('vscode-ws-jsonrpc/lib/server');
const lsp = require('vscode-languageserver');

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8989 });

function launch(socket) {
    const reader = new rpc.WebSocketMessageReader(socket);
    const writer = new rpc.WebSocketMessageWriter(socket);
    const socketConnection = server.createConnection(reader, writer, () =>
        socket.dispose()
    );
    const serverConnection = server.createServerProcess('JSON', 'node', [
        './node_modules/vls/dist/vueServerMain.js',
    ]);
    server.forward(socketConnection, serverConnection, (message) => {
        if (rpc.isRequestMessage(message)) {
            if (message.method === lsp.InitializeRequest.type.method) {
                const initializeParams = message.params;
                initializeParams.processId = process.pid;

                // initializeParams.workspaceFolders = [ <---- will get error when comment this block
                //     {
                //         uri: '/fsy',
                //         name: 'fsy',
                //         index: 0,
                //     },
                // ];
            }
        }
        console.log(message, 'request的json rpc');
        return message;
    });
}

wss.on('connection', function connection(ws) {
    const socket = {
        send: (content) =>
            ws.send(content, (error) => {
                if (error) {
                    console.log(error);
                }
            }),
        onMessage: (cb) => ws.on('message', cb),
        onError: (cb) => ws.on('error', cb),
        onClose: (cb) => ws.on('close', cb),
        dispose: (cb) => ws.close(),
    };
    launch(socket);
});

and even if remove comment, vls still not work, it is just can send and receive rpc data.

I would appreciate Anyone answer ~ thank you

[phil294]

Sorry, but I have no idea what you are trying to do. Why are you defining a LSP client inside a Vue SFC? The lsp (vls) is an IDE plugin, nothing you include in your actual vue code.

I'm also not a maintainer of this repo so I doubt I can really help you

(coming from #3401)

[FoxDaxian]

@phil294 thank you for reply.

I just wanna implement syntax highlight and intelligent features for single vue SFC like vetur in vscode.

so I found vls. the lsp can use rpc to communicate bewteen client and server. like send textDocument/hover and receive some info.

I think it will work in this way~ so I do this.

this tell us (mayby) vls can work with other editor client: vls readme

and then how could add vue intelligent in monaco-editor~ my friend~ 😊

[phil294]

Isn't Monaco part of VSCode? Why don't you just use Vetur as a normal VSCode extension?

Have you read through https://github.com/TypeFox/monaco-languageclient/blob/master/README.md ? I would suggest you build a complete hello world first and build their examples first before integrating VLS. Switching from a hello world extension to VLS should not be much more than replacing some url / server startup params. TBH I don't think people here can help you with that, all of this is Monaco-specific.

Either way, again, you need to keep LSP and Vue code seperate. You cannot build a lsp extension with Vue. Instead, LSP helps you build other projects with Vue. You really need to work through some guide, most preferrably this one to understand the architecture, before taking any advanced steps.