search

vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.55k stars 373 forks source link

Vue official extension for Vue 3 does not do syntax highligting #4455

Closed vusal5555 closed 2 weeks ago

vusal5555 commented 2 weeks ago

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 commented 2 weeks ago

Could you please provide some screenshots?

vusal5555 commented 2 weeks ago

Could you please provide some screenshots?

code

vusal5555 commented 2 weeks ago

code ![Uploading code.png…]()

so1ve commented 2 weeks ago

Isn't the highlight correct?

vusal5555 commented 2 weeks ago

Isn't the highlight correct?

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

so1ve commented 2 weeks ago

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

vusal5555 commented 2 weeks ago

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 commented 2 weeks ago

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

@ Screenshot (11)

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

davidmatter commented 2 weeks ago

The issue is probably this code /s

const isTrue = false;
const isFalse = true;
davidmatter commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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