microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.46k stars 3.6k forks source link

Feature request: support JSONSchema with YAML #1470

Open danvk opened 5 years ago

danvk commented 5 years ago

monaco-editor version: 0.17.0 Browser: Chrome OS: macOS

Steps or JS usage snippet reproducing the issue:

There was some discussion of this over at https://github.com/microsoft/monaco-editor/issues/131#issuecomment-491175238 and there is an (unmaintained) monaco-yaml project here: https://github.com/pengx17/monaco-yaml. vscode has this feature via a RedHat YAML plugin.

Code for playground:

// Configures two JSON schemas, with references.

var jsonCode = [
    'p1: "v3"',
    'p2: false',
].join('\n');
var modelUri = monaco.Uri.parse("a://b/foo.yaml"); // a made up unique URI for our model
var model = monaco.editor.createModel(jsonCode, "yaml", modelUri);

// configure the JSON language support with schemas and schema associations
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
    validate: true,
    schemas: [{
        uri: "http://myserver/foo-schema.json", // id of the first schema
        fileMatch: [modelUri.toString()], // associate with our model
        schema: {
            type: "object",
            properties: {
                p1: {
                    enum: ["v1", "v2"]
                },
                p2: {
                    $ref: "http://myserver/bar-schema.json" // reference the second schema
                }
            }
        }
    }, {
        uri: "http://myserver/bar-schema.json", // id of the first schema
        schema: {
            type: "object",
            properties: {
                q1: {
                    enum: ["x1", "x2"]
                }
            }
        }
    }]
});

monaco.editor.create(document.getElementById("container"), {
    model: model
});
FoxxMD commented 2 years ago

Just FYI the most current, maintained version of monaco-yaml is at https://github.com/remcohaszing/monaco-yaml

Would also like to see this feature added

FoxxMD commented 2 years ago

I imagine there hasn't been any work done on this but just checking in. Seems like low hanging fruit since there is a working POC.

Verten commented 6 months ago

is there has any official support validate YAML in monaco editor?

aeschli commented 6 months ago

No sorry, we don't have rich YAML support in Monaco.

remcohaszing commented 6 months ago

What’s wrong with using monaco-yaml?

weeco commented 6 months ago

It seems quite hard to integrate monaco-yaml in React applications (based on my team's experience and issues in the repository). We are stuck with create-react-app and don't want to eject. Without doing so it seems not possible to integrate with monaco-yaml unfortunately.

brookzerom commented 5 months ago

It seems quite hard to integrate monaco-yaml in React applications (based on my team's experience and issues in the repository). We are stuck with create-react-app and don't want to eject. Without doing so it seems not possible to integrate with monaco-yaml unfortunately.

I was able to implement monaco-yaml with a create-react-app by following the steps in their official doc without ejecting. Where exactly are you stuck? Maybe I can help