{"id":28560123,"url":"https://github.com/dtstack/monaco-sql-languages","last_synced_at":"2025-06-10T09:07:36.724Z","repository":{"id":37366219,"uuid":"348267327","full_name":"DTStack/monaco-sql-languages","owner":"DTStack","description":"SQL languages for monaco-editor","archived":false,"fork":false,"pushed_at":"2025-05-16T06:33:33.000Z","size":72855,"stargazers_count":261,"open_issues_count":18,"forks_count":49,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-06-02T12:05:12.462Z","etag":null,"topics":["bigdata","flinksql","hiveql","monaco-editor","sparksq","sql-language","sql-parser"],"latest_commit_sha":null,"homepage":"https://dtstack.github.io/monaco-sql-languages/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DTStack.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-16T08:23:47.000Z","updated_at":"2025-05-29T02:02:59.000Z","dependencies_parsed_at":"2023-02-08T08:46:11.239Z","dependency_job_id":"49181faa-918e-4092-8449-2f71610c4c09","html_url":"https://github.com/DTStack/monaco-sql-languages","commit_stats":{"total_commits":609,"total_committers":94,"mean_commits":"6.4787234042553195","dds":0.722495894909688,"last_synced_commit":"a8f6ea8c23f1c00264694d3347a9312cfb9ebce4"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fmonaco-sql-languages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fmonaco-sql-languages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fmonaco-sql-languages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fmonaco-sql-languages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DTStack","download_url":"https://codeload.github.com/DTStack/monaco-sql-languages/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DTStack%2Fmonaco-sql-languages/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259043771,"owners_count":22797163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bigdata","flinksql","hiveql","monaco-editor","sparksq","sql-language","sql-parser"],"created_at":"2025-06-10T09:07:35.910Z","updated_at":"2025-06-10T09:07:36.711Z","avatar_url":"https://github.com/DTStack.png","language":"TypeScript","readme":"# Monaco SQL Languages\n\n[![NPM version][npm-image]][npm-url] [![NPM downloads][download-img]][download-url]\n\n[npm-image]: https://img.shields.io/npm/v/monaco-sql-languages.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/monaco-sql-languages\n[download-img]: https://img.shields.io/npm/dm/monaco-sql-languages.svg?style=flat\n[download-url]: https://www.npmjs.com/package/monaco-sql-languages\n\n[English](./README.md) | 简体中文\n\nMonaco SQL Languages 是一个基于 Monaco Editor 的 SQL 语言项目，从 [monaco-languages](https://github.com/microsoft/monaco-languages) fork 而来。不同的是，Monaco SQL Languages 支持了各种大数据领域的 SQL 语言以及相应的高级语言功能。\n\n\u003cbr/\u003e\n\n## 功能亮点\n- 代码高亮\n- 语法校验\n- 自动补全\n- 内置SQL代码片段\n\n\u003e 由 [dt-sql-parser](https://github.com/DTStack/dt-sql-parser) 提供语法解析功能。\n\n\u003cbr/\u003e\n\n## 在线预览\n\u003chttps://dtstack.github.io/monaco-sql-languages/\u003e\n\n\u003e 由 [molecule](https://github.com/DTStack/molecule) 提供 IDE UI 支持。\n\n\u003cbr/\u003e\n\n## 已支持的 SQL 语言类型\n\n-   MySQL\n-   Flink\n-   Spark\n-   Hive\n-   Trino (Presto)\n-   PostgreSQL\n-   Impala\n\n\u003cbr/\u003e\n\n## 安装\n\n```bash\nnpm install monaco-sql-languages\n```\n\n\u003e Tips: 目前 Monaco SQL Languages 仅保证在 `monaco-editor@0.31.0` 上稳定运行。\n\n\u003cbr/\u003e\n\n## 集成\n\n- [集成 Monaco SQL Languages 的 ESM 版本](./documents/integrate-esm.zh-CN.md)\n\n\u003cbr/\u003e\n\n## 使用\n\n1. **导入语言的 contribution 文件**\n\n    \u003e Tips: 如果通过 MonacoEditorWebpackPlugin 来集成，插件会帮助我们自动引入相应的 contribution 文件。如果使用其他方式集成，则需要手动引入相应的 contribution 文件。\n\n    ```typescript\n    import 'monaco-sql-languages/esm/languages/mysql/mysql.contribution';\n    import 'monaco-sql-languages/esm/languages/flink/flink.contribution';\n    import 'monaco-sql-languages/esm/languages/spark/spark.contribution';\n    import 'monaco-sql-languages/esm/languages/hive/hive.contribution';\n    import 'monaco-sql-languages/esm/languages/trino/trino.contribution';\n    import 'monaco-sql-languages/esm/languages/pgsql/pgsql.contribution';\n    import 'monaco-sql-languages/esm/languages/impala/impala.contribution';\n\n    // 或者你可以通过下面的方式一次性导入所有的语言功能\n    // import 'monaco-sql-languages/esm/all.contributions';\n    ```\n\n2. **设置语言功能**\n\n    你可以通过 `setupLanguageFeatures` 设置语言功能，比如设置 FlinkSQL 语言的自动补全功能。\n    ```typescript\n    import { LanguageIdEnum, setupLanguageFeatures } from 'monaco-sql-languages';\n\n    setupLanguageFeatures(LanguageIdEnum.FLINK, {\n        completionItems: {\n            enable: true,\n            triggerCharacters: [' ', '.'],\n            completionService: //... ,\n        }\n    });\n    ```\n\n    默认情况下，自动补全功能只提供关键字自动补全与内置SQL代码片段补全, 但你可以通过设置 `completionService` 自定义自动补全项。\n\n    ```typescript\n    import { languages } from 'monaco-editor/esm/vs/editor/editor.api';\n    import {\n        setupLanguageFeatures,\n        LanguageIdEnum,\n        CompletionService,\n        ICompletionItem,\n        EntityContextType\n     } from 'monaco-sql-languages';\n\n    const completionService: CompletionService = function (\n        model,\n        position,\n        completionContext,\n        suggestions, // 语法推荐信息\n        entities, // 当前编辑器文本的语法上下文中出现的表名、字段名等\n        snippets // 代码片段\n    ) {\n        return new Promise((resolve, reject) =\u003e {\n            if (!suggestions) {\n                return Promise.resolve([]);\n            }\n            const { keywords, syntax } = suggestions;\n            const keywordsCompletionItems: ICompletionItem[] = keywords.map((kw) =\u003e ({\n                label: kw,\n                kind: languages.CompletionItemKind.Keyword,\n                detail: 'keyword',\n                sortText: '2' + kw\n            }));\n\n            let syntaxCompletionItems: ICompletionItem[] = [];\n\n            syntax.forEach((item) =\u003e {\n                if (item.syntaxContextType === EntityContextType.DATABASE) {\n                    const databaseCompletions: ICompletionItem[] = []; // some completions about databaseName\n                    syntaxCompletionItems = [...syntaxCompletionItems, ...databaseCompletions];\n                }\n                if (item.syntaxContextType === EntityContextType.TABLE) {\n                    const tableCompletions: ICompletionItem[] = []; // some completions about tableName\n                    syntaxCompletionItems = [...syntaxCompletionItems, ...tableCompletions];\n                }\n            });\n\n            resolve([...syntaxCompletionItems, ...keywordsCompletionItems]);\n        });\n    };\n\n    setupLanguageFeatures(LanguageIdEnum.FLINK, {\n        completionItems: {\n            enable: true,\n            completionService,\n        }\n    });\n    ```\n\n3. **创建 Monaco Editor 并指定语言**\n\n    ```typescript\n    import { LanguageIdEnum } from 'monaco-sql-languages';\n\n    monaco.editor.create(document.getElementById('container'), {\n        value: 'select * from tb_test',\n        language: LanguageIdEnum.FLINK // languageId\n    });\n    ```\n\n\u003cbr/\u003e\n\n## 代码片段\n我们为每种SQL语言内置了一部分代码片段, 帮助我们快速编写SQL。\n\n**如何自定义代码片段?**\n\n在进行设置语言功能时, 通过配置`snippets`实现, 当`snippets`传入空数组时, 则关闭内置代码片段。\n\n```typescript\nimport { snippets, CompletionSnippetOption } from 'monaco-sql-languages/esm/main.js';\n\nconst customSnippets: CompletionSnippetOption[] = [\n    {\n        label: 'INSERT',\n        prefix: 'insert',\n        // Will join the line with `\\n`\n        body: [\n            'INSERT INTO ${1:table_name}',\n            'SELECT ${3:column1}, ${4:column2}',\n            'FROM ${2:source_table}',\n            'WHERE ${5:conditions};\\n$6'\n        ],\n        description: \"This is an 'insert into select' snippet\"\n    }\n];\n\nsetupLanguageFeatures(LanguageIdEnum.MYSQL, {\n    completionItems: {\n        enable: true,\n        snippets: [...snippets.mysqlSnippets, ...customSnippets],\n        completionService\n    },\n    preprocessCode\n});\n```\n代码片段详细语法可以参考[vscode-snippet](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax), 不过与 vscode 代码片段不同的是, 我们仅会在**SQL语句开头**提供 snippets 补全项。\n\n还需要注意的是，如果您提供了自定义的`completionService`方法, 您需要将`snippets`作为补全项手动返回, 以下是一个简单示例:\n\n```typescript\nconst completionService: CompletionService = async function (\n    model,\n    position,\n    completionContext,\n    suggestions,\n    entities,\n    snippets\n) {\n    const { keywords } = suggestions;\n\n    const keywordsCompletionItems: ICompletionItem[] = keywords.map((kw) =\u003e ({\n        label: kw,\n        kind: languages.CompletionItemKind.Keyword,\n        detail: 'keyword',\n        sortText: '2' + kw\n    }));\n\n    const snippetCompletionItems: ICompletionItem[] =\n        snippets?.map((item) =\u003e ({\n            label: item.label || item.prefix,\n            kind: languages.CompletionItemKind.Snippet,\n            filterText: item.prefix,\n            insertText: item.insertText,\n            insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet,\n            sortText: '3' + item.prefix,\n            detail: item.description !== undefined ? item.description : 'SQL Snippet',\n            documentation: item.insertText\n        })) || [];\n\n    return [...keywordsCompletionItems, ...snippetCompletionItems];\n};\n```\n\n**其他注意事项**\n\n当处于代码片段中时, 可以通过`Tab`键移动到下一个输入位置, 但普通的关键字补全功能也是通过`Tab`键接受补全的，这会产生快捷键冲突, 所以 Monaco-Editor 规定, 当处于代码片段上下文时, 不会触发补全功能。\n![snippet-prevent-completion](./documents/images/snippet-prevent-completion.gif)\n如果想要在代码片段中仍能支持智能补全, 可以通过设置 Monaco-Editor 配置项`suggest.snippetsPreventQuickSuggestions`为`false`来实现。\n```typescript\neditor.create(editorElement, {\n    suggest: {\n        snippetsPreventQuickSuggestions: false\n    }\n})\n```\n![snippet-no-prevent-completion](./documents/images/snippet-no-prevent-completion.gif)\n\n## Monaco Theme\n\n\u003e Monaco SQL Languages 计划在未来支持更多的 Monaco Theme.\n\nMonaco SQL Languages 提供了名为 `vsPlusTheme` 的内置主题。 `vsPlusTheme` 灵感来源于 vscode default plus 颜色主题，内部包含三种风格的主题:\n\n-   `darkTheme`: 暗黑色主题，继承自 Monaco 内置主题 `vs-dark`;\n-   `lightTheme`: 亮色主题， 继承自 Monaco 内置主题 `vs`;\n-   `hcBlackTheme`: 黑色高对比度主题，继承自 Monaco 内置主题 `hc-black`;\n\n**使用 Monaco SQL Languages 内置主题 vsPlusTheme**\n\n```typescript\nimport { vsPlusTheme } from 'monaco-sql-languages';\nimport { editor } from 'monaco-editor';\n\n// 导入主题数据并定义主题, 你可以自定义主题名称, 例如 sql-dark\neditor.defineTheme('sql-dark', vsPlusTheme.darkThemeData);\neditor.defineTheme('sql-light', vsPlusTheme.lightThemeData);\neditor.defineTheme('sql-hc', vsPlusTheme.hcBlackThemeData);\n\n// 指定你已定义的主题\neditor.create(null as any, {\n    theme: 'sql-dark',\n    language: 'flinksql'\n});\n```\n\n**自定义主题**\n\n```typescript\nimport { TokenClassConsts, postfixTokenClass } from 'monaco-sql-languages';\n\n// 自定义不同 token 类型的样式\nconst myThemeData: editor.IStandaloneThemeData = {\n    base: 'vs-dark',\n    inherit: true,\n    rules: [\n        { token: postfixTokenClass(TokenClassConsts.COMMENT), foreground: '6a9955' },\n        { token: postfixTokenClass(TokenClassConsts.IDENTIFIER), foreground: '9cdcfe' },\n        { token: postfixTokenClass(TokenClassConsts.KEYWORD), foreground: '569cd6' },\n        { token: postfixTokenClass(TokenClassConsts.NUMBER), foreground: 'b5cea8' },\n        { token: postfixTokenClass(TokenClassConsts.STRING), foreground: 'ce9178' },\n        { token: postfixTokenClass(TokenClassConsts.TYPE), foreground: '4ec9b0' }\n    ],\n    colors: {}\n};\n\n// 定义 Monaco 主题\neditor.defineTheme('my-theme', myThemeData);\n```\n\n\u003e `postfixTokenClass` 在大多数情况下不是必须的，但是由于 Monaco SQL Languages 内部为所有的语言都设置了 `tokenPostfix: 'sql'`。所以在某些情况下，如果不使用 `postfixTokenClass` 处理 `TokenClassConsts.*`，自定义的样式可能不生效。\n\n\u003cbr/\u003e\n\n## 开发者：本地开发\n\n-   初始化设置\n\n    ```bash\n    pnpm install\n    ```\n\n-   本地启动 web demo\n\n    ```bash\n    pnpm watch-esm\n    cd website\n    pnpm install\n    pnpm dev\n    ```\n\n-   构建\n\n    ```bash\n    pnpm build\n    ```\n\n-   单元测试\n    ```\n    pnpm test\n    ```\n\n\u003cbr/\u003e\n\n## 行为守则\n\n本项目采用 [Microsoft 开源行为准则](https://opensource.microsoft.com/codeofconduct/)。有关更多信息，请参阅 [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)，或联系 [opencode@microsoft.com](mailto:opencode@microsoft.com) 提出任何其他问题或意见。\n\n\u003cbr/\u003e\n\n## License\n\n[MIT](https://github.com/Microsoft/monaco-languages/blob/master/LICENSE.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtstack%2Fmonaco-sql-languages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtstack%2Fmonaco-sql-languages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtstack%2Fmonaco-sql-languages/lists"}