Autosuggesting feature for lit element properties are no longer working

[Kristiqn Tachev]

Hello there guys!

Thank you for the effort making this lit-html plugin!
Due to this plugin before 3 years i made a smooth transition from angular guy to lit-html with web components and i am more than happy!

Just recently i have noticed that few of the most important features for this plugin are now gone since they are not working at all...

Autosuggesting properties for lit element

When i try to hit dot and then ctrl+space VSCode autosuggests possible properties that you can set onto the component even with type checking which was really really awesome feature. Just recently i have noticed that it doesn't work at all but the plugin understands that this is a web component which is confirmed from the next screenshot when i hover over the web-component and hit CTRL

CSS rule no-invalid-css

Now if i don't disable this rule actually i cannot work at all since it just throws an error for my html templates

So i am forced to work without these two features which has a negative impact of the performance unfortunately and i have a few students that i teach lit-html and for a beginner it is pretty hard to understand the concept without autosuggestions...

Let me share some versions

OS: Ubuntu 20.04
VSCode: 1.74.2
Typescript: 3.9.3 tried also with 4.4.3 and 4.9.4 but i could't make it to work

I am not sure when these features stop working and is it due to VSCode update or plugin updated automatically.

I am willing to help to fix these issues if some of you guys guide me onto where to look at. In the meantime i will research the monorepo for more clues.

If anyone has any idea how to fix autosuggestion for properties at least will be really nice!

@runem @andreasbm @justinfagnani

Best Wishes!
Kristiyan Tachev

[Kristiqn Tachev]

I have noticed something strange.

If i edit settings.json on vscode and inside lit-plugin.cssTemplateTags configuration i remove html tag and leave only css it actually work as expected :D

I am not sure why and what else may not work disabling html tag... but for now it is a fresh air to breathe :)

Attaching some video:

lit-plugin-2023-01-06_18.27.21.mp4

I tried with various of different typescript versions and VSCode versions from the last year but none of them worked.

For now the only solution for me is to remove html tag inside global settings in VSCode

Cheers!

[Julian Cataldo]

With the VS Code extension and TS Lit plugin installed. Some features are working (click to class, slot validation…)

Disable the plugin, restart the TS server. Autocompletion for props. are now working:

		"plugins": [
			// {
			// 	"name": "ts-lit-plugin",
			// 	"strict": true,
			// 	"rules": {}
			// }
		]

Result:

To sum up, it's whack-a-mole here, you can't have either auto-completion or validation rules.

---

• TS 4.9.5
• ts-lit-plugin 1.2.1
• VS Code lit-plugin 1.2.4
• VS Code 1.77.3
• Vite 4.2.0

Project created with pnpm create vite with TS and Lit boilerplate options.

[Peter Burns]

We fixed a number of compatibility issues with changes in the TypeScript APIs, please give this another try and let us know if you're still seeing this issue