[html] JSON edit support inside HTML document / script tag with type="application/json"

[bahrus]

There are scenarios where it is useful to embed JSON inside an html document, such as for the amp-bind element:

<amp-state id="myAnimals">
  <script type="application/json">
    {
      "dog": {
        "imageUrl": "/img/dog.jpg",
        "style": "greenBackground"
      },
      "cat": {
        "imageUrl": "/img/cat.jpg",
        "style": "redBackground"
      }
    }
  </script>
</amp-state>

Providing syntax coloring / error checking would be very beneficial in these cases.

[aeschli]

Requires updates to the html grammar as well as the language server. Currently not planned, unless more users have the same request.

[Buslowicz]

+1 from me :).

[jleclanche]

Requesting that if application/json be added, also recognize application/ld+json as json as well.

[mdrideout]

I want this as well. Very common for editing pages using Google's json-ld structured data format.

[garyballantyne]

+1

[bahrus]

Note that import maps will also make it quite useful to provide json editing support within an html page.

[ccapndave]

+1

[panoply]

Should be easy enough to write a quick grammar injection to support both application/json and application/ld+json and then offer it as an extension. A simple capture like:

(<)(script)\\b(?=[^>]*type=('application/json'|\"application/json\"))(?![^/>]*/>\\s*$)

Would suffice. I'll give it a go.

[panoply]

Here: vscode-json-script-tag

Leverages grammar injection, injects support into the HTML language. I included ld+json support too. Hope it helps.

[bahrus]

Works great, thank you!

[wasi-master]

So what happened to this?

[bahrus]

Microsoft's reluctance to implement this seems to be a reflection of the monocultural community vscode targets (and which it in turn perpetuates). If vscode is interested in expanding the community it targets, and demonstrate a commitment to a broader vision for the web, it might be interested in knowing that the percent of websites using ld+json is quite high. I guess 40% of websites doesn't count for much? The percent of websites using React is much smaller, for example. The percent of sites using AMP and import maps is admittedly small, but both are climbing.

I actually enhanced the nice extension @panoply created, and added support for import maps as well.

In addition, web components often use JSON in the attributes, so I added support for that also. I would amend this issue to include support for JSON attributes, that would be fantastic (especially if support for schemas could be baked in as well).

The nice thing is both of these extensions didn't require a single line of code to be written, and they work in the web-based versions of vscode.

It seems like the ratio between usefulness over the effort required is quite large for this request, especially with @panoply's efforts, so it is disappointing to see it languish for so long.

On the other hand, I do commend vscode for making itself extensible enough that support could be added in this way.

[aeschli]

Definitely thanks to @panoply to provide this with an extension. Maybe this prevented this issue from getting many votes. Right now it's at 13 which very little

To get this started:
The HTML grammar we use for syntax highlighting is maintained at https://github.com/textmate/html.tmbundle. The issue there is textmate/html.tmbundle#103
Maybe start with a PR there?

[panoply]

@aeschli Can we extend this further and potentially bring the JSON Language Service? I assume users would like to hook into $schema fields directly. Might involve some minor refactors to the HTML Language Service itself.

I am free in December and am fairly familiar with the HTML scanner/parser approach you employed in the HTML language service. Coupling this to understand attributed script tags and from here passing contents to the JSON language service to facilitate intellisense capabilities would be a great feature for many (I would assume).