language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard
verified publisher icon vuejs

Deprecated HTML attributes are highlighted in red

Open unrevised6419 opened this issue 1 year ago • 1 comments

Vue - Official extension or vue-tsc version

v2.0.22

VSCode version

v1.90.2

Vue version

v3.4.30

TypeScript version

v5.5.2

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Memory: 244.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.15.0/bin/npm
  Browsers:
    Brave Browser: 126.1.67.119
    Chrome: 126.0.6478.127
    Safari: 17.5

Steps to reproduce

Creating an SFC Vue component, in the template when using any HTML deprecated attributes will be highlighted in red, even if that component has that prop.

Link to minimal reproduction

https://github.com/iamandrewluca/issue-volar-deprecated-highlight/blob/main/src/App.vue

Any additional comments?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align

image

These are all my enabled extensions

image

unrevised6419 avatar Jun 27 '24 08:06 unrevised6419

@iamandrewluca the vscode extension doesn't know yet which attributes are HTML attributes and which ones are valid component props. That's why this is marked as a deprecated tag/prop. This capability could be added in the future.

davidmatter avatar Jul 01 '24 03:07 davidmatter

This issue originates from a syntax definition in VS Code's html.tmLanguage.json file.

Currently, when using Web Components in VS Code, any deprecated attributes are still highlighted as errors.

Image

The Vue SFC syntax behavior is aligned with Web Components, so this issue needs to be addressed upstream in VS Code.

serkodev avatar Dec 04 '25 15:12 serkodev

Probably a partial solution in the upstream would be to highlight those attributes only for lowercase one words elements <img>, <body>, <foo> 🤔 IIRC all html elements are lower case, and there are no multiple words elements.

unrevised6419 avatar Dec 04 '25 15:12 unrevised6419

HTML is ASCII case-insensitive.

KazariEX avatar Dec 04 '25 15:12 KazariEX

Tags contain a tag name, giving the element's name. HTML elements all have names that only use ASCII alphanumerics. In the HTML syntax, tag names, even those for foreign elements, may be written with any mix of lower- and uppercase letters that, when converted to all-lowercase, matches the element's tag name; tag names are case-insensitive. — https://html.spec.whatwg.org/#syntax-tag-name

unrevised6419 avatar Dec 04 '25 15:12 unrevised6419