Some help to implement a TypeScript language service using the new API

[elchininet]

Hi there,

I opened this issue some months ago. I have been trying to implement a TypeScript language service with custom type defintions following the instructions of the new API, but I have not succeed on that.

First of all I would like to double-check these small issues and know if the fix that I applied is correct on each case:

1. createTypeScriptService in servicePlugins

As the createTypeScriptService returns an array of ServicePlugin it seems that it should be spreaded.

2. registerProviders method

I also added the getSyncUris there following the types.

If these fixes are OK, I would like to have your help to detect what I am missing. I have created a minimum reproducible repo.

In the old branch it is implemented using @volar/monaco@1.7.9 and the language service works but without the ability of adding my own custom type definitions.

In the master branch I'm using @volar/monaco@2.1.2 and I cannot make the language service to work, it seems that something needs to be done, but I am not able to indentify what.

On each branch just run yarn and yarn start to open the dev server.

Could you indicate what I am missing?

Regards and thanks in advance.

[remcohaszing]

You’re almost there!

You have registered the TypeScript service plugin, which adds support for TypeScript features. However, you haven’t registered any language plugins, so Volar doesn’t understand how to handle Vue files. So in vue.worker.ts, you should add something along the lines of:

import { createVueLanguagePlugin } from '@vue/language-core';

// …

worker.initialize((ctx) => {
  // …

  return createTypeScriptWorkerService({
    // …
    languagePlugins: [createVueLanguagePlugin(/* … */)]
  })
})

I don’t know the exact options createVueLanguagePlugin accepts, but you can have a look at https://github.com/vuejs/language-tools/blob/v2.0.6/packages/language-server/node.ts#L45-L65.

[elchininet]

For future visitors searching for the same, I was able to make it work partially, but at least I know that I am on the right direction. Basically I followed @remcohaszing's recommendation, but as the API of createVueLanguagePlugin has drastically changed, and there is no documentation about how to build it, I just ran the project using @volar/monaco@1.7.9 which was working and debug the code to get the generated compiler options there and I manually built a vueCompilerOptions object. I also needed to build my own types because the types in the documentation are wrong/outdated, they just throw TypeScript errors, so I built them taking the parameters of the functions.

For some reason, the intellisense for the script, style and template tag is not there yet, but at least the types for the defineComponent and other variables is working.

I pushed the changes to the branch volar_monaco_2. If someone find a solution to make the intellisense work completely with a SFC code, just create a pull rquest to the repo.

Regards

[johnsoncodehk]

@elchininet this is due to you only adding volar-service-typescript. You can use getFullLanguageServicePlugins of @vue/language-service, which will add all language service plugins useful for Vue.

import { createVueLanguagePlugin, resolveVueCompilerOptions } from '@vue/language-core';
import { getFullLanguageServicePlugins } from '@vue/language-service';

self.onmessage = () => {

    worker.initialize((ctx: monaco.worker.IWorkerContext) => {

        // ...

        return createTypeScriptWorkerLanguageService({
            typescript: ts,
            compilerOptions,
            uriConverter,
            workerContext: ctx,
            env,
            languagePlugins: [
                createVueLanguagePlugin(
                    ts,
                    compilerOptions,
                    resolveVueCompilerOptions({}),
                    uriConverter.asFileName
                )
            ],
            languageServicePlugins: getFullLanguageServicePlugins(ts)
        });
    });
};

[elchininet]

Thanks @johnsoncodehk!

That solved the intellisense for the SFC tags 🎉

Can I open a pull request for the the documentation changing all the things that I encountered that were not working following the steps?

[johnsoncodehk]

@elchininet sure, please. 🙏 (We are currently very short of manpower)

[elchininet]

@johnsoncodehk,
Perfect, I'll do it.
By the way, everything is working but my own global types, something that was working in the old version. So my custom Vue components are recognised as any. Does this new version require a special method to declare global types?
Regards