- A+
所属分类：Web前端
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。
本文作者：修能
这是一段平平无奇的 SQL 语法
SELECT id, sum(name) FROM student GROUP BY id ORDER BY id; 如果把这段代码放到 monaco-editor(@0.49.0) 中，一切也显得非常普通。
monaco.editor.create(ref.current!, { value: 'SELECT id, sum(name) FROM student GROUP BY id ORDER BY id;', language: "SparkSQL", }); 效果如下：
接下来我们通过 monaco-editor 提供的一些 Language Services 来针对 SparkSQL 的语言进行优化。
本文旨在提供相关思路以及 Demo，不可将相关代码用于生产环境
高亮
const regex1 = /.../; const regex2 = /.../; const regex3 = /.../; const regex4 = /.../; // Register a new language monaco.languages.register({ id: "SparkSQL" }); // Register a tokens provider for the language monaco.languages.setMonarchTokensProvider("SparkSQL", { tokenizer: { root: [ [regex1, "keyword"], [regex2, "comment"], [regex3, "function"], [regex4, "string"], ], }, }); // Define a new theme that contains only rules that match this language monaco.editor.defineTheme("myCoolTheme", { base: "vs", inherit: false, rules: [ { token: "keyword", foreground: "#0000ff" }, { token: "function", foreground: "#795e26" }, { token: "comment", foreground: "#008000" }, { token: "string", foreground: "#a31515" }, ], colors: { "editor.foreground": "#001080", }, }); 不知道各位有没有疑惑，为什么 monaco-editor 的高亮和 VSCode 的高亮不太一样？
为什么使用 Monarch 而不是 textmate 的原因？
折叠
通过 registerFoldingRangeProvider可以自定义实现一些折叠代码块的逻辑
monaco.languages.registerFoldingRangeProvider("SparkSQL", { provideFoldingRanges: function (model) { const ranges: monaco.languages.FoldingRange[] = []; for (let i = 0; i < model.getLineCount(); ) { const lineContent = model.getLineContent(i + 1); const isValidLine = (content: string) => content && !content.trim().startsWith("--"); // 整段折叠 if (isValidLine(lineContent) && !isValidLine(model.getLineContent(i))) { const start = i + 1; let end = start; while (end < model.getLineCount() && model.getLineContent(end + 1)) { end++; } if (end <= model.getLineCount()) { ranges.push({ start: start, end: end, kind: monaco.languages.FoldingRangeKind.Region, }); } } i++; } return ranges; }, }); PS：如果不设置的话，monaco-editor 会根据缩紧注册默认的折叠块逻辑
补全
通过 registerCompletionItemProvider可以实现自定义补全代码
monaco.languages.registerCompletionItemProvider("SparkSQL", { triggerCharacters: ["."], provideCompletionItems: function (model, position) { const word = model.getWordUntilPosition(position); const range: monaco.IRange = { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: word.startColumn, endColumn: word.endColumn, }; const offset = model.getOffsetAt(position); const prevIdentifier = model.getWordAtPosition( model.getPositionAt(offset - 1) ); if (prevIdentifier?.word) { const regex = createRegExp( exactly("CREATE TABLE ") .and(exactly(`${prevIdentifier.word} `)) .and(exactly("(")) .and(oneOrMore(char).groupedAs("columns")) .and(exactly(")")) ); const match = model.getValue().match(regex); if (match && match.groups.columns) { const columns = match.groups.columns; return { suggestions: columns.split(",").map((item) => { const [columnName, columnType] = item.trim().split(" "); return { label: `${columnName.trim()}(${columnType.trim()})`, kind: monaco.languages.CompletionItemKind.Field, documentation: `${columnName.trim()} ${columnType.trim()}`, insertText: columnName.trim(), range: range, }; }), }; } } return { suggestions: createDependencyProposals(range), }; }, }); 悬浮提示
通过 registerHoverProvider实现悬浮后提示相关信息
import * as monaco from "monaco-editor"; monaco.languages.registerHoverProvider("SparkSQL", { provideHover: function (model, position) { const word = model.getWordAtPosition(position); if (!word) return null; const fullText = model.getValue(); const offset = fullText.indexOf(`CREATE TABLE ${word.word}`); if (offset !== -1) { const lineNumber = model.getPositionAt(offset); const lineContent = model.getLineContent(lineNumber.lineNumber); return { range: new monaco.Range( position.lineNumber, word.startColumn, position.lineNumber, word.endColumn ), contents: [ { value: lineContent, }, ], }; } }, }); 内嵌提示
通过 registerInlayHintsProvider可以实现插入提示代码
monaco.languages.registerInlayHintsProvider("SparkSQL", { provideInlayHints(model, range) { const hints: monaco.languages.InlayHint[] = []; for (let i = range.startLineNumber; i <= range.endLineNumber; i++) { const lineContent = model.getLineContent(i); if (lineContent.includes("sum")) { hints.push({ label: "expr: ", position: { lineNumber: i, column: lineContent.indexOf("sum") + 5, }, kind: monaco.languages.InlayHintKind.Parameter, }); } } return { hints: hints, dispose: function () {}, }; }, }); 跳转定义/引用
跳转定义/引用是一对相辅相成的 API。如果实现了跳转定义而不实现跳转引用，会让用户感到困惑。
这里我们分别registerDefinitionProvider和 registerReferenceProvider两个 API 实现跳转定义和跳转引用。
monaco.languages.registerDefinitionProvider("SparkSQL", { provideDefinition: function (model, position) { const lineContent = model.getLineContent(position.lineNumber); if (lineContent.startsWith("--")) return null; const word = model.getWordAtPosition(position); const fullText = model.getValue(); const offset = fullText.indexOf(`CREATE TABLE ${word?.word}`); if (offset !== -1) { const pos = model.getPositionAt(offset + 13); return { uri: model.uri, range: new monaco.Range( pos.lineNumber, pos.column, pos.lineNumber, pos.column + word!.word.length ), }; } }, }); monaco.languages.registerReferenceProvider("SparkSQL", { provideReferences: function (model, position) { const lineContent = model.getLineContent(position.lineNumber); if (!lineContent.startsWith("CREATE TABLE")) return null; const word = model.getWordAtPosition(position); if (word?.word) { const regex = createRegExp( exactly("SELECT").and(oneOrMore(char)).and(`FROM student`), ["g"] ); const fullText = model.getValue(); const array1: monaco.languages.Location[] = []; while (regex.exec(fullText) !== null) { console.log("regex:", regex.lastIndex); const pos = model.getPositionAt(regex.lastIndex); array1.push({ uri: model.uri, range: new monaco.Range( pos.lineNumber, model.getLineMinColumn(pos.lineNumber), pos.lineNumber, model.getLineMaxColumn(pos.lineNumber) ), }); } if (array1.length) return array1; } return null; }, }); CodeAction
可以基于 CodeAction 实现如快速修复等功能。
monaco.languages.registerCodeActionProvider("SparkSQL", { provideCodeActions: function (model, range, context) { const actions: monaco.languages.CodeAction[] = []; const diagnostics = context.markers; diagnostics.forEach((marker) => { if (marker.code === "no-function") { actions.push({ title: "Correct function", diagnostics: [marker], kind: "quickfix", edit: { edits: [ { resource: model.uri, textEdit: { range: marker, text: "sum", }, versionId: model.getVersionId(), }, ], }, isPreferred: true, }); } }); return { actions: actions, dispose: function () {}, }; }, }); PS：需要配合 Markers 一起才能显示其效果
instance.onDidChangeModelContent(() => { setModelMarkers(instance.getModel()); }); 超链接
众所周知，在 monaco-editor 中，如果一段文本能匹配 http(s?):的话，会自动加上超链接的标识。而通过 registerLinkProvider这个 API，我们可以自定义一些文案进行超链接的跳跃。
monaco.languages.registerLinkProvider("SparkSQL", { provideLinks: function (model) { const links: monaco.languages.ILink[] = []; const lines = model.getLinesContent(); lines.forEach((line, lineIndex) => { const idx = line.toLowerCase().indexOf("sum"); if (line.startsWith("--") && idx !== -1) { links.push({ range: new monaco.Range( lineIndex + 1, idx + 1, lineIndex + 1, idx + 4 ), url: "https://spark.apache.org/docs/latest/api/sql/#sum", }); } }); return { links: links, }; }, }); 格式化
通过registerDocumentFormattingEditProviderAPI 可以实现文档格式化的功能。
import * as monaco from "monaco-editor"; monaco.languages.registerDocumentFormattingEditProvider("SparkSQL", { provideDocumentFormattingEdits: function (model) { const edits: monaco.languages.TextEdit[] = []; const lines = model.getLinesContent(); lines.forEach((line, lineNumber) => { const trimmedLine = line.trim(); if (trimmedLine.length > 0) { const range = new monaco.Range( lineNumber + 1, 1, lineNumber + 1, line.length + 1 ); edits.push({ range: range, text: trimmedLine, }); } }); return edits; }, }); 其他
除了上述提到的这些 Language Services 的功能以外，还有很多其他的语言服务功能可以实现。这里只是抛砖引玉来提到一些 API，还有一些 API 可以关注 monaco-editor 的官方文档 API。
最后
欢迎关注【袋鼠云数栈UED团队】~
袋鼠云数栈 UED 团队持续为广大开发者分享技术成果，相继参与开源了欢迎 star
