VS code shows problems in Antlers templates

[Kuldas]

Hey guys,

Probably my "problem" is not directly related to Peak, but I discovered it after installing it with statamic new my-site studio1902/statamic-peak. After installing statamic with Peak, I open a project in VS Code. When I open for example ~/resources /views/components/_dark_mode_toggle.antlers.html I get the following errors in the Problems tab (first image). It shows similar problems in other Antlers templates (second image)

Everything works on the site and devtools does not report any problems or errors. So it only appears in VS Code.
Can you please kick me in the right direction on how to set VS code not to show these issues for Antlers templates?

I only use these extensions in VS Code:

• Tailwind CSS IntelliSense
• Antlers Toolbox

Even though I banned them both, nothing has changed.

I apologize in advance for what may be a bit of a beginner's question.

[robdekort]

Hey Kuldas. No worries!

Are you using a recent version of Peak? I'm asking cuz I renamed _dark_mode_toggle.antlers.html to _theme_toggle.antlers.html a while back.

Anyways I see the same issues with the picture and theme toggle partials although everything works fine and dandy. Do you have any thoughts on this @JohnathonKoster?

[Kuldas]

Hey @robdekort

I use version 4.21 (2022-06-14). I see both files in the components folder - _dark_mode_toggle.antlers.html and _theme_toggle.antlers.html

Here is the list of files where VS Code shows me problems:

• resources/views/components/
  • _dark_mode_toggle.antlers.html
  • _picture.antlers.html
  • _social_image.antlers.html
  • _theme_toggle.antlers.html
• resource/views/snippets
  • _background_image.antlers.html
  • _seo.antlers.html

[robdekort]

I think I had a version at one point where I left _dark_mode.antlers.html in by mistake. You can safely delete it.

[JohnathonKoster]

Hey there!

This is an interesting one. The most common reason I see something like this happen is that a different language is active for the current document. I'd check the lower right corner to see if it is indeed set to HTML (Statamic Antlers):

The errors reported in the original screenshots are coming from the built-in JavaScript language server. I wonder if its in JavaScript-only mode?

[robdekort]

Hey John :-). Thanks for your swift reply. It seems it was already Antlers for me. When I explicitly change it I don't see any changes. To be honest though: I have all these panels off by default so I never noticed these problems until @Kuldas mentioned them here :-).

[JohnathonKoster]

Interesting! I cannot replicate having the JavaScript errors show up for me :/

I wonder if I'm overlooking something that is different on my end

[robdekort]

For now I don't think theres anything I can do to prevent these errors. Personally I wouldn't bother too much.

[robdekort]

Hey @Kuldas. I spoke to John and this was his reaction:

The issue is the Antlers outside of strings/etc. inside the JavaScript section which blows up that language server. 

Not much he can do about it. Sorry for the news. But you can safely ignore the warnings since the site won't blow. It's just the language server that doesn't understand Antlers in JS.

[robdekort]

Hope you agree with me marking this as answered (at least for now).

[sjclark]

Another "solution" would be to put the javascript in an external file - problems occurring as you're trying to correctly parse javascript syntax in a file thats not setup for javascript syntax parsing. OR just ignore all the erorrs, thats what professionals do 😂