It isn't working on .jsx ('javascriptreact')

[luigiMinardi]

settings.json any.jsx any.js

Tried with .tsx and also didn't worked (.ts works fine though).

Im using the v0.0.4, in a Manjaro Linux with the vsc at version 1.65.2 if that helps someway.

[Energiz3r]

Works for me - just needed to disable / enable the plugin and off it went.

[MrKennDmsi]

Doesn't work for me either, in any type of file.

[0xalecks]

same.. doesn't work in settings.json, despite jsonc being in the list

[Mondragold]

By default the VSCode will enable color picker for stylesheet files such as .css, .less, .scss and .sass

In order to have the color picker for other file types, wherever there is an valid HEX tag, also to make the valid answer more complete, there are two steps to follow,

install extension vscode-color-picker.

add following to the seetings.json of your VSCode, since by default it enables for [python,javascript,typescript]

"vscode-color-picker.languages": [ "php", "html", "css", "python", "jsonc", "javascript", "javascriptreact", "typescript", "typescriptreact", "vue" ]

[flatcapped]

In order to have the color picker for other file types, wherever there is an valid HEX tag, also to make the valid answer more complete, there are two steps to follow

You also need to make sure that "editor.colorDecorators" is not set to "false" in settings.json

[svetliott]

Interesting...

adding only "typescriptreact" didn't work after reload (disable/enable) after adding javascript react... and again disable/enable it worked in tsx files... I hope this helps

working settings : "vscode-color-picker.languages": [ "typescriptreact", "javascriptreact", "python", "javascript", "typescript" ],

[thiagobraga]

You also need to make sure that "editor.colorDecorators" is not set to "false" in settings.json

It's true, the extension wasn't working, but after I've changed editor.colorDecorators to true, it worked.

But I've found some issues:

• only js file worked, not jsx, tsx or ts (edit: sometimes neither js works)
• css worked but after a reload, now it shows two color picker boxes
• in jsonc, it also shows twice, one of them inside of the string

I saw an error on Extension Host output

2023-10-26 17:39:16.216 [error] [AntiAntiSepticeye.vscode-color-picker] provider FAILED
2023-10-26 17:39:16.217 [error] TypeError: Cannot read properties of undefined (reading 'index')
    at s (/home/thiago/.vscode/extensions/antiantisepticeye.vscode-color-picker-0.0.4/dist/extension.js:2:24643)
    at /home/thiago/.vscode/extensions/antiantisepticeye.vscode-color-picker-0.0.4/dist/extension.js:2:25630
    at Array.map (<anonymous>)
    at Function.getMatches (/home/thiago/.vscode/extensions/antiantisepticeye.vscode-color-picker-0.0.4/dist/extension.js:2:25422)
    at Object.provideDocumentColors (/home/thiago/.vscode/extensions/antiantisepticeye.vscode-color-picker-0.0.4/dist/extension.js:2:26110)
    at _.provideColors (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:58754)
    at /usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:74684
    at be.s (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:63736)
    at be.$provideDocumentColors (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:74671)
    at i.S (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:10827)
    at i.Q (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:10593)
    at i.M (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:9645)
    at i.L (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:8762)
    at s.value (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:134:7565)
    at c.z (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:80:1902)
    at c.fire (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:80:2119)
    at m.fire (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:96:14010)
    at s.value (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:153:7902)
    at c.z (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:80:1902)
    at c.fire (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:80:2119)
    at m.fire (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:96:14010)
    at MessagePortMain.<anonymous> (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:153:6182)
    at MessagePortMain.emit (node:events:513:28)
    at MessagePortMain._internalPort.emit (node:electron/js2c/utility_init:2:367)

And as said in #2, when I add a blank line at the start, it works for all js, jsx, ts and tsx.