1

My current project has some last struggled with regards to type detection. And since there is no plugin that fits my needs i'm thinking about creating one. I know visual studio code plugins can do a lot of interesting things. I'm using javascript to render HTML code, such a snippet looks like this:

class TestComponent extends ComponentBase
{
 /** @type { SomePropertyType } */ someProperty;

 render(){
  return html`
    <my-component .complex-attribute="${this.someProperty}"></my-component>
`;
 }
}

class MyComponent extends ComponentBase
{
 /** @type { ComplexType } */ complexAttribute;
}

now i want to write a VSCode plugin that forces the IDE to:

  • detect that the complex-attribute is of type "ComplexType"
  • that you can click on complex-attribute to be navigated to the line where the property is defined
  • that, if the type you pass to the attribute is not any and not "ComplexType" i will get a compiler error
  • that if the type is any, it will be implicitly converted into "ComplexType"

is this possible? and if yes how can i even get started doing that?

again to clarify: this is not about javascript type checking. this is about parsing a string you prompt using javascript and adding specific types to parts of it.

Kyoshiro Kokujou Obscuritas
  • 83
  • 2
  • 16
  • VSCode already supports typechecking features in JavaScript files using JSDoc syntax. Make sure the features you want are enabled. – Nick McCurdy Sep 16 '22 at 08:25
  • but it is not supporting advances types for attributes. the point is it needs to recognize that the attribute i prompt using javascript has a specific type, and this is no where to be handled because this is nothing but a regular string to javascript. – Kyoshiro Kokujou Obscuritas Sep 16 '22 at 08:32
  • if the plugin does not exist already, you might as well start with a tutorial on how to write such plugins. – qwr Sep 16 '22 at 08:37
  • consider writing a pull request for the existing JavaScript language extension – rioV8 Sep 16 '22 at 09:47
  • and this is what i'm looking for. the normal plugin tutorial gives me an overview about how to create a plugin, but what i'm trying to do is very special, and i don't even know where to start. like: how do i even intervene with the vscode type detection? do i need to write a new javascript langauge support? do i need to write a grammar? how do i parse documents the user gives me? how do i even access documents the user give me. – Kyoshiro Kokujou Obscuritas Sep 16 '22 at 10:19
  • also @rioV8 this is not really javascript language support, this is not a case which is publicly supported by javascript. the framework i'm using to render webcomponents with javascript is LitHTML, but if they don't intend to fix the bug themselves, or even look into it, or reply in any way, then i doubt they will consider my PR... and even if i wanted to make a PR there, i also wouldn't know where to even start. i looked at their code and i understood literally nothing, i could ifnd nothing that's actually parsing text or matching attributes and giving type safety – Kyoshiro Kokujou Obscuritas Sep 16 '22 at 10:20
  • they need to build an AST (Abstract Syntax Tree), maybe in the language Server part of the extension, what you want to do you need the AST also (parsing the source code), and you need to supply a DefinitionProvider in your extension to support the F12 functionality. Or if your code has a very strict layout you might do with regex search and a simple state machine of the source files and only implement the DefinitionProvider (no language server needed), but you quickly want to use a parser library/module to specify a grammar and "callbacks" – rioV8 Sep 16 '22 at 13:45
  • you want a `Goto Definition` (F12) for literal text inside a template string, not the expression parts `${....}` – rioV8 Sep 16 '22 at 13:48
  • yes, for the goto definition part that's correct :) okay so now i can at least see if i find some tutorials about abstract syntax trees and how to add a definition provider... if you can link some useful articles or readable examples on how to do something simliar like that, i would really appreciate that. because it's a complex topic and what i read in code (e.g. lit-analyzer) is really cryptic – Kyoshiro Kokujou Obscuritas Sep 16 '22 at 14:24
  • Have you tried the `lit-html` extension? https://marketplace.visualstudio.com/items?itemName=bierner.lit-html – Nick McCurdy Sep 16 '22 at 14:24
  • well at least i'm pointing in that general direction, but it's lacking the features i'm describing. lit-html adds syntax highlighting for XML code and the attributes get primitive types like Object, Array, number, string and boolean. but i want to add complex types like string[] or actual data models and not just "object". and, what's very important, i want to finally implement event type detection. because a.t.m. if you give e => {...} the e implicitly has type any. and i finally want to turn on noImplicitAny – Kyoshiro Kokujou Obscuritas Sep 19 '22 at 07:37

0 Answers0