how to bring the vscode css color picker feature into js file with string that match color name format?

Question

https://code.visualstudio.com/docs/languages/css

None of the current plugin able to do so. I am really surprised. even intellij has this support!

Also the reply from vscode itself is a bit not helpful either. https://github.com/Microsoft/vscode/issues/36485

Any hint on how to build such plugin, seems shouldn't be really hard since its really just porting the feature from one file extension to another?

Anyone able to resolve this?

score 81 · Accepted Answer · answered Jul 28 '19 at 15:38

81

I found colorize which can highlight JavaScript and TypeScript (among others) GitHub

In your settings.json in VSCode just add languages you'd like to target:

"colorize.languages": ["typescript", "javascript", "css", "scss"]

answered Jul 28 '19 at 15:38

Boris Yakubchik

3,861
3
34
41

5

got it working with `"colorize.include": ["**/*.coffee"]` – Nitsan Baleli Dec 08 '19 at 08:47
9

Does this extension have a color picker? Or does it just highlight colors? I installed it but there is no color picker in jsx – Ali Mert Çakar Jul 17 '20 at 07:34
1

@AliMertCakar unfortunately "Colorize" doesn't include a colour _picker_, it only highlights known colour strings.. I've just switched from that to "JSON Color Token". if you haven't already done so in the almost-2-years since you posted this comment, I'd highly recommend you check it out... :) – Andre Greeff Apr 23 '22 at 09:58
@AndreGreeff I've checked and I am using "Color Highlight". Works in .tsx files for me. I don't even remember myself commenting on this :) – Ali Mert Çakar Apr 24 '22 at 00:19
4

This doesn't answer the question which is referring to the color ``picker`` and not just a color ``highlight`` – Monstar Jun 14 '22 at 17:53

score 31 · Answer 2 · answered Dec 03 '21 at 03:01

31

Updating for this question. Seems like:

https://marketplace.visualstudio.com/items?itemName=AntiAntiSepticeye.vscode-color-picker

adds color picker brings functionality into other languages.

Personally tested and works in typescript. It's relatively new so it doesn't have a lot of downloads or installs but it works as advertised.

answered Dec 03 '21 at 03:01

cpakken

311
4
3

2

This works great! Thanks! This should definitely be the new correct answer, because it adds the same color functionality from css files into any other file type. (python, js, etc.) – Zack Plauché Dec 06 '21 at 15:26
1

Exactly what I was looking for. Thanks! – TribeOfOne Feb 12 '22 at 14:32
2

This isn't worked for me :c – Ezequiel Guitler Feb 20 '22 at 19:39
3

@ezequiel-guitler Make sure to add the language you're using into settings.json, like so: `"vscode-color-picker.languages": ["python", "javascript", "typescript", "typescriptreact"]` – hf02 Jul 28 '22 at 03:12

score 30 · Answer 3 · edited Dec 30 '22 at 19:08

30

To anyone who uses Colorize and wants it to work on their React project (CSS in JS and such) use:

"colorize.languages": ["javascriptreact", "javascript", "css", "scss"]

as apparently "javascriptreact" is needed and not "javascript"

For TypeScript in React use "typescriptreact".

edited Dec 30 '22 at 19:08

Henry Ecker

34,399
18
41
57

answered Feb 22 '20 at 02:35

Amit

2,142
1
11
12

score 11 · Answer 4 · answered Nov 27 '21 at 13:35

11

VS extension JSON color token is capable of bringing up the native color picker in any language.

To make this work with JS and React, add this in VS Code's settings.json:

"jsonColorToken.languages": [
    "json",
    "jsonc",
    "javascript",
    "javascriptreact"
  ]

Source: https://github.com/YECHUNAN/json-color-token/issues/2#issuecomment-977261832

answered Nov 27 '21 at 13:35

kracas

111
2
3

1

I've been using Colorize (as per many other answers) for ages now, but thanks to your answer here now, I've just switched over to JSON Color Token instead... this is so much nicer to use, thank you! :) – Andre Greeff Apr 23 '22 at 09:55
1

Thanks - after installing the extension, updating settings.json, and _restarting_ VSCode, it's looking good! – Peter Jun 01 '22 at 17:51
It works but only with Hex codes, not RGB. – Loïc Joachim Jun 13 '22 at 23:40

score 5 · Answer 5 · answered Apr 20 '23 at 18:11

5

The ability to see a color decorator in front of css-stle color formats or invoke a standalone color picker anywhere is currently in vscode Insiders v1.78.

Demo in ts and jsx files:

Setting: Editor: Default Color Decorators

Command: Show or Focus Standalone Color Picker

See more at https://stackoverflow.com/a/76066924/836330

answered Apr 20 '23 at 18:11

Mark

143,421
24
428
436

Here is the answer! Why to install extensions. But i observed, it works in tsx only when there is StyleSheet object imported, either blank or with styles. const styles = StyleSheet.create({}); – Rohit Parte Jun 19 '23 at 11:58
I have a weird behaviour, not sure whether this is bc of some other extension I have. But activating this and then reloading the window I do see the previews in my tailwind.config.js for a couple of seconds, then they disappear so I'm on the hunt on why that happens – lakardion Jun 26 '23 at 12:57
update: found out it is the Talwind CSS Intellisense extension so I'll probably open an issue – lakardion Jun 26 '23 at 13:10

score 1 · Answer 6 · answered Oct 19 '18 at 19:01

There is one possible implementation with vscode-color-info from wayncheng

Adding the following code to colorInfo.languages in settings.json should do the trick. Make sure to include all the default languages as well so they aren't disabled.

{
    "selector": "javascript",
    "colors": "css"
}

So your settings.json should look something like this:

"colorInfo.languages": [
    {
        "selector": "css",
        "colors": "css"
    },
    {
        "selector": "sass",
        "colors": "css"
    },
    {
        "selector": "scss",
        "colors": "css"
    },
    {
        "selector": "less",
        "colors": "css"
    },
    {
        "selector": "html",
        "colors": "css"
    },
    {
        "selector": "javascript",
        "colors": "css"
    }
]

score 1 · Answer 7 · answered Feb 02 '20 at 10:54

1

It works to use "colorize.include": ["**/*.js"] in my create-react-app project

answered Feb 02 '20 at 10:54

翁于宸

11
1

score 0 · Answer 8 · answered May 04 '21 at 07:54

I had the problem that TSX (TypeScript files with XML) wouldn't properly highlight the color. The solution was to add "typescriptreact" to the array as described in the post by @rouan.

PS @Ali Mert Cakar it adds no color picker and only highlights the color in the respective color.

how to bring the vscode css color picker feature into js file with string that match color name format?

8 Answers8

Linked

Related