Prettier and VSCode failing with @ shorthand syntax for x-on: when using Astro

[ADTC]

I'm using Astro v5 btw.

I wished to use shorthand syntax for x-on: but I can't because VS Code syntax highlighting goes weird, and sometimes Prettier fails to format the file. The code still works on the live site with Alpine.js.

Simple string, Shorthand

❌ VS Code ✅ Prettier ✅ Alpine

Simple string (in or not in JS block), Longhand

✅ VS Code ✅ Prettier ✅ Alpine

Template literal, Shorthand

❌ VS Code ❌ Prettier ✅ Alpine

Template literal, Longhand

❌ VS Code ❌ Prettier ✅ Alpine

Template literal in JS block, Longhand

✅ VS Code ✅ Prettier ✅ Alpine

Note

I don't know if this is a misconfiguration on my end, or it's a general problem with Alpine or Astro. Maybe I just need your help. :)

[ADTC]

Seems like this randomly happens on other attributes as well:

❌ VS Code ❌ Prettier ✅ Alpine

Currently the only sure-fire way to avoid the problem is to always use a JS block: x-attr={ ... }

---

PS: Cool party trick for x-data: Use JSON.stringify to convert an object to string. You get JS/TS benefits & linting this way (strings are just strings), and it's more maintainable than a literal string.

<div x-data={JSON.stringify({ activeTab })}> ... </div>

It lets me do even cooler stuff like this:

<div x-data={JSON.stringify({ [activeTab]: tabs[0] })}> ... </div>

[ADTC]

Following up, that I also can't use something like x-resize.document. The moment I put ., it breaks the syntax highlighting.

[ekwoka]

I don't have these highlighting issues at all.

Are you not using the Astro extension for language support?

[ADTC]

@ekwoka Yes I am using the official extension:

Identifier: astro-build.astro-vscode
Version: 2.15.4
Last Updated: 2025-01-13, 11:04:54

Confirmed. Disabling the extension removes all syntax highlighting in .astro files. Enabling it brings the highlighting back. The issues persist though.

I also have Astro plugins for ESLint and Prettier:

    "eslint": "^9.21.0",
    "eslint-plugin-astro": "^1.3.1",
    "prettier": "^3.5.2",
    "prettier-plugin-astro": "^0.14.1",

[ekwoka]

I'm not using any of those (just have prettier for html files, not astro)

Maybe one of those is causing it? Or your theme doesn't support the tokens it's using for those?

Either way, it's not an Alpine issue.