search

pranaygp / vscode-css-peek

A vscode extension for peeking at CSS definitions from a class or id tag in HTML
MIT License
145 stars 32 forks source link

Triggering Go-to-def on a variable in a JS file can sometimes trigger an error (i.e. if the preceding symbol is "<") #96

Open hiredtocode opened 3 years ago

hiredtocode commented 3 years ago

Hello,

I came across this issue or should I say a "bug" and made a request to MS VScode repo and found out that it was caused by the CSS peek add-on.

So I was wondering if there's any way to disable CSS-peek in javascript file OR better, make this not happen? Here's my request link: https://github.com/microsoft/vscode/issues/108114

Please let me know if you need more info. Thanks.

mocktarissa commented 3 years ago

I think they added support for JS just because libraries in the library like react or Vue you can embed HTML inside your Javascript so you might need to use the peek function. If you want your initial issue was raised because you were trying to peek a non-CSS element.

PS: if you feel like disabling CSS-PEEK from peeking inside a JS file you can go to the VS code extension settings and remove it manually. (You can always add it when you want 😉).

hiredtocode commented 3 years ago

@mocktarissa Thanks for the reply! But, my question is... why does it get triggered only on that one variable? if this is supposed to get triggered, shouldn't it be on all of other ones too?

pranaygp commented 3 years ago

Thanks for the report @hiredtocode, and for helping him out @mocktarissa

CSS Peek supports JavaScript because of frameworks like React and Vue which have html in js (and it also supports js in html)

I think the reason it only triggered on that variable from the video is because the preceding symbol was "<". There's a very simple html scanner embedded within CSS peek, and it aggressively tries to parse everything as HTML - which works well for most cases but not this example specifically. That's why it's treating the variable after "<" as the start of an html tag.

Definitely a bug and CSS peek should not bring up that panel. Hopefully it wasn't a huge nuisance to you while coding

pranaygp commented 3 years ago

Repro steps: https://youtu.be/irbWUR09_2Y

p.s. great video @hiredtocode. This is one of the best bug reports I've seen 😃

hiredtocode commented 3 years ago

@pranaygp Thank you very much for the clarification and also for the great plugin you've created =)