[Bug] Vue (Official) extension highlighting abnormal in VS Code, cannot recognize Vue files correctly

[chenzhixin199703]

Vue - Official extension or vue-tsc version

3.2.6

VSCode version

1.113.0

Vue version

5.4.0

TypeScript version

4.9.5

System Info

System Info
OS: Windows 11 (10.0.22631)
CPU: Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
Memory: 32.00 GB
Binaries
Node: 20.12.0
npm: 10.5.0
Browsers
Chrome: 123.0.6312.122
Edge: 123.0.2420.97

package.json dependencies

{
	"name": "abf-ui",
	"version": "5.4.0",
	"description": "PIGCLOUD微服务开发平台",
	"author": "aibaifen",
	"license": "不对外分发 aibaifen 版权所有，请购买商业版权",
	"scripts": {
		"dev": "vite --force",
		"build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
		"build:docker": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build --outDir ./docker/dist/",
		"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
		"prettier": "prettier --write ."
	},
	"dependencies": {
		"@chenfengyuan/vue-qrcode": "^2.0.0",
		"@element-plus/icons-vue": "^2.0.10",
		"@fullcalendar/core": "^6.1.15",
		"@fullcalendar/daygrid": "^6.1.15",
		"@fullcalendar/interaction": "^6.1.15",
		"@fullcalendar/timegrid": "^6.1.15",
		"@fullcalendar/vue3": "^6.1.15",
		"@nutui/nutui": "^4.3.13",
		"@popperjs/core": "2.11.8",
		"@vueuse/core": "^10.4.1",
		"@wangeditor/editor": "5.1.23",
		"@wangeditor/editor-for-vue": "5.1.12",
		"ali-oss": "^6.21.0",
		"aliyun_numberauthsdk_web": "^2.1.11",
		"autoprefixer": "^10.4.7",
		"axios": "^1.3.3",
		"codemirror": "5.65.5",
		"crypto-js": "^3.1.9-1",
		"driver.js": "^0.9.8",
		"echarts": "^5.4.1",
		"element-plus": "2.5.5",
		"form-designer-plus": "^0.1.5",
		"html2canvas": "^1.4.1",
		"js-audio-recorder": "^1.0.7",
		"js-cookie": "^3.0.1",
		"jspdf": "^2.5.1",
		"lodash": "^4.17.21",
		"mitt": "^3.0.0",
		"nprogress": "^0.2.0",
		"pinia": "2.0.32",
		"qrcode": "1.5.1",
		"qs": "^6.11.0",
		"screenfull": "^6.0.2",
		"sm-crypto": "^0.3.12",
		"sortablejs": "^1.15.0",
		"splitpanes": "^3.1.5",
		"tailwindcss": "^3.0.24",
		"uuid": "^11.0.3",
		"v-calendar": "3.1.2",
		"vant": "^3.4.3",
		"vue": "^3.5.0",
		"vue-clipboard3": "^2.0.0",
		"vue-echarts": "6.6.1",
		"vue-i18n": "9.2.2",
		"vue-router": "^4.1.6",
		"vue-signature-pad": "^3.0.2",
		"vue3-tree-org": "^4.2.2",
		"vue3-ts-jsoneditor": "2.9.0",
		"vue3-video-play": "1.3.1-beta.6",
		"vuedraggable": "^4.1.0"
	},
	"devDependencies": {
		"@swc/core": "^1.6.13",
		"@types/node": "^18.14.0",
		"@types/nprogress": "^0.2.0",
		"@types/sortablejs": "^1.15.0",
		"@typescript-eslint/eslint-plugin": "^5.53.0",
		"@typescript-eslint/parser": "^5.53.0",
		"@vitejs/plugin-vue": "^4.0.0",
		"@vue/compiler-sfc": "^3.2.47",
		"consola": "^2.15.3",
		"cross-env": "7.0.3",
		"eslint": "^8.34.0",
		"eslint-plugin-vue": "^9.9.0",
		"pinia-plugin-persist": "^1.0.0",
		"prettier": "2.8.4",
		"sass": "1.58.3",
		"typescript": "^4.9.5",
		"unplugin-auto-import": "^0.13.0",
		"vite": "^4.3.3",
		"vite-plugin-compression": "^0.5.1",
		"vite-plugin-style-import": "^2.0.0",
		"vite-plugin-top-level-await": "^1.3.0",
		"vite-plugin-vue-setup-extend": "^0.4.0",
		"vue-eslint-parser": "^9.1.0"
	},
	"browserslist": [
		"> 1%",
		"last 2 versions",
		"not dead"
	],
	"bugs": {
		"url": "https://ccyyxx.com"
	},
	"engines": {
		"node": ">=16.0.0",
		"npm": ">= 7.0.0"
	},
	"keywords": [
		"vue",
		"vue3",
		"vuejs/vue-next",
		"element-ui",
		"element-plus"
	],
	"repository": {
		"type": "git",
		"url": "https://gitee.com/log4j/pig"
	}
}

Steps to reproduce

1. Open VS Code with the latest Vue (Official) extension installed.
2. Create a new .vue file (e.g., App.vue) with basic Vue 3 syntax.
3. Observe that the syntax highlighting is broken, and the .vue file is not recognized correctly by the extension.
4. Code completion and syntax hints are also not working as expected.

What is expected?

The .vue files should be correctly recognized by the Vue (Official) extension, with proper syntax highlighting, code completion, and type hints working as intended.

What is actually happening?

The Vue (Official) extension is showing abnormal syntax highlighting in .vue files. It fails to recognize .vue files correctly, resulting in missing code highlighting, incorrect syntax detection, and non-functional code completion and type hints, which severely affects the development experience.

Link to minimal reproduction

No response

Any additional comments?

No response

[chenzhixin199703]

This issue only occurs under the default dark theme of VSCode Dark, just change the theme

[aepot]

@chenzhixin199703 Confirming that it is Theme issue or probably the extension might be adapted for the new 2026 theme.

Modern Dark

Dark 2026 (Default Dark)

[ShamashMeYeshua]

I don't see this way, as for me, all different themes are irrelevant. My files .vue are not recognizable by the extension.
The version 3.2.5 works like a charm. The problem starts with the version 3.2.6.

Version: 1.114.0
Commit: e7fb5e96c0730b9deb70b33781f98e2f35975036
Date: 2026-04-01T09:27:11Z
Electron: 39.8.3
ElectronBuildId: 13658728
Chromium: 142.0.7444.265
Node.js: 22.22.1
V8: 14.2.231.22-electron.0
OS: Linux x64 6.17.0-19-generic

[Jevon617]

I encountered the same problem. In my tests, syntax highlighting for Vue files stopped working as of v3.2.0.

[serkodev]

@ShamashMeYeshua @Jevon617 Have you installed the TypeScript (Native Preview) extension? If so, could you try disabling it and see if that resolves the issue?

[Jevon617]

@ShamashMeYeshua @Jevon617 Have you installed the TypeScript (Native Preview) extension? If so, could you try disabling it and see if that resolves the issue?

@serkodev No, I don’t have the TypeScript (Native Preview) extension installed at all.

[nevehallon]

@ShamashMeYeshua @Jevon617 Have you installed the TypeScript (Native Preview) extension? If so, could you try disabling it and see if that resolves the issue?

This helped for me. Thank you!

Interesting these seemed to be working together for me until today.
Not sure what changed that made them incompatible.

[so1ve]

@ShamashMeYeshua @Jevon617 Have you installed the TypeScript (Native Preview) extension? If so, could you try disabling it and see if that resolves the issue?

This helped for me. Thank you!

Interesting these seemed to be working together for me until today. Not sure what changed that made them incompatible.

It seemed to changed its behavior. Now it enables by default instead of opt-in it by using typescript.experimental.useTsgo. Check your user-level vscode config and disable it.

[ShamashMeYeshua]

@serkodev I don't have this extension installed. I use "JavaScript and TypeScript Nightly" (Microsoft)