Use sql-hint and sql-lint with Codemirror

v6
1

Hello,

I’m writing my first JS project with Svelte and I use Codemirror for an SQL-Editor.
https://www.npmjs.com/package/svelte-codemirror-editor. I use the library here:

<CodeMirror
        bind:value
        lang={sql({
            dialect: schoolSQL,
            upperCaseKeywords: true,
            schema: myDBSchema,
        })}
        theme={oneDark}
        extensions={[
            basicSetup,
            fixedHeightEditor,
            Prec.highest(
                keymap.of([
                    {
                        key: "Tab",
                        run: acceptCompletion,
                    },
                ])
            ),
        ]}
        styles={{
            "&": {
                width: "100%",
                "text-align": "left",
            },
        }}

I am very happy with the result:
https://main–tiny-blancmange-a5cd5e.netlify.app/

The next feature I want to include is to show errors and hints of the linter in editor or at the left side of the editor. I used that once in an ELM project with Codemirror 5.
I just used this code:

import './node_modules/codemirror/lib/codemirror.js'
import './node_modules/codemirror/addon/lint/lint.js'
import './node_modules/codemirror/addon/hint/show-hint.js'
import './node_modules/codemirror/addon/hint/html-hint.js'
import './node_modules/codemirror/addon/hint/xml-hint.js'
import './node_modules/codemirror/addon/lint/html-lint.js'
......        
lint: true,
hint: true,

These modules also exist for SQL:
https://codemirror.net/5/addon/hint/sql-hint.js

Can you please help me to use hints with Codemirror 6?

2

CodeMirror 5 did not have linting for SQL. The ‘hint’ (autocompletion) should already work if you pass a valid schema to sql().

3

Okay, thank you very much. Is there an easy way to do this with other packages? I know that I have to write a function

    function mySQLLinter(view: EditorView) : readonly Diagnostic[]{
        ...
    }