I've been using VSCode with React and Styled Components for about 6 months--no issues. Recently, the color picker hasn't been showing up when including any CSS properties involving color. A quick reload of the window or restarting VScode would always solve this issue..until now. I've changed the selected language to CSS, Javascript, Javascript React, and CSS (Styled Components). Nothing works.
I've tried uninstalling/re-installing styled components extensions. Nothing. I uninstalled and reinstalled VSCode, but that also didn't work.
I have this extension installed https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
Image of color picker not showing up next to color
Any help would be greatly appreciated.
Thanks
**EDIT: For anyone that might run into this in the future, installing this extension fixes the issue. https://marketplace.visualstudio.com/items?itemName=AntiAntiSepticeye.vscode-color-picker
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"
]