Overview
Let’s talk about VScode! The version we're discussing today is Version: 1.94.2 (Universal). Let's dive in!
Why do color squares appear in JS and TS files, but not in TSX files?!
Ah, yes. You're referring to that handy feature in VScode that lets you preview hexadecimal colors, officially known as inline color decorators. This feature works fine in JavaScript and TypeScript files, but it doesn’t show up in React.js’s TSX files.
If you’re thinking, “Wait, I’ve never even seen this feature before,” here’s how you can enable it:
- Open the Settings > Search for "Color Decorators" > Turn ON "Color Decorators"
Right, it seems like it’s indeed disabled for TSX files by default. So, let's scroll down in the settings and turn ON "Default Color Decorators."
And that should solve the issue.
The vscode-color-picker extension is no longer necessary
In the past, if you wanted to see color previews (officially known as inline color decorators) or use a color picker in VScode, you'd need to install the vscode-color-picker extension.
But now, you don’t need that extension anymore. VScode comes with built-in support for these features. Color previews and the color picker work out of the box, even without any extensions.
This has been supported since Version 1.78, released in 2023.
Conclusion
As you may have guessed, I discovered this while experimenting with React.js last week.
Keeping VScode up-to-date and reducing the number of extensions feels great. I’ve relied on the vscode-color-picker extension for a long time. Thank you for everything so far.
