如何按需加载单独的文件？

Question

我正在使用 Monaco 编辑器作为 JSON 编辑器和模式验证。我知道如何在代码中添加自定义模式验证。按照官方文档：https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults

但我想要的是从外部文件加载架构，因此代码如下所示：

const schema = require('../../../samples/spec-schema.json')

<MonacoEditor height='100%' width='100%'
               language='json'
               theme='vs-dark'
               value={this.state.json}
               onChange={newValue => this.setState(s => Entity(s).set('json', _ => newValue).commit())}
               editorWillMount={monaco => {
                            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
                                validate: true, 
                                schemas: [{
                                    uri: '../../../samples/spec-schema.json',
                                    schema: schema
                                }]
                            })
                        }}
                    />

我正在将 React 与 Webpack 一起使用，我认为需要有一种方法可以使用 Webpack 加载模式，然后将其传递给 Monaco 编辑器，但我不知道该怎么做。

Answer 1

我通过启用 enableSchemaRequest: true 并在 GitHub Gist 中在线托管我的 JSON 模式解决了这个问题。只需将 $schema: "https://gist.githubusercontent.com/my-schema.json" 添加到编辑器的顶部，就像您在 VS Code 中所做的那样。

monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
     enableSchemaRequest: true
 })

如何按需加载单独的文件？

How to load separate file on demand?

javascript

reactjs

webpack

monaco-editor