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/[email protected] and the language service works but without the ability of adding my own custom type definitions.

In the master branch I'm using @volar/[email protected] 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.

[ejfasting]

Hello @elchininet
My issue seems to be that 'activateAutomaticTypeAcquisition' was mandatory to make typescript work properly:
https://github.com/ejfasting/volarjs-starter/blob/master/packages/monaco/src/custom.worker.ts#L28

[elchininet]

Hi @ejfasting,
I forgot this discussion for a while. Were you able to make it work?
Regards

My issue seems to be that 'activateAutomaticTypeAcquisition' was mandatory to make typescript work properly:

In the minimum repo that I posted above I am using activateAutomaticTypeAcquisition, but it still doesn't work.

[ejfasting]

Hello @elchininet

I set up a sample-project, where i used vue to present the monaco editor.
You can check out the sourcecode here.

It uses this custom.worker, so maybe this helps (?)

//Eivind

[elchininet]

Thanks @ejfasting,
I am following the documentation but there are multiple breaking changes that are not reflected there and they have been shipped as minor releases, so I'll try to check your code and try to get it working from there.
Thanks again

[ejfasting]

Hi again @elchininet,

You are correct, the documentation is outdated compared to what i figured out was correct..
I actually ended up asking on discord.

Hope you can make it work! :)

/Eivind