SQL languages for the Monaco Editor, based on monaco-languages.
npm install @salvoravida/monaco-sql-languages[npm-image]: https://img.shields.io/npm/v/monaco-sql-languages.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/monaco-sql-languages
[download-img]: https://img.shields.io/npm/dm/monaco-sql-languages.svg?style=flat
[download-url]: https://www.npmjs.com/package/monaco-sql-languages
This is a SQL Languages project for Monaco Editor forked it from monaco-languages. The differences are we integrated with
many kinds of SQL Languages for BigData domain, like FLinkSQL, SParkSQL, HiveSQL, and so on. We provided the basic SQL syntax validation feature by dt-sql-parser, and we are going to provide Autocomplete feature in future.
Online Preview:
- Generic SQL (MySQL)
- FLinkSQL
- SparkSQL
- HiveSQL
- PGSQL
- PLSQL
``bash`
npm install monaco-sql-languages
or
`bash
yarn add monaco-sql-languages
`
Add language worker in the Webpack entry field:
`javascript`
entry: {
'sparksql.worker': 'monaco-sql-languages/out/esm/sparksql/sparksql.worker.js',
'flinksql.worker': 'monaco-sql-languages/out/esm/flinksql/flinksql.worker.js'),
'hivesql.worker': 'monaco-sql-languages/out/esm/hivesql/hivesql.worker.js'),
'mysql.worker': 'monaco-sql-languages/out/esm/mysql/mysql.worker.js'),
'plsql.worker': 'monaco-sql-languages/out/esm/plsql/plsql.worker.js'),
'sql.worker': 'monaco-sql-languages/out/esm/sql/sql.worker.js')
},
Define the MonacoEnvironment for worker file:
`javascript`
window.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
switch (label) {
case 'sparksql': {
return './sparksql.worker.js';
}
case 'flinksql': {
return './flinksql.worker.js';
}
case 'hivesql': {
return './hivesql.worker.js';
}
case 'mysql': {
return './mysql.worker.js';
}
case 'plsql': {
return './plsql.worker.js';
}
case 'sql': {
return './sql.worker.js';
}
default: {
return './editor.worker.js';
}
}
}
};
Import the language contribution before creating the editor by monaco-editor:
`javascript`
import 'monaco-sql-languages/out/esm/flinksql/flinksql.contribution';
import 'monaco-sql-languages/out/esm/hivesql/hivesql.contribution';
import 'monaco-sql-languages/out/esm/sparksql/sparksql.contribution';
import 'monaco-sql-languages/out/esm/mysql/mysql.contribution';
import 'monaco-sql-languages/out/esm/plsql/plsql.contribution';
import 'monaco-sql-languages/out/esm/pgsql/pgsql.contribution';
import 'monaco-sql-languages/out/esm/sql/sql.contribution';
Then, set the language value you need when creating the moanco-editor instance:
`
monaco.editor.create(document.getElementById("container"), {
value: "select * from tb_test",
language: "sql" // you need
});
`
> Tips: you can change the editor model language by monaco.editor.setModelLanguage(model, language)
Reference from here.
- initial setup with npm install .npm run dev
- open the dev web with npm run watch
- compile with npm run test
- test with npm run prepublishOnly
- bundle with
- create $/src/myLang/myLang.contribution.ts$/src/myLang/myLang.ts
- create $/src/myLang/myLang.test.ts
- create $/src/monaco.contribution.ts
- edit and register your new language
`js``
import './myLang/myLang.contribution';
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.