codemirror linter extensions
npm install @tidbcloud/codemirror-extension-linters3 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
- Full Featured Playground
- Simple Example
``shell`
npm install @tidbcloud/codemirror-extension-linters
You need to install its dependencies as well:
`shell`
npm install @codemirror/view @codemirror/state @codemirror/lint @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser
`ts
import { EditorView } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import { sql, MySQL } from '@codemirror/lang-sql'
import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser'
import {
useDbLinter,
fullWidthCharLinter,
regexMatchLinter
} from '@tidbcloud/codemirror-extension-linters'
const editorView = new EditorView({
state: EditorState.create({
doc,
extensions: [
sql({ dialect: MySQL }),
sqlParser(),
useDbLinter({
level: 'warning',
title: 'the title when error',
message: 'error content'
}),
fullWidthCharLinter({
title: 'the title when error',
message: 'error content'
}),
regexMatchLinter([
{
reg: /\$\{page\}/g,
level: 'warning',
title: 'Code Error',
message: pageTips
},
{
reg: /\$\{page_size\}/g,
level: 'error',
title: 'Code Error',
message:
'page and page_size are built-in paging variables in the system, please replace the name of parameters.'
}
])
]
})
})
`
`ts
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
``