Color Picker shown twice

[chinmaykh]

Type: Bug

The color picker box which appears next to a hex colour value is appearing twice in a style tag inside a .vue file. To recreate, create a new VueJS(3) scaffold and open the App.vue file to see it on line 23 (Pic attached)

VS Code version: Code - Insiders 1.70.0-insider (3cbf306, 2022-07-25T05:41:37.019Z)
OS version: Darwin arm64 21.5.0
Modes:

System Info

Item	Value
CPUs	Apple M1 (8 x 24)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Load (avg)	2, 2, 2
Memory (System)	8.00GB (0.17GB free)
Process Argv	--crash-reporter-id f1fa357d-9d7d-4533-b527-55607d645c0b
Screen Reader	no
VM	0%

Extensions (29)

Extension	Author (truncated)	Version
vscode-svgviewer	css	2.0.0
javascript-ejs-support	Dig	1.3.1
prettier-vscode	esb	9.5.0
auto-rename-tag	for	0.1.10
copilot	Git	1.35.6319
gc-excelviewer	Gra	4.2.55
pyscript	Har	0.1.1
rest-client	hum	0.25.0
language-julia	jul	1.6.28
materialize-snippets	len	1.4.5
marp-vscode	mar	1.5.2
vscode-duplicate	mrm	1.2.1
python	ms-	2022.10.1
vscode-pylance	ms-	2022.7.40
jupyter	ms-	2022.7.1002101047
jupyter-keymap	ms-	1.0.0
jupyter-renderers	ms-	1.0.9
vsliveshare	ms-	1.0.5667
vsliveshare-audio	ms-	0.1.91
vsliveshare-pack	ms-	0.4.0
vetur	oct	0.35.0
material-icon-theme	PKi	4.19.0
LiveServer	rit	5.7.5
synthwave-vscode	Rob	0.1.11
ayu	tea	1.0.5
octave	toa	0.0.3
vscodeintellicode	Vis	1.2.22
volar	Vue	0.39.2
material-theme	zhu	3.15.2

(6 theme extensions excluded)

[IllusionMH]

Unable to reproduce this in regular css/less files.

Looks similar to vuejs/vetur#1219

/needsMoreInfo

Moreover looks like you have 2 Vue extensions which might contribute to the problem

Is it reproducible in non-Vue files? Is it reproducible it you disable one of Vue extensions?

[VSCodeTriageBot]

Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our issue reporting guidelines. Please take the time to review these and update the issue.

Happy Coding!

[chinmaykh]

That fixes the issue. I had both Volar and Vetur extensions running. Removing Vetur (meant for vue2) removed the extra color picker. If possible, the extension author of Vetur could be asked to put up a deprecated or "use this Volar instead" info in their extension details. Sorry for the hassle. ❤️ VSCode

[IllusionMH]

You can check Vetur repo and create this request if needed.