Skip to Content
DocsSQL Editor ExtensionsExtension - Linters

@tidbcloud/codemirror-extension-linters

3 linter codemirror extensions:

  • useDbLinter: use statement linter, the first statement should be use ${dbName};
  • fullWidthCharLinter: lint all the full width characters
  • regexMatchLinter: configurable by regular expression

Installation

npm install @tidbcloud/codemirror-extension-linters

You need to install its peer dependencies as well:

npm install @codemirror/view @codemirror/state @codemirror/lint @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser

Usage

import { sql, MySQL } from '@codemirror/lang-sql' import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser' import { useDbLinter, fullWidthCharLinter, regexMatchLinter } from '@tidbcloud/codemirror-extension-linters' // add extensions to your editor created by getting started const extensions = [ // ...other extensions, sql({ dialect: MySQL }), sqlParser(), // the SQL content should be start with a USE statement or there is a warning message useDbLinter({ level: 'warning', title: 'the title when error', message: 'error content' }), // full width characters are not allowed fullWidthCharLinter({ title: 'the title when error', message: 'error content' }), // you can customize some reg expressions to verify the content regexMatchLinter([ // when you type ${page} at the editor, there will be error message under it. { reg: /\$\{page\}/g, level: 'warning', title: 'Code Error', message: pageTips }, // when you type ${page_size} at the editor, there will be error message under it. { reg: /\$\{page_size\}/g, level: 'error', title: 'Code Error', message: '<b>page</b> and <b>page_size</b> are built-in paging variables in the system, please replace the name of parameters.' } ]) ]

API

type DBLinterOptions = { level?: 'error' | 'warning' title?: string message?: string /* control to disable the lint when some cases happen in run time */ whenDisable?: (view: EditorView) => boolean } function useDbLinter(config?: DBLinterOptions): Extension interface CharLinterConfig { title?: string message?: string } function fullWidthCharLinter(config?: charLinterConfig): Extension interface RegexpItem { reg: RegExp title: string message: string } function regexMatchLinter(config: RegexpItem[]): Extension

Try it

You can try all the extensions playground at here  & the linters extension at here .


Last updated on