js tag function syntax highlighting is incorrect

[Cat7373]

Bug description

see: https://github.com/microsoft/vscode/issues/212938

How to reproduce

It is difficult to make a minimal reproducible example, but when using the label function ($queryRaw), most of the time it will cause color errors in some of the following code.

Expected behavior

Correct highlighted code.

Prisma information

5.14.0

Environment & setup

• OS: macOS
• Editor: VS Code
• Editor version: 1.89.1
• Extension version: 5.14.0

[janpio]

Can you paste the code snippet from the screenshot please? Is it possibly missing the closing backtick before the as Array ...?

[Cat7373]

I made a small reproduction case:

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export function usePrisma(): typeof prisma {
  return prisma
}

class Demo {
  async test() {
    // aaa
    const x = '' as unknown as Array<{ a: number, b: number, c: number }>

    // bbb
    const a = await usePrisma().$queryRaw`
      SELECT
        taskId,
        COUNT(*) as \`count\`,
      FROM taskTarget
      WHERE typeId IN ['1', '2', '3']
      GROUP BY taskId
    ` as Array<{ taskId: number, count: number }>

    // ccc
    const y = '' as unknown as Array<{ a: number, b: number, c: number }>

    // ddd
  }
}

[Cat7373]

Well, there is a small error in the sql. () should be used instead of [], but it does not affect the problem itself.

[Cat7373]

It seems that there is no () after queryRaw. Just adding any function call can solve the problem:

[Cat7373]

Comments are also ok

[Cat7373]

You can also directly follow sql:

But in the middle, as can't solve the problem before, but it can solve the problem after as:

[Cat7373]

Another magic fix: add a space:

[Cat7373]

Another syntactically legal situation that will cause SQL highlighting to fail: