Puneet-Kumar2010

Posted on Jul 13

✫ CodeCharm: VS Code Extension That Comments Your Code Like an AI Pro (With Emojis!)

#ai #javascript #vscode #extensions

Tired of writing boring comments? Let AI do it — smart, snappy, and with ✨vibes✨.

⚖️ What is CodeCharm?

CodeCharm is an open-source VS Code extension that generates meaningful, concise inline comments using the Gemini API.

No summaries, no fluff — just clean, helpful comments right where you need them, with a sprinkle of emojis.

⚡ Features

✍️ AI-powered inline code comments

\u🔁 Retry mechanism if the model fails

💬 Concise, emoji-enhanced explanations

👇 Triggered by selecting code and pressing

Ctrl + Win + J

🧠 Uses Gemini 2.0 Flash Lite for speed + quality

📦 Lightweight, fast, and no GPT hype — just code clarity

🖼️ Quick Demo

Here’s what it does to a function like this:

function area(a, b) { console.log("I will find area of rectangle whose length and width are", a, b); console.log("area of rectangle is", a * b); return a * b; }

⬇️ After CodeCharm:

function area(a, b) { // Function to calculate area 👍 console.log("I will find area of rectangle whose length and width are", a, b); // Log input values 📏 console.log("area of rectangle is", a * b); // Calculate and log area 📐 return a * b; // Return calculated area 💯 }

🚀 How to Use

Install from VS Code Marketplace

Press Ctrl + Win + J on a selected block of code

Magic happens 🦮

🤝 Want to Contribute?

CodeCharm is open-source on GitHub!Check it out here: GitHub – DeveloperPuneet/CodeCharm

Raise issues 🦞

Suggest features 💡

Improve prompts ✍️

Or just drop a ⭐ to support!

🧠 Why I Built It

Sometimes I just wanted quick, clear comments for my code — not novels.And if you're someone who loves both code and clarity (with a side of emojis), CodeCharm is your new favorite dev tool.

I built this extension for myself, but if it helps even one more dev write cleaner code faster — it's all worth it.

🔗 Install Now

👉 Install CodeCharm on VS Code

🙌 Made with love by DeveloperPuneet

Top comments (9)

Ashley Childress • Jul 13

First off, huge kudos for sharing CodeCharm with everyone! 🎉 The idea is genuinely innovative and your approach to bringing clarity (and fun!) to code using automatic inline comments (especially with emojis) is super clever. I love seeing fresh solutions and the creative energy you brought to this problem.

That said, I want to offer a slightly different perspective - not to take away from your hard work, but in the spirit of friendly debate and open-minded discussion. There are lots of views on this topic, so I appreciate you hearing out an alternative.

Please feel free to disagree, and above all, let’s keep the conversation constructive! 😊

The Core of My Concern

From my own experience, I believe:

Code Should Be Self-Explanatory: If we need an inline comment to explain what a piece of code does, that’s usually a sign that the code itself could be clearer. (Of course, things like API docs, jsdocs, or Swagger are a different beast altogether.)
Inline Comments for “Why,” Not “What”: The real value of inline comments is to capture the “why” behind decisions - anything not obvious from reading the code itself.

You did a great job explaining what CodeCharm does, but I’d love to know more about why you chose this approach. My guess (just from your blog): you want to make code’s purpose and intent more explicit, and maybe a bit more joyful, too! 🦄

Here’s My Alternative Proposal

Why not have the AI suggest improvements to the code itself, making it so readable that comments for what it does are unnecessary? For example:

Your original:

function area(a, b) {
    console.log("I will find area of rectangle whose length and width are", a, b);
    console.log("area of rectangle is", a * b);
    return a * b;
}

Alternate refactor:

function calculateAreaOfRectangle(length, width) {
    console.log("Entering calculateAreaOfRectangle() with inputs: { length: %d, width: %d }", length, width);
    const area = length * width;
    console.log("Exiting calculateAreaOfRectangle() with output: %d", area);
    return area;
}

Now it’s clear what the code is doing, even to someone new to the project, with no need for inline “what” comments.

Going Further

If you still want to add extra context (and keep those awesome emojis! 🚀), maybe make it part of the official jsdoc instead:

/**
 * Calculates the area of a rectangle. 📐
 *
 * @param {number} length - The length of the rectangle.
 * @param {number} width - The width of the rectangle.
 * @returns {number} The computed area (length * width).
 */
function calculateAreaOfRectangle(length, width) {
    // Implementation...
}

⁉️ Emojis in docs are seriously debated, so maybe let folks toggle that on or off!

In summary

Love the spirit and innovation here!
My main concern: comments should clarify “why,” not “what.”
Maybe nudge the AI to improve code legibility directly - or enhance official docs with optional fun!

Thanks for sparking this conversation, and I’m genuinely excited to see what you (and CodeCharm) do next! 🌟

Puneet-Kumar2010 • Jul 14

Hey! First off, huge thanks for taking the time to share your thoughtful feedback — I seriously appreciate the constructive vibe and deep perspective! 🙏

You brought up a really solid point about focusing on code readability instead of relying too much on “what” comments — and guess what? I heard you loud and clear 👀💡

✅ I've updated CodeCharm to now include a second feature that helps refactor and improve code readability — cleaner variable names, simplified logic, and more maintainable structure. Just select the code and press:

Ctrl + Win + G
to ✨ “Refactor for Readability”
(while Ctrl + Win + J still adds inline comments with emojis 😄)

Hope you’ll check out the new update and would love your thoughts on this direction!

Thanks again for helping push this forward! 🚀
— Puneet 💻🧠

Ashley Childress • Jul 14

Wow, you work quick!!! I'm glad it helped (definitely not everyone agrees with me that easily either, lol). I've add it to my weekend list, so I'll check it out as soon as I get another spare chance 😍 In the meantime, keep up the great work!

Puneet-Kumar2010 • Jul 15

Haha, I like moving fast when the feedback’s 🔥 like yours 😄
Glad we’re on the same wavelength — not every debate needs to end in bloodshed 😂
Can’t wait to hear your thoughts after the weekend — really appreciate the support and your insights 💡💖

Ashley Childress • Jul 21

Hey hey! Just wanted to let you know I haven’t forgotten about you! I didn’t get a chance to install CodeCharm yet, but I did dig into the source - and it’s seriously a great project. 👏

I might even borrow a bit of your VS Code setup 😉 It was never my intention to write an extension for VS Code, but Claude had… other plans. We’ll see tomorrow if it actually runs or just pretends to 😅

Keep up the great work!

Puneet-Kumar2010 • Jul 21 • Edited

Haha, the fact that you even peeked under the hood means a lot! 🔧👀

And whoa — if Claude dragged you into VS Code extension land, then I’m absolutely here for it 😄 We need more wild experiments and creative spins out there, and if CodeCharm gave you even a nudge in that direction — that’s a win in my book 🏆

Can’t wait to see what chaos (or genius) you unleash next 👩‍💻⚡ And if you ever want to swap notes, I’m just a ping away.

Rooting for your build — may it run without undefined is not a function 😅🙏