-
Notifications
You must be signed in to change notification settings - Fork 724
Description
Summary
Bring parity between HTML and Razor for html-data.json
.
Custom HTML tags and attributes defined via html-data.json
currently work in .html
files, but not in .cshtml
(Razor) files. This breaks consistency when using project-specific attributes or components.
Is your feature request related to a problem? Please describe.
Currently, custom HTML attributes and tags defined via html-data.json
work only in .html
files, because they are handled by the built-in html-language-features
extension.
In .cshtml
(Razor) files, these completions and validations are missing, which makes it harder to use custom data-*
attributes or project-specific web components consistently across HTML and Razor views.
Describe the solution you would like
I would like Razor (.cshtml) language support in VS Code to also respect html.customData
contributions (html-data.json
). This would provide IntelliSense for custom tags, attributes, and attribute values inside Razor files in the same way as in .html
files.
Applicable Scenarios
- Using custom
data-*
attributes in Razor components or views. - Adding autocomplete for custom web components in
.cshtml
. - Consistent development experience between
.html
and.cshtml
files.
Describe alternatives you've considered
- Associating
.cshtml
files withhtml
language mode in VS Code. This enableshtml-data.json
but disables Razor syntax and C# IntelliSense. - Creating a custom hybrid language extension that reuses Razor grammar and merges it with HTML data. This works, but it is fragile and duplicates functionality already provided by the Razor extension.
Additional context
Having html-data.json
support in Razor would unify the experience with plain HTML development and allow teams to define their own project-specific HTML metadata (custom tags, attributes, values) once and use it everywhere.
Example of html-data.json
:
{
"version": 1.1,
"tags": [
{
"name": "my-button",
"description": "Custom button component",
"attributes": [
{
"name": "variant",
"values": [
{ "name": "primary" },
{ "name": "secondary" }
]
}
]
}
],
"globalAttributes": [
{
"name": "data-theme",
"description": "Theme selector",
"values": [
{ "name": "light" },
{ "name": "dark" }
]
}
]
}
In .html files, typing <my-button variant="...">
or <div data-theme="...">
shows proper IntelliSense.
In .cshtml files, the same code does not provide any completions or validation.