Not highlighted with TypeScript Generics

[ariesclark]

Not highlighted with TypeScript Generics

[herenickname]

+1

[karlhorky]

Generic type arguments can be implemented (⚠️ if they are on a single line - I'll come back to this in a followup comment) - check out working versions of this feature in the following VS Code extensions:

1. SQL tagged template literals by @frigus02 (repo: https://github.com/frigus02/vscode-sql-tagged-template-literals)
2. Inline SQL by @notyetspecified (repo: https://github.com/notyetspecified/vscode-sql-template-literal)

In the following PR by @KristjanTammekivi, the generic type parameter feature was added to Inline SQL:

• notyetspecified/vscode-sql-template-literal#2

[karlhorky]

The problem with the original example in this current issue by @ariesclark above is that the generic type argument spans multiple lines.

The root cause for this is a bit more of a problem, since TextMate grammars have limitations, as @sheetalkamat is familiar with:

• microsoft/TypeScript-TmLanguage#761 (comment)
• microsoft/TypeScript-TmLanguage#949 (comment)
• microsoft/vscode-textmate#41

VS Code itself somehow gets around the limitations and can do correct syntax highlighting over multiple lines, maybe with Semantic Highlighting by @aeschli and @alexdima.

I also see some changes with regular expressions, which @sheetalkamat has also been maintaining:

• microsoft/TypeScript-TmLanguage@88a7e09

So maybe there is a way for a VS Code extension to also achieve this, by also using this Semantic Highlighting / these regular expressions.

The TextMate grammar limitations have also been explored in the following SQL tagged template literals VS Code extension, but no solution has yet appeared:

• frigus02/vscode-sql-tagged-template-literals#20
• frigus02/vscode-sql-tagged-template-literals#21

[karlhorky]

Workaround (/* sql */ comment)

Add a /* sql */ comment after the multi-line generic

sql<{
  value: number
-}[]>`
+}[]>/* sql */ `
  SELECT 1 value;
`

Credit: @net in thebearingedge/vscode-sql-lit#13 (comment)

[vicary]

This actually breaks coloring for the rest of the documents with generics.

[KristjanTammekivi]

This actually breaks coloring for the rest of the documents with generics.

I can't seem to replicate

Can you give a full example? Here's mine:

const sql = <T>(q): any => {
    return {
        execute: (db) => {}
    }
}

interface F {
    now: string;
}

const db = {};

await sql<F>`SELECT NOW(6) AS 'now'`.execute(db);
const boo = true;

await sql<{ now: string }>`SELECT NOW(6) AS 'now'`.execute(db);
const foo = true;

await sql`SELECT NOW(6) AS 'now'`.execute(db);
const moo = true;


export { };

[vicary]

@KristjanTammekivi testing with your snippet below:

With the extension enabled

With the extension disabled

[KristjanTammekivi]

Ah my bad, I thought this was the same extension as I made a contribution to because I was mentioned here. I'm using this extension:

[vicary]

@KristjanTammekivi nice ad (and i'm sold) =D