经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » SQL语言 » 查看文章
monaco-editor 的 Language Services
来源：cnblogs　　作者：袋鼠云数栈前端　　时间：2024/6/13 10:05:39　　对本文有异议

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。

本文作者：修能

这是一段平平无奇的 SQL 语法

  1. SELECT id, sum(name) FROM student GROUP BY id ORDER BY id;

如果把这段代码放到 monaco-editor(@0.49.0) 中，一切也显得非常普通。

  1. monaco.editor.create(ref.current!, {
  2.   value: 'SELECT id, sum(name) FROM student GROUP BY id ORDER BY id;',
  3.   language: "SparkSQL",
  4. });

效果如下：

file

接下来我们通过 monaco-editor 提供的一些 Language Services 来针对 SparkSQL 的语言进行优化。

本文旨在提供相关思路以及 Demo，不可将相关代码用于生产环境

高亮

  1. const regex1 = /.../;
  2. const regex2 = /.../;
  3. const regex3 = /.../;
  4. const regex4 = /.../;
  6. // Register a new language
  7. monaco.languages.register({ id: "SparkSQL" });
  9. // Register a tokens provider for the language
  10. monaco.languages.setMonarchTokensProvider("SparkSQL", {
  11.   tokenizer: {
  12.     root: [
  13.       [regex1, "keyword"],
  14.       [regex2, "comment"],
  15.       [regex3, "function"],
  16.       [regex4, "string"],
  17.     ],
  18.   },
  19. });
  21. // Define a new theme that contains only rules that match this language
  22. monaco.editor.defineTheme("myCoolTheme", {
  23.   base: "vs",
  24.   inherit: false,
  25.   rules: [
  26.     { token: "keyword", foreground: "#0000ff" },
  27.     { token: "function", foreground: "#795e26" },
  28.     { token: "comment", foreground: "#008000" },
  29.     { token: "string", foreground: "#a31515" },
  30.   ],
  31.   colors: {
  32.     "editor.foreground": "#001080",
  33.   },
  34. });

不知道各位有没有疑惑，为什么 monaco-editor 的高亮和 VSCode 的高亮不太一样？
为什么使用 Monarch 而不是 textmate 的原因？

file

折叠

通过 registerFoldingRangeProvider可以自定义实现一些折叠代码块的逻辑

  1. monaco.languages.registerFoldingRangeProvider("SparkSQL", {
  2.   provideFoldingRanges: function (model) {
  3.     const ranges: monaco.languages.FoldingRange[] = [];
  4.     for (let i = 0; i < model.getLineCount(); ) {
  5.       const lineContent = model.getLineContent(i + 1);
  7.       const isValidLine = (content: string) =>
  8.         content && !content.trim().startsWith("--");
  10.       // 整段折叠
  11.       if (isValidLine(lineContent) && !isValidLine(model.getLineContent(i))) {
  12.         const start = i + 1;
  13.         let end = start;
  14.         while (end < model.getLineCount() && model.getLineContent(end + 1)) {
  15.           end++;
  16.         }
  17.         if (end <= model.getLineCount()) {
  18.           ranges.push({
  19.             start: start,
  20.             end: end,
  21.             kind: monaco.languages.FoldingRangeKind.Region,
  22.           });
  23.         }
  24.       }
  26.       i++;
  27.     }
  28.     return ranges;
  29.   },
  30. });

PS：如果不设置的话，monaco-editor 会根据缩紧注册默认的折叠块逻辑

补全

通过 registerCompletionItemProvider可以实现自定义补全代码

  1. monaco.languages.registerCompletionItemProvider("SparkSQL", {
  2.   triggerCharacters: ["."],
  3.   provideCompletionItems: function (model, position) {
  4.     const word = model.getWordUntilPosition(position);
  5.     const range: monaco.IRange = {
  6.       startLineNumber: position.lineNumber,
  7.       endLineNumber: position.lineNumber,
  8.       startColumn: word.startColumn,
  9.       endColumn: word.endColumn,
  10.     };
  12.     const offset = model.getOffsetAt(position);
  13.     const prevIdentifier = model.getWordAtPosition(
  14.       model.getPositionAt(offset - 1)
  15.     );
  16.     if (prevIdentifier?.word) {
  17.       const regex = createRegExp(
  18.         exactly("CREATE TABLE ")
  19.           .and(exactly(`${prevIdentifier.word} `))
  20.           .and(exactly("("))
  21.           .and(oneOrMore(char).groupedAs("columns"))
  22.           .and(exactly(")"))
  23.       );
  24.       const match = model.getValue().match(regex);
  25.       if (match && match.groups.columns) {
  26.         const columns = match.groups.columns;
  27.         return {
  28.           suggestions: columns.split(",").map((item) => {
  29.             const [columnName, columnType] = item.trim().split(" ");
  30.             return {
  31.               label: `${columnName.trim()}(${columnType.trim()})`,
  32.               kind: monaco.languages.CompletionItemKind.Field,
  33.               documentation: `${columnName.trim()} ${columnType.trim()}`,
  34.               insertText: columnName.trim(),
  35.               range: range,
  36.             };
  37.           }),
  38.         };
  39.       }
  40.     }
  42.     return {
  43.       suggestions: createDependencyProposals(range),
  44.     };
  45.   },
  46. });

悬浮提示

通过 registerHoverProvider实现悬浮后提示相关信息

  1. import * as monaco from "monaco-editor";
  3. monaco.languages.registerHoverProvider("SparkSQL", {
  4.   provideHover: function (model, position) {
  5.     const word = model.getWordAtPosition(position);
  6.     if (!word) return null;
  7.     const fullText = model.getValue();
  8.     const offset = fullText.indexOf(`CREATE TABLE ${word.word}`);
  9.     if (offset !== -1) {
  10.       const lineNumber = model.getPositionAt(offset);
  11.       const lineContent = model.getLineContent(lineNumber.lineNumber);
  12.       return {
  13.         range: new monaco.Range(
  14.           position.lineNumber,
  15.           word.startColumn,
  16.           position.lineNumber,
  17.           word.endColumn
  18.         ),
  19.         contents: [
  20.           {
  21.             value: lineContent,
  22.           },
  23.         ],
  24.       };
  25.     }
  26.   },
  27. });

内嵌提示

通过 registerInlayHintsProvider可以实现插入提示代码

  1. monaco.languages.registerInlayHintsProvider("SparkSQL", {
  2.   provideInlayHints(model, range) {
  3.     const hints: monaco.languages.InlayHint[] = [];
  4.     for (let i = range.startLineNumber; i <= range.endLineNumber; i++) {
  5.       const lineContent = model.getLineContent(i);
  6.       if (lineContent.includes("sum")) {
  7.         hints.push({
  8.           label: "expr: ",
  9.           position: {
  10.             lineNumber: i,
  11.             column: lineContent.indexOf("sum") + 5,
  12.           },
  13.           kind: monaco.languages.InlayHintKind.Parameter,
  14.         });
  15.       }
  16.     }
  17.     return {
  18.       hints: hints,
  19.       dispose: function () {},
  20.     };
  21.   },
  22. });

跳转定义/引用

跳转定义/引用是一对相辅相成的 API。如果实现了跳转定义而不实现跳转引用，会让用户感到困惑。
这里我们分别registerDefinitionProvider和 registerReferenceProvider两个 API 实现跳转定义和跳转引用。

  1. monaco.languages.registerDefinitionProvider("SparkSQL", {
  2.   provideDefinition: function (model, position) {
  3.     const lineContent = model.getLineContent(position.lineNumber);
  4.     if (lineContent.startsWith("--")) return null;
  5.     const word = model.getWordAtPosition(position);
  6.     const fullText = model.getValue();
  7.     const offset = fullText.indexOf(`CREATE TABLE ${word?.word}`);
  8.     if (offset !== -1) {
  9.       const pos = model.getPositionAt(offset + 13);
  10.       return {
  11.         uri: model.uri,
  12.         range: new monaco.Range(
  13.           pos.lineNumber,
  14.           pos.column,
  15.           pos.lineNumber,
  16.           pos.column + word!.word.length
  17.         ),
  18.       };
  19.     }
  20.   },
  21. });
  2. monaco.languages.registerReferenceProvider("SparkSQL", {
  3.   provideReferences: function (model, position) {
  4.     const lineContent = model.getLineContent(position.lineNumber);
  5.     if (!lineContent.startsWith("CREATE TABLE")) return null;
  6.     const word = model.getWordAtPosition(position);
  7.     if (word?.word) {
  8.       const regex = createRegExp(
  9.         exactly("SELECT").and(oneOrMore(char)).and(`FROM student`),
  10.         ["g"]
  11.       );
  13.       const fullText = model.getValue();
  14.       const array1: monaco.languages.Location[] = [];
  15.       while (regex.exec(fullText) !== null) {
  16.         console.log("regex:", regex.lastIndex);
  17.         const pos = model.getPositionAt(regex.lastIndex);
  18.         array1.push({
  19.           uri: model.uri,
  20.           range: new monaco.Range(
  21.             pos.lineNumber,
  22.             model.getLineMinColumn(pos.lineNumber),
  23.             pos.lineNumber,
  24.             model.getLineMaxColumn(pos.lineNumber)
  25.           ),
  26.         });
  27.       }
  29.       if (array1.length) return array1;
  30.     }
  32.     return null;
  33.   },
  34. });

CodeAction

可以基于 CodeAction 实现如快速修复等功能。

  1. monaco.languages.registerCodeActionProvider("SparkSQL", {
  2.   provideCodeActions: function (model, range, context) {
  3.     const actions: monaco.languages.CodeAction[] = [];
  4.     const diagnostics = context.markers;
  6.     diagnostics.forEach((marker) => {
  7.       if (marker.code === "no-function") {
  8.         actions.push({
  9.           title: "Correct function",
  10.           diagnostics: [marker],
  11.           kind: "quickfix",
  12.           edit: {
  13.             edits: [
  14.               {
  15.                 resource: model.uri,
  16.                 textEdit: {
  17.                   range: marker,
  18.                   text: "sum",
  19.                 },
  20.                 versionId: model.getVersionId(),
  21.               },
  22.             ],
  23.           },
  24.           isPreferred: true,
  25.         });
  26.       }
  27.     });
  29.     return {
  30.       actions: actions,
  31.       dispose: function () {},
  32.     };
  33.   },
  34. });

PS：需要配合 Markers 一起才能显示其效果

  1. instance.onDidChangeModelContent(() => {
  2.   setModelMarkers(instance.getModel());
  3. });

超链接

众所周知，在 monaco-editor 中，如果一段文本能匹配 http(s?):的话，会自动加上超链接的标识。而通过 registerLinkProvider这个 API，我们可以自定义一些文案进行超链接的跳跃。

  1. monaco.languages.registerLinkProvider("SparkSQL", {
  2.   provideLinks: function (model) {
  3.     const links: monaco.languages.ILink[] = [];
  4.     const lines = model.getLinesContent();
  6.     lines.forEach((line, lineIndex) => {
  7.       const idx = line.toLowerCase().indexOf("sum");
  8.       if (line.startsWith("--") && idx !== -1) {
  9.         links.push({
  10.           range: new monaco.Range(
  11.             lineIndex + 1,
  12.             idx + 1,
  13.             lineIndex + 1,
  14.             idx + 4
  15.           ),
  16.           url: "https://spark.apache.org/docs/latest/api/sql/#sum",
  17.         });
  18.       }
  19.     });
  21.     return {
  22.       links: links,
  23.     };
  24.   },
  25. });

格式化

通过registerDocumentFormattingEditProviderAPI 可以实现文档格式化的功能。

  1. import * as monaco from "monaco-editor";
  3. monaco.languages.registerDocumentFormattingEditProvider("SparkSQL", {
  4.   provideDocumentFormattingEdits: function (model) {
  5.     const edits: monaco.languages.TextEdit[] = [];
  6.     const lines = model.getLinesContent();
  8.     lines.forEach((line, lineNumber) => {
  9.       const trimmedLine = line.trim();
  10.       if (trimmedLine.length > 0) {
  11.         const range = new monaco.Range(
  12.           lineNumber + 1,
  13.           1,
  14.           lineNumber + 1,
  15.           line.length + 1
  16.         );
  17.         edits.push({
  18.           range: range,
  19.           text: trimmedLine,
  20.         });
  21.       }
  22.     });
  24.     return edits;
  25.   },
  26. });

其他

除了上述提到的这些 Language Services 的功能以外，还有很多其他的语言服务功能可以实现。这里只是抛砖引玉来提到一些 API，还有一些 API 可以关注 monaco-editor 的官方文档 API。

最后

欢迎关注【袋鼠云数栈UED团队】~
袋鼠云数栈 UED 团队持续为广大开发者分享技术成果，相继参与开源了欢迎 star

原文链接：https://www.cnblogs.com/dtux/p/18245298

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

SQL语言热门文章

  • 为什么不推荐使用 select * ？是性能问题吗 ？
  • sql查询返回值使用map封装多个key和value实例
  • 掌握把“烂”SQL牢牢关进笼子里的密钥
  • 029.[转] SSO单点登录的通用架构实现
  • 千万级用户系统SQL调优实战分享
  • 图解SQL语句里的各种JOIN查询 瞬间秒懂
  • pgsql查询优化之模糊查询
  • 关系型数据库范式 你了解吗？
  • 神奇的 SQL 之谓词 → 难理解的 EXISTS
  • insert和select结合实现"插入某字段在数据库中的最大值＋1"的方法

    • SQL语言推荐文章

  • EF Core性能优化技巧
  • 【SQL】Lag/Rank/Over窗口函数揭秘，数据分析之旅
  • SQL Thinking
  • 【SQL】晨光咖啡馆，过滤聚合的微妙碰撞
  • SHOW PROCESSLIST 最多能显示多长的 SQL？
  • monaco-editor 的 Language Services
  • OceanBase 金融项目优化案例
  • SQL KEEP 窗口函数等价改写案例
  • DM数据库金融行业案例（水贴一波）
  • MindSpore自定义算子中的张量维度问题

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号