The sample given at for Writing-a-Language-Service-Plugin doesn't compile.

[msgirlperl]

Bug Report

🔎 Search Terms

plugin
language-service
compile

• I was unable to test this on prior versions because there are no earlier versions of the documentation_____

💻 Code

This is copied from the guide at
https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin

  const ts = modules.typescript;

  function create(info: ts.server.PluginCreateInfo) {
    // Set up decorator
    const proxy: ts.LanguageService = Object.create(null);
    for (let k of Object.keys(info.languageService) as Array<
      keyof ts.LanguageService
    >) {
      const x = info.languageService[k];
      proxy[k] = (...args: Array<{}>) => x.apply(info.languageService, args);
    }
    return proxy;
  }

  return { create };
}

🙁 Actual behavior

I am entering the code sample from https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin and I am getting compile errors while setting up the decorator:

🙂 Expected behavior

I was hoping I could copy/paste the sample and it would work.

NOTE: It's also possible the documentation around this just needs to be clearer. How do you go about starting the plugin? Do you run yo code? Do you run npm init? Do you just create a single file index.js? I am very unclear how to begin development of this plugin.

[msgirlperl]

I don't believe this is purely a doc issue.

I have now created a new Typescript project that I initialized with npm init. I added a typescript dependency and set up my tsc options. It is not building.

Here are a few errors:

[orta]

Looks like the code samples assume strict: false (given that that is the default tsconfig) I think we probably just need to update it to run in strict also

[msgirlperl]

I'm still hitting a bunch of roadblocks as I work through this. I'd be happy to update the documentation if someone wants to be available for me to check in with as I work my way through this. It's a side project at work so I don't have a ton of time to go digging around myself 😬

[orta]

Cool! I've updated the code on the wiki page (and you're welcome to update it too, https://github.com/microsoft/TypeScript-wiki/blob/main/Writing-a-Language-Service-Plugin.md ) to handle strict: true which should remove the compiler errors.

The system is very simple - you give the tsconfig.json a node-style resolution path to the JavaScript file you've made, I thought the 'testing locally' section did a pretty good job covering that but I'm open to improvements

[msgirlperl]

Thanks for such a quick response!

This documentation may be easy to follow if you have some familiarity with this environment but it's all pretty new to me. Questions that came up for me:
How do I get it to "take"? As in, once I add the plugin to my sample project's (or in my case, I'm using an existing project) tsconfig, what makes it kick in? Should I re-start my editor?
I don't think my plugin is loading because nothing is getting written to my log file (I made the directory writable to everyone).
I closed my sample project and went into the plugin instance of vs code and tried to start debugging, and it asked me to choose a debugger. I wasn't sure what to choose, I think I chose vs code extension development but then exited out and just chose start debugging from the Run menu.
Luckily, it opened up another instance of vs code with my sample project in it, but I get this error:

I put breakpoints in my plugin but it says they're unbound. Then I found this and am walking through it now, but am not sure if this is overkilll:
https://github.com/microsoft/TypeScript/wiki/Debugging-Language-Service-in-VS-Code

I've just cloned the repo and built it. Am I on the right path?

[andrewbranch]

Not sure what’s going on with the plugin, but debugging could help you figure it out. Here are some more resources for debugging TS Server:

• https://marketplace.visualstudio.com/items?itemName=andrewbranch.vscode-tsserver-debug
• https://blog.andrewbran.ch/debugging-the-type-script-codebase/#debugging-from-ts-server

[msgirlperl]

Not sure what’s going on with the plugin, but debugging could help you figure it out. Here are some more resources for debugging TS Server:

• https://marketplace.visualstudio.com/items?itemName=andrewbranch.vscode-tsserver-debug
• https://blog.andrewbran.ch/debugging-the-type-script-codebase/#debugging-from-ts-server

Thanks! I'll give these a shot =)

[msgirlperl]

Hey @andrewbranch, I got the logging working, specified the directory to my plugin and it says this:
Info 36 [13:25:36.048] Skipped loading plugin <blah> because only package name is allowed plugin name

(When following the Testing Locally directions).

I am using VS Code, so following the first approach; I don't understand how the alternate suggestion (choosing the typescript version) would load my extension?

[orta]

It sounds like you're hitting the security checks from #42713 - which means you need to have the project which has the tsserver plugin use your plugin via a module name reference ( e.g. "my-plugin": "file:../path/to/plugin" in your example app )- we should definitely document that, and it may be a good cause for making a template repo.

[msgirlperl]

a module name reference ( e.g. "my-plugin": "file:../path/to/plugin"

I'm not sure what you mean here. I ran the npm link stuff and that didn't work and now looking closer at your comment, I'm not sure how to specify this. Do you mean, in the plugins section of the tsconfig of my sample project, I would use this syntax, as opposed to the name field?
"my-plugin": "file:../path/to/plugin"

[orta]

That code sample goes in your package.json and the tsconfig would have "my-plugin"

[orta]

This isn't a full template, I don't have much time this week because of the 4.5 beta, but here is a working TS Server plugin template which has source maps and the debugger set up: https://github.com/orta/TypeScript-TSServer-Plugin-Template

[msgirlperl]

This isn't a full template, I don't have much time this week because of the 4.5 beta, but here is a working TS Server plugin template which has source maps and the debugger set up: https://github.com/orta/TypeScript-TSServer-Plugin-Template

Thanks for doing this and no worries. I'm not sure I have much time either!

[msgirlperl]

Is there a better way to chat about this? Do you guys have a slack channel?
This template repo is helpful.

For the last step, do I need to be running a development version of typescript?
You can then use the launch option to connect your debugger to the running TSServer in the other window

[andrewbranch]

There’s a link to a Discord community and a few other resources here: https://www.typescriptlang.org/community

For the last step, do I need to be running a development version of typescript?

If you want source mapped debugging, yes. If you are ok with debugging the bazillion-line tsserver.js, no.