前言

目前數(shù)棧的多個產(chǎn)品中都支持在線編輯 SQL 來生成對應(yīng)的任務(wù)。比如離線開發(fā)產(chǎn)品和實(shí)時開發(fā)產(chǎn)品。在使用 MonacoEditor 為編輯器的基礎(chǔ)上，我們還支持了如下幾個重要功能：

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

本文旨在講解上述功能的實(shí)現(xiàn)思路，對于技術(shù)細(xì)節(jié)，由于篇幅原因不會闡述的太詳細(xì)。

Monaco Languages

Monaco Editor 內(nèi)置的 languages

Monaco Editor 內(nèi)置了相當(dāng)多的 languages，比如 javaScript、CSS、Shell 等。<br />Monaco Editor 依賴包的 ESM 入口文件為 ./esm/vs/editor/editor.main.ts<br />

file

file

使用內(nèi)置的 Language 功能

以使用 typescript 為例

import { editor } from 'monaco-editor';

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

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

此時我們會發(fā)現(xiàn)，我們的編輯器已經(jīng)有語法高亮的功能了，但是瀏覽器控制臺會拋異常，另外也沒有自動補(bǔ)全功能和飄紅提示功能，<br />

file

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'
    },
}

另外還需要設(shè)置 Monaco Editor 的全局環(huán)境變量，這主要是為了告訴 Monaco Editor 對應(yīng)的 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'
})

這樣一個具有語法高亮、自動補(bǔ)全、飄紅提示 功能的 typescript 編輯器就設(shè)置好了<br />

file

小結(jié)分析

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

自定義 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 對應(yīng)的就是語言名稱（其他配置項可以暫時不填），這里自定義的 language 名為 myLang

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

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

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

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

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

設(shè)置 Language

通過 monaco.languages.setLanguageConfiguration，可以對 language 進(jìn)行配置

/**
 * 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 的一些默認(rèn)行為，比如設(shè)置 autoClosingPairs中有一項為一對圓括號，那么當(dāng)輸入左圓括號后，會自動補(bǔ)全右圓括號。

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 內(nèi)置了 Monarch，用于實(shí)現(xiàn)語法高亮功能，它本質(zhì)上是一個有限狀態(tài)機(jī)，我們可以通過JSON的形式來配置其狀態(tài)流轉(zhuǎn)邏輯，并通過monaco.languages.setMonarchTokensProvider API 應(yīng)用該配置。關(guān)于Monarch 的具體用法可以看一下這篇文章 以及 Monarch Document。<br />配置中最重要的是 tokenizer屬性，意思是分詞器，分詞器會自動對編輯器內(nèi)部的文本進(jìn)行分詞處理，每個分詞器都有一個 root state，在 root state 中可以有多條規(guī)則，規(guī)則內(nèi)部可以引用其他 state。

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

import { languages } from "monaco-editor";
export const language: languages.IMonarchLanguage = {
    ignoreCase: true,
    tokenizer: {
        root: [
            { include: '@comments' }, // 引用下面的 comments 規(guī)則
            { include: '@whitespace' }, // 引用下面的 whiteSpace 規(guī)則
            { include: '@strings' },// 引用下面的 strings 規(guī)則
        ],
        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 下面有三條規(guī)則分別匹配 注釋（comments）、字符串（strings） 以及空白字符（whiteSpace）， 每條規(guī)則可以大體分為兩部分：

• 匹配方式，比如說正則
• 對應(yīng)的 token 類型（任意字符串）

比如上述配置中 tokenizer.comments 規(guī)則

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

file

可以看到目前字符串和注釋已經(jīng)被高亮了。這里有一個新的問題，不同類型的分詞的顏色是怎么設(shè)置的？

Monaco Theme

從上圖中右側(cè)的 Elements 面板中可以看到，不同類型的分詞，對應(yīng)的標(biāo)簽的 className 不同，它們是由 Monarch 配置中的 token 映射而來的。MonacoEditor 內(nèi)置了一些 Theme，默認(rèn)的 Theme 是 vs，而默認(rèn)的 theme 中已經(jīng)設(shè)置了上述 Monarch 中的 token 對應(yīng)的顏色，所以我們應(yīng)用上述配置后，對應(yīng)的分詞直接就有了高亮顏色。<br />我們可以通過 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

飄紅提示

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

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 是標(biāo)記類型，message 是提示信息，效果如下所示。<br />

file

自動補(bǔ)全功能

Monaco Editor 提供了 monaco.languages.registerCompletionItemProvider API 來實(shí)現(xiàn)自動補(bǔ)全功能

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: '關(guān)鍵字',
                        },
                        {
                            label: "SET",
                            kind: languages.CompletionItemKind.Keyword,
                            insertText: "SET",
                            range: wordRange,
                            detail: '關(guān)鍵字',
                        },
                        {
                            label: "SHOW",
                            kind: languages.CompletionItemKind.Keyword,
                            insertText: "SHOW",
                            range: wordRange,
                            detail: '關(guān)鍵字',
                        },
                    ]
                })
            })
    }
})

registerCompletionItemProvider 接受兩個參數(shù)，第一個參數(shù)是 languageId 也就是 language 名稱，<br />第二個參數(shù)是一個 CompletionItemProvider，CompletionItemProvider中 triggerCharacters用來配置觸發(fā)自動補(bǔ)全的字符有哪些，而 provideCompletionItems則是一個函數(shù)，它接收 Monaco Editor 提供的當(dāng)前的上下文信息，返回自動補(bǔ)全項列表。如上例中返回了三個自動補(bǔ)全項，那么當(dāng)我們在編輯器中輸入 S時，就會出現(xiàn)配置的自動補(bǔ)全項候選菜單。<br />

file

小結(jié)分析

到此為止，在**自定義 language **這一節(jié)中，我們已經(jīng)了解了，在 Monaco Editor 中如何實(shí)現(xiàn)自定義語言的 語法高亮、錯誤處飄紅提示、自動補(bǔ)全。<br />在數(shù)棧產(chǎn)品中，本節(jié)講到的功能都通過引入 monaco-sql-languages 依賴來實(shí)現(xiàn)，這是我們數(shù)棧 UED 團(tuán)隊自研的開源項目，目前已經(jīng)支持多種 SQL Languages。<br />由于目前為止沒有實(shí)現(xiàn)自定義 language 的語義分析功能，導(dǎo)致目前實(shí)現(xiàn)的編輯器不夠智能。 另外，對于第一節(jié)中提到的 web worker ，在第二節(jié)中也沒有有提到，實(shí)際上 Monaco Editor 自帶的 web worker，也都是為了實(shí)現(xiàn) language 的語義分析功能，下一節(jié)將闡述這一部分內(nèi)容。

SQL Parser

要實(shí)現(xiàn)語義分析功能，很顯然我們需要一個語法解析器。除了基本的語法解析的基礎(chǔ)功能以外，我們還需要

• 語法錯誤收集，收集編輯器中文本的語法錯誤信息，用于錯誤飄紅提示功能。
• 推斷文本中指定位置的候選項列表，對于編輯器來說，指定位置一般就是光標(biāo)所在位置。候選項是指在光標(biāo)所在的位置應(yīng)該要寫什么。比如 SQL 中 SELECT 關(guān)鍵字后面可以跟字段或者函數(shù)，那么我們所要實(shí)現(xiàn)的 sql parser 就應(yīng)該提示出在 SELECT 關(guān)鍵字后面的候選項應(yīng)該是字段或者函數(shù)。

實(shí)現(xiàn)基礎(chǔ)的 SQL Parser

Antlr4 語法文件

我們使用 Antlr4 來實(shí)現(xiàn)一個基本的 SQL Parser。Antlr4 是一個強(qiáng)大的解析器生成器，它能根據(jù)用戶自定義的語法文件來生成對應(yīng)的解析器。Antlr4 的語法文件為 .g4文件，內(nèi)部可以包含多條規(guī)則，規(guī)則可以分為詞法規(guī)則和語法規(guī)則，詞法規(guī)則用于生成詞法分析器，語法規(guī)則用于生成語法解析器。<br />例，我們現(xiàn)在寫一份語法規(guī)則，匹配最簡單的 SELECT 語句（不包括子查詢、別名等規(guī)則），比如

SELECT * FROM table1;  -- eg1

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

那么在antlr4中這份語法文件應(yīng)該這樣寫：

grammar SelectStatement;

/** 語法規(guī)則 begin */
program: selectStatement? EOF;

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

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

// 聲明 字段名匹配規(guī)則，字段名有可能為 db.table.col 或者 * 的形式
columnPath: dot_id | OP_STAR; 

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

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


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

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

語法規(guī)則的編寫格式類似于 EBNF。<br />然后運(yùn)行 antlr4 命令，根據(jù)所寫的語法文件生成對應(yīng)的解析器?？梢灾苯邮褂霉俜轿臋n中提供的方式 antlr4 typescript-target doc ，或者直接使用社區(qū)提供的 antlr4ts 包，這里以使用 antlr4ts 為例。<br />生成的文件結(jié)果如下所示：<br />

file

使用 Antlr4 生成的 Parser

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

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');

獲取文本中的錯誤信息

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

selectParser.parse('SELECT id FRO');

file

<br />可以看到錯誤信息中包含了文本中的錯誤所處的位置，我們可以通過使用 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 內(nèi)置的 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 內(nèi)置的 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);

打印結(jié)果<br />

file

自動補(bǔ)全功能

對于自動補(bǔ)全功能，Antlr4 并沒有直接提供，但是社區(qū)已經(jīng)有了比較優(yōu)秀的解決方案 - antlr-c3 。它的作用是根據(jù)Antlr4 Parser 的解析結(jié)果，分析指定位置填哪些詞法/語法規(guī)則是合法的。<br />antlr4-c3 的使用方式比較簡單。

import { CodeCompletionCore } from "antlr4-c3";

// 這里 parser 是 parser 實(shí)例
let core = new CodeCompletionCore(parser); 
// tokenIndex 是想要自動補(bǔ)全的位置，對應(yīng)由編輯器的光標(biāo)位置轉(zhuǎn)換而來
// parserContext 則是解析完之后的返回的 ParserTree 或者 ParserTree 的子節(jié)點(diǎn)（傳入子節(jié)點(diǎn)可以更高效）
let candidates = core.collectCandidates(tokenIndex, parserContext);

那么結(jié)合上文中寫的 SelectParser，代碼應(yīng)該是這樣

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

/**
 * input 源文本
 * caretPosition 編輯器光標(biāo)位置
 */
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 的返回值的數(shù)據(jù)類型如下

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

tokens 對應(yīng)的是詞法規(guī)則提示，比如關(guān)鍵字等，rules 對應(yīng)的是語法規(guī)則，比如上述語法文件中的 columnPath和 tablePath等。<br />需要注意的是，antlr4-c3 默認(rèn)不收集語法規(guī)則，需要我們手動設(shè)置需要收集的語法規(guī)則

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


let core = new CodeCompletionCore(parserIns);

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

這樣我們就收集到了在指定位置的可以填什么。接下來我們需要將結(jié)果進(jìn)行轉(zhuǎn)換成我們需要的數(shù)據(jù)結(jié)果

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

/**
 * input 源文本
 * caretPosition 編輯器光標(biāo)位置
 */
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);
}

這樣我們就拿到了要提示的關(guān)鍵字和語法規(guī)則。關(guān)鍵字可以直接用于生成自動補(bǔ)全項，語法規(guī)則可以用于提示表名、字段名等。

小結(jié)分析

在這一節(jié)中，我們已經(jīng)了解了，如何使用 Antlr4 和 antlr4-c3 來實(shí)現(xiàn)更加智能的飄紅提示以及自動補(bǔ)全功能。<br />這一部分功能，在 monaco-sql-languages 中通過引入數(shù)棧前端團(tuán)隊自研的開源項目 dt-sql-parser 實(shí)現(xiàn)。<br />前文中提到的 worker 文件也正是用于運(yùn)行 sql parser，因?yàn)閐t-sql-parser 的解析可能會比較耗時，為了避免用項用戶交互，將 sql parser 放到 web worker 中運(yùn)行顯然是更明智的選擇。

總結(jié)

總的來說

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

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

Github 鏈接

• demo 項目
• monaco-sql-languages
• dt-sql-parser
• antlr4
• antlr4-c3