[BUG] Bracket Pair Colorization with Vue 3 (setup)

[leonardssh]

Does this issue occur when all extensions are disabled?: No

• Version: 1.70.0-insider (user setup)
• Commit: 3cbf306
• Date: 2022-07-25T05:27:52.229Z
• Electron: 18.3.5
• Chromium: 100.0.4896.160
• Node.js: 16.13.2
• V8: 10.0.139.17-electron.0
• OS: Windows_NT x64 10.0.22000

Steps to Reproduce:

1. Be sure editor.bracketPairColorization.enabled is true
2. Install Volar extension to be able to have syntax highlight
3. Create [name].vue file
4. Copy & paste the above code

<script lang="ts" setup>
import { ref } from "vue"

const count = ref(0)
</script>

---

Issue:
> & < shouldn't be red.

Additional information:
I've found the issue, apparently that red arrows highlight appears when lang="ts".

lang="ts"

lang="js"

no lang

[leonardssh]

Related to vuejs/language-tools#1566, doesn't seem like to be an issue with the Volar extension. According to vuejs/language-tools#1566 (comment)

I tested, and it's true, the problem comes from editor.bracketPairColorization.enabled.

[hediet]

Opening bracket:

Closing bracket:

I suggest that the vue language also marks the closing bracket as vue language, not as typescript.

[VSCodeTriageBot]

This issue is caused by an extension, please file it with the repository (or contact) the extension has linked in its overview in VS Code or the marketplace for VS Code. See also our issue reporting guidelines.

Happy Coding!