withastro / language-tools

Language tools for Astro
MIT License
242 stars 46 forks source link

💡 RFC: the language tools shouldn't offer JS/TS completions in HTML code #816

Closed PierBover closed 3 months ago

PierBover commented 4 months ago

Background & Motivation

When writing HTML I'm getting all sorts of weird suggestions. Such as:

image

Not sure if this is a bug or a feature... but these JS/TS suggestions should not be happening when writing HTML.

Proposed Solution

Possible solutions

JS/TS suggestions should only occur in JS contexts such as the front matter or dynamic expressions inside {}.

Detailed Design

No response

Help make it happen!

Princesseuh commented 4 months ago

Could you share the file in which this happens?

PierBover commented 4 months ago

I guess it's ok since it's a public blog post.

https://gist.github.com/PierBover/ad23cc9f1134b06a56d13ff1d0aad933

Princesseuh commented 4 months ago

Awesome, thank you! I'll take a look as soon as possible. It might be tough to fix because of how this works internally, but I'll see what I can do.

r-o-l-a-n-d commented 4 months ago

but you're writing in an .astro file? not an .html file. Isn't that just the regular IntelliSense feature to insert astro components (which get automatically linked in the frontmatter, in case you haven't used that component before)?

This feature seems to be broken for me, for example.

PierBover commented 4 months ago

But that intellisense should only trigger after typing <, no?

It's now triggering in actual text.

r-o-l-a-n-d commented 4 months ago

But that intellisense should only trigger after typing <, no?

It's now triggering in actual text.

doesn't this depend on your VS Code settings? I think by default if you type "p" or "div" without "<" it also autosuggests creating a <p> or <div> element. Hierachy wise that's not really different to entering a predefined <component />, so i would also expect "component" to show up as an autosuggestion if i start typing "com".

VSC Docs: Customizing IntelliSense

PierBover commented 4 months ago

doesn't this depend on your VS Code settings? I think by default if you type "p" or "div" without "<" it also autosuggests creating a <p> or <div> element. Hierachy wise that's not really different to entering a predefined <component />, so i would also expect "component" to show up as an autosuggestion if i start typing "com".

VSC Docs: Customizing IntelliSense

It's possible but how come it only started happening a few weeks ago?

And also why does this only happen in .astro files not in .svelte or even .jsx files?

It could very well be something on my end... but I've been using Astro for a couple of years now and AFAIK the only thing that has changed is the Astro tools extension.

Princesseuh commented 3 months ago

I cannot quite seem to be able to reproduce this, looking back, this is either a configuration issue on your end, or the compiler failed to parse correctly a specific part of the file and the editor got confused and treated the text as JavaScript, but as I said, I cannot reproduce.

Do you have a simpler snippet or perhaps a repo I could check out?

github-actions[bot] commented 3 months ago

Hello @PierBover. Please provide a minimal reproduction using a GitHub repository or at least sharing the file where the issue happen. Issues marked with needs repro will be closed if they have no activity within 3 days.

PierBover commented 3 months ago

@Princesseuh I'm not sure how I could send you a repro. The issue is not in the .astro files themselves.

I just crested a new empty Astro project with 4.5.5, VSCode 1.87.2, and v2.8.3 of the tools. I'm not seeing the issue on this project.

It must be something on that other project. If I ever figured it out I will reopen this issue.

Princesseuh commented 3 months ago

Okay, no worries! I'm sorry for the inconvenience, would've loved to investigate and fix this!

PierBover commented 2 months ago

I haven't figured out the origin of the issue yet but I'm still having problems even in new empty Astro projects.

For example if I have a word and write a period . right after it I get these file completions:

image

Which produces a JS import.

This would make sense inside a tag to import a component or maybe right after a < character. But this happens in regular HTML text.

I'm not reopening the issue yet because it's not clear what's causing this. It does seem like it's the Astro dev tools though.