數棧產品中的代碼編譯器

来源:https://www.cnblogs.com/dtux/archive/2023/11/15/17833165.html
-Advertisement-
Play Games

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：奇銘 前言 目前數棧的多個產品中都支持線上編輯 SQL 來生成對應的任務。比如離線開發產品和實時開發產品。在使用 MonacoEditor 為編輯器的基礎上， ...


我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。

本文作者：奇銘

前言

目前數棧的多個產品中都支持線上編輯 SQL 來生成對應的任務。比如離線開發產品和實時開發產品。在使用 MonacoEditor 為編輯器的基礎上，我們還支持瞭如下幾個重要功能：

  • 多種 SQL 的語法高亮
  • 多種 SQL 的報錯提示（錯誤位置飄紅）
  • 多種 SQL 的自動補全（智能提示）

本文旨在講解上述功能的實現思路，對於技術細節，由於篇幅原因不會闡述的太詳細。

Monaco Languages

Monaco Editor 內置的 languages

Monaco Editor 內置了相當多的 languages，比如 javaScript、CSS、Shell 等。
Monaco Editor 依賴包的 ESM 入口文件為 ./esm/vs/editor/editor.main.ts
file
而在這個文件中，Monaco Editor 引入了所有內置的 Languages。
file
這裡 languages 文件可以分為兩類，一類是../language文件夾下的，支持自動補全和飄紅提示功能；另一類則是../basic-languages文件夾下的，不支持自動補全功能和飄紅提示功能。

使用內置的 Language 功能

以使用 typescript 為例

import { editor } from 'monaco-editor';

const container = document.getElementById('container');

editor.create(container, {
    language: 'typescript'
})

此時我們會發現，我們的編輯器已經有語法高亮的功能了，但是瀏覽器控制台會拋異常，另外也沒有自動補全功能和飄紅提示功能，
file
這其實是因為，Monaco Editor 無法載入到 language 對應的 worker，對應的解決辦法看這裡： Monaco integrate-esm。
這裡我們使用 Using plain webpack的方式，首先將對應的 worker 文件設置為 webpack entry

module.exports = {
    entry: {
        index: path.resolve( __dirname, './src/index.ts'),
        'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
        'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker.js'
    },
}

另外還需要設置 Monaco Editor 的全局環境變數，這主要是為了告訴 Monaco Editor 對應的 worker 文件的路徑

import { editor } from 'monaco-editor';

(window as any).MonacoEnvironment = {
	getWorkerUrl: function (_moduleId, label) {
		switch (label) {
			case 'flink': {
				return './flink.worker.js';
			}
			case 'typescript': {
				return './ts.worker.js'
			}
			default: {
				return './editor.worker.js';
			}
		}
	}
};

const container = document.getElementById('container');

editor.create(container, {
    language: 'typescript'
})

這樣一個具有語法高亮、自動補全、飄紅提示 功能的 typescript 編輯器就設置好了
file

小結分析

首先上文中提到了當我們直接從 Monaco Editor 的入口文件中導入時，會自動的引入所有內置的 Languages，但是實際上這其中絕大都是我們不需要的，而由於其導入方式，很顯然我們不需要的 languages 也無法被 treeShaking。要解決這個問題我們可以選擇從 monaco-editor/esm/vs/editor/editor.api 文件中導入Monaco Editor 核心 API，然後通過 monaco-editor-webpack-plugin 來按需導入所需要的功能。另外這個插件也可以自動處理Monaco Editor 內置的 worker 文件的打包問題，以及自動註入 MonacoEnvironment全局環境變數。

自定義 Language

註冊Language

Monaco Editor 提供了 monaco.languages.register方法，用來自定義 language

/**
 * Register information about a new language.
 */
export function register(language: ILanguageExtensionPoint): void;

export interface ILanguageExtensionPoint {
  id: string;
  extensions?: string[];
  filenames?: string[];
  filenamePatterns?: string[];
  firstLine?: string;
  aliases?: string[];
  mimetypes?: string[];
  configuration?: Uri;
}

第一步，我們需要註冊一個 language， 配置項中 id 對應的就是語言名稱（其他配置項可以暫時不填），這裡自定義的 language 名為 myLang

import { editor, languages } from 'monaco-editor';

languages.register({
    id: "myLang"
});

const container = document.getElementById('container');

editor.create(container, {
    language: 'myLang'
})

此時可以發現，頁面上的編輯器沒有任何其他附加功能，就是普通的文本編輯器。

設置 Language

通過 monaco.languages.setLanguageConfiguration，可以對 language 進行配置

/**
 * Set the editing configuration for a language.
 */
export function setLanguageConfiguration(
  languageId: string,
  configuration: LanguageConfiguration
): IDisposable;

/**
 * The language configuration interface defines the contract between extensions and
 * various editor features, like automatic bracket insertion, automatic indentation etc.
 */
export interface LanguageConfiguration {
    comments?: CommentRule;
    brackets?: CharacterPair[];
    wordPattern?: RegExp;
    indentationRules?: IndentationRule;
    onEnterRules?: OnEnterRule[];
    autoClosingPairs?: IAutoClosingPairConditional[];
    surroundingPairs?: IAutoClosingPair[];
    colorizedBracketPairs?: CharacterPair[];
    autoCloseBefore?: string;
    folding?: FoldingRules;
}

這些配置會影響 Monaco Editor 的一些預設行為，比如設置 autoClosingPairs中有一項為一對圓括弧，那麼當輸入左圓括弧後，會自動補全右圓括弧。

import { languages } from "monaco-editor";
const conf: languages.LanguageConfiguration = {
  comments: {
    lineComment: "--",
    blockComment: ["/*", "*/"],
  },
  brackets: [
    ["(", ")"],
  ],
  autoClosingPairs: [
    { open: "(", close: ")" },
    { open: '"', close: '"' },
    { open: "'", close: "'" },
  ],
  surroundingPairs: [
    { open: "(", close: ")" },
    { open: '"', close: '"' },
    { open: "'", close: "'" },
  ],
};

languages.setLanguageConfiguration('myLang', conf)

高亮功能

Monarch

Moanco Editor 內置了 Monarch，用於實現語法高亮功能，它本質上是一個有限狀態機，我們可以通過JSON的形式來配置其狀態流轉邏輯，並通過monaco.languages.setMonarchTokensProvider API 應用該配置。關於Monarch 的具體用法可以看一下這篇文章 以及 Monarch Document。
配置中最重要的是 tokenizer屬性，意思是分詞器，分詞器會自動對編輯器內部的文本進行分詞處理，每個分詞器都有一個 root state，在 root state 中可以有多條規則，規則內部可以引用其他 state。

下麵是一個簡單的配置示例

import { languages } from "monaco-editor";
export const language: languages.IMonarchLanguage = {
	ignoreCase: true,
	tokenizer: {
		root: [
			{ include: '@comments' }, // 引用下麵的 comments 規則
			{ include: '@whitespace' }, // 引用下麵的 whiteSpace 規則
			{ include: '@strings' },// 引用下麵的 strings 規則
		],
		whitespace: [[/\s+/, 'white']],
		comments: [
			[/--+.*/, 'comment'],
			[/\/\*/, { token: 'comment.quote', next: '@comment' }]
		],
		comment: [
			[/[^*/]+/, 'comment'],
			[/\*\//, { token: 'comment.quote', next: '@pop' }],
			[/./, 'comment']
		],
		strings: [
			[/'/, { token: 'string', next: '@string' }]
		],
		string: [
			[/[^']+/, 'string'],
			[/''/, 'string'],
			[/'/, { token: 'string', next: '@pop' }]
		],
	}
};

languages.setMonarchTokensProvider("myLang", language);

上面的配置中 root 下麵有三條規則分別匹配 註釋（comments）、字元串（strings） 以及空白字元（whiteSpace）， 每條規則可以大體分為兩部分：

  • 匹配方式，比如說正則
  • 對應的 token 類型（任意字元串）

比如上述配置中 tokenizer.comments 規則

  comments: [
    [/--+.*/, 'comment'], // 左邊是正則表達式用來匹配文本，右邊是該規則對應的 token 名稱
    [/\/\*/, { token: 'comment.quote', next: '@comment' }] // 左邊是正則表達式用來匹配文本，右邊顯示聲明對應的 token 名稱
  ],

配置瞭如上 Monarch 之後，在編輯器內部輸入註釋或者字元串，那麼Monaco editor 就會根據輸入的內容進行分詞處理
file

可以看到目前字元串和註釋已經被高亮了。這裡有一個新的問題，不同類型的分詞的顏色是怎麼設置的？

Monaco Theme

從上圖中右側的 Elements 面板中可以看到，不同類型的分詞，對應的標簽的 className 不同，它們是由 Monarch 配置中的 token 映射而來的。MonacoEditor 內置了一些 Theme，預設的 Theme 是 vs，而預設的 theme 中已經設置了上述 Monarch 中的 token 對應的顏色，所以我們應用上述配置後，對應的分詞直接就有了高亮顏色。
我們可以通過 monaco.editor.defineTheme 來定義一種新的 theme，如下例所示：

editor.defineTheme('myTheme', {
    base: 'vs',
    inherit: true,
    rules: [
        { token: 'comment', foreground: 'ff4400' },
        { token: 'string', foreground: '0000ff' }
    ],
    colors: {
    },
});

// xxxx

editor.create(container, {
  language: "myLang",
  theme: "myTheme"
});

這裡將註釋設置為紅色，字元串設置為藍色，顯示效果如下圖所示
file

飄紅提示

飄紅提示的功能就是在代碼錯誤的位置打上標記（一般是紅色波浪線），可以通過 monaco.editor.setModelMarkers API 來實現。比如我們想為 第1行的第1個字元到第2行的第2個字元 之間打上錯誤標記：

const editorIns = editor.create(container, {
  language: "myLang",
  theme: "myTheme",
  value: 
`hello
world`
});

const model = editorIns.getModel();

editor.setModelMarkers(model, 'myLang', [
	{
		startLineNumber: 1,
		startColumn: 1,
		endLineNumber: 2,
		endColumn: 2,
		message: "語法錯誤",
		severity: MarkerSeverity.Error
	}
])

severity 是標記類型，message 是提示信息，效果如下所示。
file
到此為止，實現了飄紅的功能，但是沒有實現在語法錯誤處飄紅的功能，這需要額外的語法解析器支持，會在下文中講到。

自動補全功能

Monaco Editor 提供了 monaco.languages.registerCompletionItemProvider API 來實現自動補全功能

import { editor, languages, MarkerSeverity, Position, CancellationToken, Range  } from "monaco-editor";

languages.registerCompletionItemProvider('myLang', {
	triggerCharacters: ['.', '*'],
	provideCompletionItems(
		model: editor.IReadOnlyModel,
		position: Position,
		context: languages.CompletionContext,
		token: CancellationToken
	){
		const wordInfo = model.getWordUntilPosition(position);
        const wordRange = new Range(
            position.lineNumber,
            wordInfo.startColumn,
            position.lineNumber,
            wordInfo.endColumn
        );
    		return new Promise((resolve) => {
    			resolve({
    				suggestions: [
    					{
    						label: "SELECT",
    						kind: languages.CompletionItemKind.Keyword,
    						insertText: "SELECT",
    						range: wordRange,
    						detail: '關鍵字',
    					},
    					{
    						label: "SET",
    						kind: languages.CompletionItemKind.Keyword,
    						insertText: "SET",
    						range: wordRange,
    						detail: '關鍵字',
    					},
    					{
    						label: "SHOW",
    						kind: languages.CompletionItemKind.Keyword,
    						insertText: "SHOW",
    						range: wordRange,
    						detail: '關鍵字',
    					},
    				]
    			})
    		})
	}
})

registerCompletionItemProvider 接受兩個參數，第一個參數是 languageId 也就是 language 名稱，
第二個參數是一個 CompletionItemProvider，CompletionItemProvider中 triggerCharacters用來配置觸發自動補全的字元有哪些，而 provideCompletionItems則是一個函數，它接收 Monaco Editor 提供的當前的上下文信息，返回自動補全項列表。如上例中返回了三個自動補全項，那麼當我們在編輯器中輸入 S時，就會出現配置的自動補全項候選菜單。
file
通過這個 API 我們可以實現一種語言的關鍵字自動補全，只需要在CompletionItemProvider中返回該語言所有的關鍵字對應的自動補全項即可。
但是registerCompletionItemProvider目前做不到根據語義進行自動補全。
比如用戶寫一段 flinkSQL，當用戶輸入完 CREATE 關鍵字並按下空格後，應該出現的自動補全項應該是只有TABLE、CATALOG、DATABASE、FUNCTION、 VIEW。
再比如當用戶輸入 SELECT * FROM 時，後面應該提示表名而不是其他無關的關鍵字。與上文中的飄紅提示一樣，這些語義信息需要單獨的語法解析器來分析。

小結分析

到此為止，在**自定義 language **這一節中，我們已經瞭解了，在 Monaco Editor 中如何實現自定義語言的 語法高亮、錯誤處飄紅提示、自動補全。
在數棧產品中，本節講到的功能都通過引入 monaco-sql-languages 依賴來實現，這是我們數棧 UED 團隊自研的開源項目，目前已經支持多種 SQL Languages。
由於目前為止沒有實現自定義 language 的語義分析功能，導致目前實現的編輯器不夠智能。 另外，對於第一節中提到的 web worker ，在第二節中也沒有有提到，實際上 Monaco Editor 自帶的 web worker，也都是為了實現 language 的語義分析功能，下一節將闡述這一部分內容。

SQL Parser

要實現語義分析功能，很顯然我們需要一個語法解析器。除了基本的語法解析的基礎功能以外，我們還需要

  • 語法錯誤收集，收集編輯器中文本的語法錯誤信息，用於錯誤飄紅提示功能。
  • 推斷文本中指定位置的候選項列表，對於編輯器來說，指定位置一般就是游標所在位置。候選項是指在游標所在的位置應該要寫什麼。比如 SQL 中 SELECT 關鍵字後面可以跟欄位或者函數，那麼我們所要實現的 sql parser 就應該提示出在 SELECT 關鍵字後面的候選項應該是欄位或者函數。

實現基礎的 SQL Parser

Antlr4 語法文件

我們使用 Antlr4 來實現一個基本的 SQL Parser。Antlr4 是一個強大的解析器生成器，它能根據用戶自定義的語法文件來生成對應的解析器。Antlr4 的語法文件為 .g4文件，內部可以包含多條規則，規則可以分為詞法規則和語法規則，詞法規則用於生成詞法分析器，語法規則用於生成語法解析器。
例，我們現在寫一份語法規則，匹配最簡單的 SELECT 語句（不包括子查詢、別名等規則），比如

SELECT * FROM table1;  -- eg1

SELECT table2.name, age FROM schema2.table2; -- eg2

那麼在antlr4中這份語法文件應該這樣寫：

grammar SelectStatement;

/** 語法規則 begin */
program: selectStatement? EOF;

// 聲明 語句的匹配規則
selectStatement: KW_SELECT columnGroup KW_FROM tablePath SEMICOLON?;

// 聲明 語句中欄位部分的匹配規則，欄位部分可能為 col1, col2 的形式
columnGroup: columnPath (COMMA columnPath)*;

// 聲明 欄位名匹配規則，欄位名有可能為 db.table.col 或者 * 的形式
columnPath: dot_id | OP_STAR; 

// 聲明 表名匹配規則，表名有可能為 db.table 的形式
tablePath: dot_id; 

// 匹配 id.id 形式的標識符號
dot_id: IDENTIFIER_LITERAL (DOT IDENTIFIER_LITERAL)*; 
/** 語法規則 end */ 


/** 詞法規則 begin */
KW_SELECT:          'SELECT'; // 匹配 SELECT 關鍵字
KW_FROM:            'FROM'; // 匹配 FROM 關鍵字
OP_STAR:            '*'; // 匹配 * 
DOT:                '.'; // 匹配 .
COMMA:              ','; // 匹配 ,
SEMICOLON:          ';'; // 匹配 ;
IDENTIFIER_LITERAL: [A-Z_a-z][A-Z_0-9a-z]*; // 匹配標識符

WS:                 [ \t\n\r]+ -> skip ; // 忽略空格換行等空白字元
/** 詞法規則 end */

語法規則的編寫格式類似於 EBNF。
然後運行 antlr4 命令，根據所寫的語法文件生成對應的解析器。可以直接使用官方文檔中提供的方式 antlr4 typescript-target doc ，或者直接使用社區提供的 antlr4ts 包，這裡以使用 antlr4ts 為例。
生成的文件結果如下所示：
file

使用 Antlr4 生成的 Parser

在使用Antlr4 的生成的 Parser 之前我們需要安裝，Antlr4 的運行時包。你可以將 Antlr4 的運行時包與通過語法文件生成的parser文件之間的關係，類比為 react 和 react-dom之間的關係。這裡以使用 antlr4ts 為運行時

import { CommonTokenStream, CharStreams } from 'antlr4ts';
import { SelectStatementLexer } from '../lib/selectStatement/SelectStatementLexer';
import { SelectStatementParser } from '../lib/selectStatement/SelectStatementParser';

class SelectParser {
  private createLexer(input: string) {
    const inputStream = CharStreams.fromString(input);
    const lexer = new SelectStatementLexer(inputStream);
    return lexer
  }

  private createParser (input: string) {
    const lexer = this.createLexer(input);
    const tokens = new CommonTokenStream(lexer);
    const parser = new SelectStatementParser(tokens);
    return parser
  }

  parse (sql: string) {
    const parser = this.createParser(sql)
    const parseTree = parser.selectStatement();
    return parseTree;
  }
}
// 試一下效果
const selectParser = new SelectParser();
const parseTree = selectParser.parse('SELECT * FROM table1');

獲取文本中的錯誤信息

當解析一個含有錯誤的文本時，Antlr4 會輸出錯誤信息，例如輸入

selectParser.parse('SELECT id FRO');

控制台列印
file
可以看到錯誤信息中包含了文本中的錯誤所處的位置，我們可以通過使用 Antlr4 ParserErrorListener 來獲取錯誤信息。

聲明一個 ParserErrorListener

import { ParserErrorListener } from 'antlr4ts';

export class SelectErrorListener implements ParserErrorListener {
    private _parserErrorSet: Set<any> = new Set();

    syntaxError(_rec,_ofSym, line, charPosInLine,msg) {
        let endCol = charPosInLine + 1;
        this._parserErrorSet.add({
            startLine: line,
            endLine: line,
            startCol: charPosInLine,
            endCol: endCol,
            message: msg,
        })
    }

    clear () {
        this._parserErrorSet.clear();
    }

    get parserErrors () {
        return Array.from(this._parserErrorSet) 
    }
}

使用 ParserErrorListener 收集錯誤信息

import { CommonTokenStream, CharStreams } from 'antlr4ts';
import { SelectStatementLexer } from '../lib/selectStatement/SelectStatementLexer';
import { SelectStatementParser } from '../lib/selectStatement/SelectStatementParser';


class SelectParser {
    private _errorListener = new SelectErrorListener();

    createLexer(input: string) {
        const inputStream = CharStreams.fromString(input);
        const lexer = new SelectStatementLexer(inputStream);
        this._errorListener.clear();
        lexer.removeErrorListeners(); // 移除 Antlr4 內置的 ErrorListener
        lexer.addErrorListener(this._errorListener)
        return lexer
    }

    createParser (input: string) {
        const lexer = this.createLexer(input);
        const tokens = new CommonTokenStream(lexer);
        const parser = new SelectStatementParser(tokens);
        parser.removeErrorListeners(); // 移除 Antlr4 內置的 ErrorListener
        parser.addErrorListener(this._errorListener);
        return parser
    }

    parse (sql: string) {
        const parser = this.createParser(sql)
        const parseTree = parser.selectStatement();
        console.log(this._errorListener.parserErrors);
        return {
          parseTree,
          errors: this._errorListener.parserErrors,
        };
    }
}
// 試一下效果
const selectParser = new SelectParser();
const { errors } = selectParser.parse('SELECT id FRO');
console.log(errors);

列印結果
file
這樣我們就獲取到了文本中的語法錯誤出現的位置，以及錯誤信息。
到此為止上文中遺留的第一個問題就已經差不多解決了，我們只需要在合適的時機將編輯器的內容進行解析，拿到錯誤信息並且通過 editor.setModelMarkers這個 API 讓錯誤的位置飄紅就大功告成了。

自動補全功能

對於自動補全功能，Antlr4 並沒有直接提供，但是社區已經有了比較優秀的解決方案 - antlr-c3 。它的作用是根據Antlr4 Parser 的解析結果，分析指定位置填哪些詞法/語法規則是合法的。
antlr4-c3 的使用方式比較簡單。

import { CodeCompletionCore } from "antlr4-c3";

// 這裡 parser 是 parser 實例
let core = new CodeCompletionCore(parser); 
// tokenIndex 是想要自動補全的位置，對應由編輯器的游標位置轉換而來
// parserContext 則是解析完之後的返回的 ParserTree 或者 ParserTree 的子節點（傳入子節點可以更高效）
let candidates = core.collectCandidates(tokenIndex, parserContext);

那麼結合上文中寫的 SelectParser，代碼應該是這樣

import { CodeCompletionCore } from "antlr4-c3";
import { SelectParser } from "./selectParser";

/**
 * input 源文本
 * caretPosition 編輯器游標位置
 */
function getSuggestions(input: string, caretPosition) {
    const selectParser = new SelectParser();
    const parserIns = selectParser.createParser(input)
    let core = new CodeCompletionCore(parserIns);

    const parserContext = parserIns.selectStatement();
    // 偽代碼
    const tokenIndex = caretPosition2TokenIndex(caretPosition)

    let candidates = core.collectCandidates(tokenIndex, parserContext);
}

core.collectCandidates 的返回值的數據類型如下

interface CandidatesCollection {
    tokens: Map<number, TokenList>;
    rules: Map<number, CandidateRule>;
}

tokens 對應的是詞法規則提示，比如關鍵字等，rules 對應的是語法規則，比如上述語法文件中的 columnPath和 tablePath等。
需要註意的是，antlr4-c3 預設不收集語法規則，需要我們手動設置需要收集的語法規則

import { SelectStatementParser } from '../lib/selectStatement/SelectStatementParser';


let core = new CodeCompletionCore(parserIns);

core.preferredRules= new Set([
    SelectStatementParser.RULE_tablePath,
    SelectStatementParser.RULE_columnPath
])
// 設置需要收集 tablePath 和 columnPath

這樣我們就收集到了在指定位置的可以填什麼。接下來我們需要將結果進行轉換成我們需要的數據結果

import { CodeCompletionCore } from "antlr4-c3";
import { SelectParser } from "./selectParser";
import { SelectStatementParser } from '../lib/selectStatement/SelectStatementParser';

/**
 * input 源文本
 * caretPosition 編輯器游標位置
 */
export function getSuggestions(input: string, caretPosition?: any) {
    const selectParser = new SelectParser();
    const parserIns = selectParser.createParser(input)
    let core = new CodeCompletionCore(parserIns);

    core.preferredRules= new Set([
        SelectStatementParser.RULE_tablePath,
        SelectStatementParser.RULE_columnPath
    ])

    const parserContext = parserIns.selectStatement();
    const tokenIndex = caretPosition2TokenIndex(caretPosition);

    let candidates = core.collectCandidates(tokenIndex, parserContext);

    const rule = [];
    const keywords = []

    for (let candidate of candidates.rules) {
        const [ruleType] = candidate;
        let syntaxContextType;
        switch (ruleType) {
            case SelectStatementParser.RULE_tablePath: {
                syntaxContextType = 'table';
                break;
            }
            case SelectStatementParser.RULE_columnPath: {
                syntaxContextType = 'column';
                break;
            }
            default:
                break;
        }
        if (syntaxContextType) {
            rule.push(syntaxContextType)
        }
    }

    for (let candidate of candidates.tokens) {
        const symbolicName = parserIns.vocabulary.getSymbolicName(candidate[0]);
        const displayName = parserIns.vocabulary.getDisplayName(candidate[0]);
        if(symbolicName && symbolicName.startsWith('KW_')) {
            const keyword = displayName.startsWith("'") && displayName.endsWith("'")
                ? displayName.slice(1, -1)
                : displayName
            keywords.push(keyword);
        }
    }

    console.log('===== suggest keywords: ',keywords);
    console.log('===== suggest rules:', rule);
}

這樣我們就拿到了要提示的關鍵字和語法規則。關鍵字可以直接用於生成自動補全項，語法規則可以用於提示表名、欄位名等。

小結分析

在這一節中，我們已經瞭解了，如何使用 Antlr4 和 antlr4-c3 來實現更加智能的飄紅提示以及自動補全功能。
這一部分功能，在 monaco-sql-languages 中通過引入數棧前端團隊自研的開源項目 dt-sql-parser 實現。
前文中提到的 worker 文件也正是用於運行 sql parser，因為dt-sql-parser 的解析可能會比較耗時，為了避免用項用戶交互，將 sql parser 放到 web worker 中運行顯然是更明智的選擇。

總結

總的來說

  • 多種 SQL 的語法高亮
  • 多種 SQL 的報錯提示（錯誤位置飄紅）
  • 多種 SQL 的自動補全（智能提示）

三個功能大部分都可以通過 MonacoEditor 內置的 API 來實現，只是關鍵的語法解析功能需要使用 Antlr4 實現。整體上來說大部分的工作在編寫 Antlr4 的語法文件以及方案整合上面。

Github 鏈接

最後

歡迎關註【袋鼠雲數棧UED團隊】~
袋鼠雲數棧UED團隊持續為廣大開發者分享技術成果，相繼參與開源了歡迎star


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 實例講解資料庫的定義重載函數
    在本文中，我們將介紹GaussDB資料庫中的用戶定義函數重載的概念、用法以及示例。用戶定義函數是 SQL 中常用的“編程工具”，允許我們自定義函數來處理和操作數據。 ...
  • 圖形化探索：快速改造單實例為雙主、MGR、讀寫分離等架
    單機GreatSQL/MySQL調整架構為多副本複製的好處有哪些？為什麼要調整？ 性能優化：如果單個GreatSQL伺服器的處理能力達到瓶頸，可能需要通過主從複製、雙主複製或MGR，以及其他高可用方案等來提高整體性能。通過將讀請求分發到多個伺服器，可以大大提高併發處理能力。 高可用性：如果您的應用程 ...
  • JS判斷點是否線上段上
    本文利用向量的點積和叉積來判斷點是否線上段上。 基礎知識補充 從零開始的高中數學——向量、向量的點積、帶你一次搞懂點積（內積）、叉積（外積）、Unity游戲開發——向量運算（點乘和叉乘 說明 點積可以用來判斷兩個向量的夾角，如果這個夾角是0或者180度，說明這個點在直線上； 叉積可以用來判斷一個點到 ...
  • 記錄--產品：請給我實現一個在web端截屏的功能！
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、故事的開始 最近產品又開始整活了，本來是毫無壓力的一周，可以小摸一下魚的，但是突然有一天跟我說要做一個在網頁端截屏的功能。 作為一個工作多年的前端，早已學會了儘可能避開麻煩的需求，只做增刪改查就行！ 我立馬開始了我的反駁，我的理由是市 ...
  • 飛碼LowCode前端技術系列：如何便捷快速驗證實現投產及飛碼探索
    本篇文章從數據中心，事件中心如何協議工作、不依賴環境對vue2.x、vue3.x都可以支持、投產頁面問題定位三個方面進行分析。 ...
  • 用強數據類型保護你的表單數據-基於antd表單的類型約束
    介面數據類型與表單提交數據類型，在大多數情況下，大部分屬性的類型是相同的，但很少能做到完全統一。我在之前的工作中經常為了方便，直接將介面數據類型復用為表單內數據類型，在遇到屬性類型不一致的情況時會使用any強制忽略類型錯誤。後來經過自省與思考，這種工作模式會引起各種隱藏bug，一定有更好的工程解決方... ...
  • Vue openAi
    1、提示 由於國內註冊 https://api.openai.com 比較麻煩，直接購買的第三方介面和key 淘寶購買，幾塊錢1個月 3、自己娛樂夠用 2、前端框架 Vant 移動端使用 axios 3、創建攔截器，api/request.js /* * @Descripttion: 文件說明 * ...
  • 深入跨域 - 從初識到入門
    跨域這兩個字就像一塊狗皮膏藥一樣黏在每一個前端開發者身上，無論你在工作上或者面試中無可避免會遇到這個問題。如果在網上搜索跨域問題，會出現許許多多方案，這些方案有好有壞，但是對於闡述跨域的原理和在什麼情況下需要用什麼方案，缺少系統性的說明。大家在工作中可能因為大佬們已經配置好了，不會產生跨域，但是作為... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類