Issue #114 (Color Decorators)06/26/24
As you've likely noticed, colors in your VS Code editor are displayed by default with what's referred to as a "color decorator", which allows you to easily use an easy-to-access color picker to adjust the color or change the color's format.
The screenshot below shows an example in a CSS file:
If you click the top bar of the picker, it will cycle through different formats (hex, RGB, HSL, and HWB) if you want to convert the existing format to another.
Of course, maybe you don't want the color decorator to appear or you want to change how the color picker appears. You can do this in your settings:
- Uncheck the Editor: Color Decorators setting, which will remove the color decorator and the color picker from appearing
- To keep the color decorator but change when the picker appears, change the setting Editor: Color Decorators Activated On, which lets you switch from the default "clickAndHover" to just "hover" or just "click".
Interestingly, on my Windows machine, the "click" option wasn't working for me. I'm not sure if there's something else that's conflicting with it but I can only get the color picker to appear on hover.
That being said, VS Code now allows you to display a color picker at any time in your code by choosing "Show or Focus Standalone Color Picker" in your command palette.
This allows you to generate code for a color in any editable document, regardless of whether you're directly dealing with an existing color or not. And if you use this often, it's easy to add a custom keyboard shortcut to open the picker without using the command palette (there isn't one set by default).
Now on to this week's hand-picked links!
|
|
|
VS Code Tools
|
Nestless Code — A VS Code extension that shrinks the font size and reduces opacity the more you indent your code, ostensibly to help organize your code. Part of me thinks this is a joke extension but I suppose some might like it.
Blink-FS — A VS Code extension designed to be used with the Blink Shell app for iOS & iPadOS, to connect VS Code to the underlying File System of the app, allowing you to work with projects on your device or remote hosts.
Biome: Faster, Smarter JS Formatting & Linting in Rust! — Listen to this Syntax.fm episode about Biome.JS with the mastermind behind it all, Emanuele Stoppa. Why is it written in Rust? Why are other tools so slow? Could Biome be the ultimate successor to ESLint or Prettier? Sponsor
QuackTrack Cursor — A VS Code extension that adds a cute duck that accompanies your cursor and reacts to your actions in real-time.
|
VS Code Theme of the Week
|
Jupyter Theme — Described as the theme "seen in Jupyter Notebooks, for VS Code, to seemlessly integrate your Jupyter workflows right down to the colour theme."
The primary theme in the package for this one is a light theme, which is decent. I'm showing the high contrast dark theme above, which I found is nicer than the regular dark theme (which has way too much purple for my taste).
|
|
|
|
|
VS Code Articles & Videos
|
📺 Using Branch Protection to Prevent Commits to Specific Git Branches — YouTube video covering the branch protection feature in VS Code, which can be used in combination with Github's branch protection.
GitHub Copilot Extensions Are All You Need — The VS Code team looks at the new APIs that empower extensions to interact directly with language models and the chat experience contributed by GitHub Copilot and how you can build such APIs today.
The Morning Paper for Tech — Want a byte-sized version of Hacker News that takes just a few minutes to read? Try TLDR's free daily newsletter. It covers the most interesting tech, startup, and programming stories in just 5 minutes. No sports and no politics. Sponsor
Profiles in Visual Studio Code — A quick synopsis of the new-ish Profiles feature in VS Code, along with use case and benefits.
|
|
|
Best of the Rest
|
OnlineInterview.io — A free remote tech interview platform that allows you to remote code interviews, discuss solutions, and collaboratively write code in the browser.
Pretzel — A modern, open-source replacement for Jupyter Notebooks that's actually a fork of Jupyter, so all settings, extensions, keybindings, etc. from Jupyter work out-of-the-box.
Pop Quiz: What’s the Body’s Most Abundant Protein? — The answer: Collagen. Start incorporating NativePath's Certified Grass-Fed Collagen Powder daily to support joint health, bone strength, and muscle growth. Sponsor
CodeBrew — A Java IDE for iPad and iPhone with features that include dark mode, autocomplete, live issue highlighting, and more.
If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.
That's it for this issue.
Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris
|
|
|
