Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 766
Ezeewei Avatar asked May 25 '18 15:05

Ezeewei


People also ask

How do I use VSCode color picker?

Hover over the "VS Color Picker" extension, towards the right a settings symbol will show, click on it and a "Keyboard Shortcut" window will be opened, inside this new window you will find the "VS Color Picker" extension, double-click on it, and you will see a pop-up box requesting you to input your desired shortcut ...

How do I change the color of a variable in VSCode?

In Visual Studio Code, use Ctrl + Shift + P and type settings. json to the field that shows up. After you type it, it should give you the settings.

What does RED text mean in Visual Studio Code?

The reason is to show you that there is an error in the file. More information on this can be found here: VSCode Issues 782. As you can see here, the file appears red when something in the file is an error. This type of information is considered to be file-decorations .


Video Answer


2 Answers

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"] 

enter image description here

like image 104
Boris Yakubchik Avatar answered Sep 28 '22 15:09

Boris Yakubchik


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 "javascriptreact".

like image 30
Amit Avatar answered Sep 28 '22 14:09

Amit