Skip to content

Bring parity between HTML and Razor for html-data.json #8634

@megaket4up

Description

@megaket4up

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 with html language mode in VS Code. This enables html-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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions