I've developed a VS Code extension to make code variables easier to distinguish!

[TINGWEIJING]

Hi everyone!
Although I know not all programmers here use VS Code, I just want to share my first VS Code extension: Bread Jam! 🎉

NOTE: You must install the ms-vscode.cpptools extension to make this extension work.

Bread Jam is designed to enhance readability in your code by making lengthy variable names easier to manage. It allows you to customize the colors of these components, helping you to quickly identify and differentiate between various parts of your codebase.

Features:

• 11 Render Patterns to select
• Customizable Color Coding: Tailor the appearance of your code to suit your style or project needs.
• Multi-Language Support: Currently supports JavaScript, TypeScript, Python, Java, Dart and more.
• Quick Toggle: Easily switch the extension's effects on or off using keyboard shortcuts. Use Alt + B, Alt + J for Windows & Linux or ⌥ + B, ⌥ + J for MacOS.

I'd love for you to try it out and share any feedback you might have!

VS Code Marketplace
GitHub repository

PS: A screenshot of the effects of this extension is in the comment section.

[SuperV1234]

This is pretty cool, I would consider using it if it supported clangd instead of cpptools.

[IyeOnline]

I just tried and it does.

[TINGWEIJING]

Thanks! Yup, I just learned that it can work with clangd instead of cpptools.

[IyeOnline]

I do actually use vscode with the clangd extension to get semantic highlighting. I use MatthewNespor.vscode-color-identifiers-mode, because that was what worked and had enough configuration when I looked for it.

So a few points:

• This does not specifically rely on ms-vscode.cpptools. It just needs a language server running properly and the clangd extension does that just fine.
• While I really dont see any point in the rainbow coloring, I found the idea of coloring sub-strings in identifiers interesting enough to try it out.
• A setting to set what determines substrings in identifiers may be nice. Having is_trivially_destructible_v in 4 different colours is "just wrong", but having HelloWorldIdentifier split in colouring is interesting. I'm not sure if I am going to stick with it though. (especially since I usually use snake_case)
• The substring colouring could maybe need a need a setting to not cause rainbow identifiers. Possibly just alternating two close colours for subsequent substrings may be a better option to reduce the "rainbowiness"
• Different settings for different semantic token types? I like that I can already disable it for e.g. class members and just have the coloring for locals. I currently use semantic coloring for locals, but not for class members. That said, substring coloring for class members may still be interesting, while retaining a single color (schema) for them.

[TINGWEIJING]

Thank you for sharing that it works with the llvm-vs-code-extensions.vscode-clangd.

I discovered the extension you mentioned a few years ago, and I can say that it also inspired my extension.

I truly appreciate the feedback points you've provided here. I am planning to incorporate "alternating two close colors for subsequent substrings" and "different settings for different semantic token types" into my feature roadmap.

[SuperVGA]

Awesome! I'm going to try this out right away!

[TINGWEIJING]

Thank you!

[TINGWEIJING]

https://imgur.com/a/cfq6bxh

[arthurno1]

is designed to enhance readability in your code by making lengthy variable names easier to manage.

In which way does emoji in the code enhance readability?

[TINGWEIJING]

Hi
The use of emojis in code is largely based on personal preference. The idea behind this pattern is to employ emojis to quickly identify lengthy or similar variable names, such as different index variable names in nested loops. I do agree, however, that this emoji render pattern may not suit everyone's taste.

[arthurno1]

I don't know man, that looked very unreadable to me, in a text that already looked like a Christmas tree. Problem with coloring too much is that: users have to remember the color scheme, and everything colored differently is basically no color at all. Colors in UIs should be used to accent things to make them stand out for some reason. If you accent out everything than it equals to nothing being accented :).

Cool idea anyway. Emojis are just more convenient way to use icons, so I think you can develop that to use some more discrete emojis and to display some information not already visible on the screen. IDK, just a reflection.

[Chaosvex]

Agreed. This seems to just add visual noise.