VS Code extension: SQL tagged template literals
A VS Code extension, which enables syntax highlighting for template literals tagged with an sql
function in JavaScript and TypeScript files.
It works with simple tagged template literals as well as with an sql
function returning a template tag function.
In TypeScript files it also enables SQL syntax checking and type checking for parameters using the typescript-sql-tagged-template-plugin. Type checking requires configuration of the database schema. You can have a look at the plugin documentation for details.
Interesting bits about the grammar
- To debug the grammer, check the language scopes using the -
Developer: Inspect TM Scopes
command. - If
patterns[].name
does not start withstring.js
, the code matched by the pattern (beginning and end) are not highlighted as JavaScript code. - The keys in
beginCaptures
andendCaptures
refer to the capture groups in the corresponding regex, where0
refers to the entire match. By assigning capture groups a name, they can be highlighted accordingly. E.g. usingentity.name.function.ts
makes the string matched by the capture group be highlighted as a function name. - The pattern
source.ts#template-substitution-element
refers to the variables in the template literal, e.g.${userId}
. It should probably be the first pattern in the list to ensure these are highlighted properly. - A pattern cannot span multiple lines. To match something across multiple lines, you have to use nested patterns; good explanation.
- The TypeScript language definition can be useful to lookup and use existing patterns. The
sql()
function syntax in this repository makes use of some of the patterns used in a#function-call
.
Publish new version
(For maintainers)
npm install -g vsce
vsce publish
Thanks
This is based on several great existing extensions:
- https://github.com/mjbvz/vscode-comment-tagged-templates
- https://github.com/ForbesLindesay/vscode-sql-template-literal
- https://github.com/Ladeiras/vscode-sql-template-literal