@codemirror/lang-sql

What is @codemirror/lang-sql?

@codemirror/lang-sql is a language support package for CodeMirror 6 that provides syntax highlighting, autocompletion, and other SQL language features. It is designed to help developers integrate SQL editing capabilities into their web applications.

What are @codemirror/lang-sql's main functionalities?

Syntax Highlighting

This feature provides syntax highlighting for SQL code. The code sample demonstrates how to set up a CodeMirror editor with SQL syntax highlighting.

import { sql } from '@codemirror/lang-sql';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: 'SELECT * FROM users;',
  extensions: [basicSetup, sql()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Autocompletion

This feature provides autocompletion for SQL code. The code sample demonstrates how to set up a CodeMirror editor with SQL autocompletion.

import { sql, sqlCompletion } from '@codemirror/lang-sql';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
import { autocompletion } from '@codemirror/autocomplete';

const state = EditorState.create({
  doc: 'SELECT * FROM ',
  extensions: [basicSetup, sql(), autocompletion({ override: [sqlCompletion] })]
});

const view = new EditorView({
  state,
  parent: document.body
});

Error Checking

This feature provides error checking for SQL code. The code sample demonstrates how to set up a CodeMirror editor with SQL error checking.

import { sql, sqlDiagnostics } from '@codemirror/lang-sql';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
import { linter } from '@codemirror/lint';

const state = EditorState.create({
  doc: 'SELECT * FORM users;',
  extensions: [basicSetup, sql(), linter(sqlDiagnostics)]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @codemirror/lang-sql

codemirror-graphql

codemirror-graphql provides GraphQL language support for CodeMirror. It offers similar features like syntax highlighting, autocompletion, and error checking but for GraphQL instead of SQL.

README

@codemirror/lang-sql

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements SQL language support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

API Reference

sql(config⁠?: SQLConfig = {}) → LanguageSupport

SQL language support for the given SQL dialect, with keyword completion, and, if provided, schema-based completion as extra extensions.

interface SQLConfig

Options used to configure an SQL extension.

dialect⁠?: SQLDialect

The dialect to use. Defaults to StandardSQL.

schema⁠?: Object<readonly (string | Completion)[]>

An object that maps table names, optionally prefixed with a schema name ("schema.table") to options (columns) that can be completed for that table. Use lower-case names here.

tables⁠?: readonly Completion[]

By default, the completions for the table names will be generated from the schema object. But if you want to customize them, you can pass an array of completions through this option.

schemas⁠?: readonly Completion[]

Similar to tables, if you want to provide completion objects for your schemas rather than using the generated ones, pass them here.

defaultTable⁠?: string

When given, columns from the named table can be completed directly at the top level.

defaultSchema⁠?: string

When given, tables prefixed with this schema name can be completed directly at the top level.

upperCaseKeywords⁠?: boolean

When set to true, keyword completions will be upper-case.

class SQLDialect

Represents an SQL dialect.

language: LRLanguage

The language for this dialect.

extension: Extension

Returns the language for this dialect as an extension.

static define(spec: {treatBitsAsBytes⁠?: boolean}) → SQLDialect

Define a new dialect.

spec

keywords⁠?: string

A space-separated list of keywords for the dialect.

builtin⁠?: string

A space-separated string of built-in identifiers for the dialect.

types⁠?: string

A space-separated string of type names for the dialect.

backslashEscapes⁠?: boolean

Controls whether regular strings allow backslash escapes.

hashComments⁠?: boolean

Controls whether # creates a line comment.

slashComments⁠?: boolean

Controls whether // creates a line comment.

spaceAfterDashes⁠?: boolean

When enabled -- comments are only recognized when there's a space after the dashes.

doubleDollarQuotedStrings⁠?: boolean

When enabled, things quoted with "$" are treated as strings, rather than identifiers.

doubleQuotedStrings⁠?: boolean

When enabled, things quoted with double quotes are treated as strings, rather than identifiers.

charSetCasts⁠?: boolean

Enables strings like _utf8'str' or N'str'.

operatorChars⁠?: string

The set of characters that make up operators. Defaults to "*+\-%<>!=&|~^/".

specialVar⁠?: string

The set of characters that start a special variable name. Defaults to "?".

identifierQuotes⁠?: string

The characters that can be used to quote identifiers. Defaults to "\"".

unquotedBitLiterals⁠?: boolean

Controls whether bit values can be defined as 0b1010. Defaults to false.

StandardSQL: SQLDialect

The standard SQL dialect.

PostgreSQL: SQLDialect

Dialect for PostgreSQL.

MySQL: SQLDialect

MySQL dialect.

MariaSQL: SQLDialect

Variant of MySQL for MariaDB.

MSSQL: SQLDialect

SQL dialect for Microsoft SQL Server.

SQLite: SQLDialect

SQLite dialect.

Cassandra: SQLDialect

Dialect for Cassandra's SQL-ish query language.

PLSQL: SQLDialect

PL/SQL dialect.

keywordCompletionSource(dialect: SQLDialect, upperCase⁠?: boolean = false) → CompletionSource

Returns a completion source that provides keyword completion for the given SQL dialect.

schemaCompletionSource(config: SQLConfig) → CompletionSource

Returns a completion sources that provides schema-based completion for the given configuration.

Changelog

6.4.1 (2023-04-13)

Bug fixes

Fix a bug where tokenizing of block comments got confused when nested comment start/end markers appeared directly next to each other.