Monaco Editor 实现基于 JSON Schema 的智能提示
·
1 min read
最近使用monaco-editor来实现JSON数据编辑器，为了提升用户体验，需要实现JSON Schema的智能提示。研究后发现了实现方法，因此这里Mark下。
实现
使用monaco-editor的语言服务，实现JSON Schema的智能提示。
设置JSON Schema
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: [
{
uri: "http://myschema/abi-schema.json",
fileMatch: [model.uri.toString()],
schema: {
type: "array",
items: {
type: "object",
required: ["type"],
properties: {
name: {
type: "string",
summary: "函数或事件名称"
},
type: {
type: "string",
enum: ["function", "event", "constructor"],
summary: "类型：function(函数)、event(事件)、constructor(构造函数)"
},
inputs: {
type: "array",
summary: "输入参数",
items: {
type: "object",
properties: {
name: {
type: "string",
summary: "参数名称"
},
type: {
type: "string",
summary: "参数类型"
}
}
}
}
}
}
}
}
]
})
配置editor进行suggest
options={{
minimap: { enabled: false },
lineNumbers: true,
quickSuggestions: true, // 自动补全
autoIndent: true,
automaticLayout: true,
validate: true,
folding: true,
hover: {
enabled: true,
},
suggest: {
insertMode: "insert",
showInlineDetails: true,
showDetails: true,
preview: true,
previewMode: 'prefix',
maxVisibleSuggestions: 12,
},
}}
注意
- 如果仅仅只是为了特定的编辑器实现提示，那么需要fileMatch进行限制，否则会引发其它编辑器下针对JSON的提示。
效果
写在最后
通过上述方法即了解了如何在monaco-editor中实现JSON数据固定类型的代码提示。
