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]

@elchininet thats to bad. Thank you for letting me know :) i will share if i get something working, but im not very hopefull atm.

Looks like the older version is the way to go, and just create the languageservice the old way :)

[ejfasting]

So, i've looked a this some more today. I've gotten to the point where the intellisense KINDA works...
What i've found is that the initial list of completionItems are correct:

Here i've even injected a custom class at the top of the virtual document, in my languagePlugin, before it is sendt to the languageService for typescript:

This class can be used (even though i dont fully agree with the result here..):

But if i define a const, for instance, I dont get the methods that belongs to this type of variable:

I guess its something, but this just leads me to be even more confused to why it doesnt work the same through monaco as it does through a vscode extension, if it actually hits the languageserver correctly and pass it to the correct service in the same way

[remcohaszing]

Typically you have one VirtualCode that contains the original file, and use embeddedCodes to create processed virtual codes. I’m not really sure if putting processed code in the top-level VirtualCode is supposed to work.

Your example has one mapping, where the length exceeds the length of both the original code and the generated code from its offset. That can’t be correct. You intended to use text.length where you have newText.length.

I strongly suggest you use the Volar Labs extension to debug your virtual code.

P.s. If you post code snippets, please use markdown code blocks, not screenshots. Screenshots of text are bad for accessibility.

[ejfasting]

Ok, so i simplified the whole example, basically removing all my custom imports and only have a document that is for the language typescript:
https://github.com/ejfasting/language-tools/blob/3e2bb689942afdaf220d46eaea627b13f7db2a82/packages/language-service/documentScanner.ts#L17
It's still the same result, in monaco, and still works as it should in vscode. E.g. i get the initial/root list of completionItems to show, but for a defined variable it doesnt show the methods that belongs to the type.

Regarding volar labs I'm using that when developing for vscode, but it can't debug what happens for Monaco, can it? At least I havent found a way to hook into it and see what virtual documents is being created by the monaco editor..

[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