Vue official extension for Vue 3 does not do syntax highligting

[vusal5555]

Vue - Official extension or vue-tsc version

2.0.21

VSCode version

1.90.0

Vue version

3.4.0

TypeScript version

x

System Info

No response

Steps to reproduce

The extension has several bugs. It fails to highlight both braces and curly braces properly, and it sometimes gives misleading signals by incorrectly marking some components in red.

open vs code and you will see it sometimes fails to highlight some elements.

Link to minimal reproduction

No response

Any additional comments?

No response

[so1ve]

Could you please provide some screenshots?

[vusal5555]

Could you please provide some screenshots?

[vusal5555]

[so1ve]

Isn't the highlight correct?

[vusal5555]

Isn't the highlight correct?

No, curly braces and parenthesis are supposed to be yellow not white.

[so1ve]

What theme are you using? BTW the second image failed to upload.

[vusal5555]

What theme are you using? BTW the second image failed to upload.

I am using Shades of Purple. I also checked it with the default VS code theme and the problem persists. It only resolves when I delete one of the braces or parenthesis and retype and all of them get highlighted again.

[vusal5555]

What theme are you using? BTW the second image failed to upload.

@

here is another example. As you see the closing tags are in red here which should not happen.

[davidmatter]

The issue is probably this code /s

const isTrue = false;
const isFalse = true;

[davidmatter]

On a serious note, could you share a public repo with a minimal reproduction? Also, please provide a list of extensions. You can copy the list by executing Help: Report Issue... >> Click "show" at Include my enabled extensions

[vusal5555]

codesnap | adp | 1.3.4
laravel-extra-intellisense | ami | 0.6.6
vscode-tailwindcss | bra | 0.10.5
laravel-goto-view | cod | 1.3.11
vscode-eslint | dba | 2.4.4
composer-php-vscode | DEV | 1.47.15512
phptools-vscode | DEV | 1.47.15512
profiler-php-vscode | DEV | 1.47.15512
es7-react-js-snippets | dsz | 4.4.3
prettier-vscode | esb | 10.4.0
auto-close-tag | for | 0.5.15
auto-rename-tag | for | 0.1.10
vscode-phpfmt | kok | 1.2.12
rainbow-csv | mec | 3.12.0
dotenv | mik | 1.0.1
inline-fold | moa | 0.2.6
laravel-goto-components | nao | 1.2.0
color-highlight | nau | 2.8.0
laravel-blade | one | 1.36.1
material-icon-theme | PKi | 5.3.0
vue-vscode-snippets | sdr | 3.1.1
vscode-blade-formatter | shu | 0.24.2
svg-preview | Sim | 2.8.3
cody-ai | sou | 1.20.3
errorlens | use | 3.18.0
volar | Vue | 2.0.21
vue | Wsc | 1.0.26

and here is the repo: https://github.com/vusal5555/vue-js-learning

[davidmatter]

That looks like an issue with an installed extension. I recommend creating a new vscode profile and installing your extensions one by one until you can reproduce the issue.

[vusal5555]

My guess is that Vue - Official and Vue 3 Support - All In One are having conflicts with each other but I may be wrong.

[vusal5555]

Well, yes, my guess was right. I disabled the Vue 3 Support - All In One extension and the issue was resolved.