☀️ Code Weather
Compilers don't care if your code is ugly. Humans do.
Code Weather measures what matters to humans, not just machines.
🤔 The Problem: "The Linter Passed, But My Head Hurts"
We have amazing tools for computers.
- Linters catch syntax errors.
- SonarQube catches logical bugs and security risks.
- Tests verify behavior.
But who watches out for the developer's sanity?
A React component with 20 useState hooks might pass every automated test. It might have zero bugs. But to a human developer, it is a disaster. It burns your "Mental RAM" and kills productivity.
💡 The Solution: Visualizing "Cognitive Load"
Code Weather is a VS Code extension that judges your code like a human would. We don't parse ASTs to find execution paths. We look for signs of struggle.
We visualize the "health" of your React components right in your file explorer.
🌤️ The Forecast
| Weather |
Meaning |
Human Sensation |
| ☀️ |
Sunny |
"Ah, fresh air. I can read this in 5 seconds." |
| 🌥️ |
Cloudy |
"Okay, a bit busy, but I get it." |
| 💧 |
Rainy |
"I need a coffee to understand this flow." |
| ⚡ |
Storm |
"Who wrote this? Oh wait, I did..." |
| 🌪️ |
Disaster |
"RUN." (Immediate refactoring needed) |
🧠 What We Measure (Human-Centric Metrics)
We don't just count lines; we measure pain points.
| Metric |
Why It Matters |
| Scroll Fatigue (Component Length) |
Long files break your mental model. No one likes scrolling through 800 lines to find the return statement. |
| Mental RAM Usage (State Count) |
Every useState adds a dimension of complexity. 15 states = 15 things to juggle simultaneously. |
| Side-Effect Anxiety (useEffect Count) |
"useEffect soup" is the #1 cause of "Why is this fetching twice?" We flag it before it explodes. |
| Visual Noise (JSX Density) |
Too much markup = time to extract sub-components. Is this logic, or just a wall of <div> tags? |
| Inline Function Spam |
onClick={() => ...} everywhere kills readability and performance. Move them outside JSX. |
⚔️ FAQ: "Is this accurate?"
"Can't I fool this extension?"
Yes. You can hide 100 lines of logic inside a custom hook, and Code Weather will say "Sunny."
But you are only fooling yourself. The goal isn't to please the extension; the goal is to remind you to write cleaner code.
Yes. Because dead code is noise. It distracts you. It adds to the cognitive load. Delete it or move it to git history.
"Why not use SonarQube?"
You should! SonarQube is an MRI machine; Code Weather is a mirror.
- Use SonarQube to find bugs.
- Use Code Weather to build better habits.
✨ Features
- Explorer Icons: See the weather without opening the file.
- Folder Aggregation: If a folder has a 🌪️ Disaster inside, the folder icon changes too. You can't hide the mess!
- Real-time Updates: Watch the storm clear up as you refactor.
- Interactive Report: Click the status bar to see your "Top Refactoring Candidates."
- Health Scoring: 0-100 score for each component and your entire codebase.
- Export to CSV: Track improvement over time and share with your team.
🚀 Getting Started
- Install via VS Code Marketplace.
- Open any React project (Next.js, Vite, CRA—anything works).
- Weather icons appear automatically on React component files:
📁 src/components/
Button.tsx ☀️ ← Easy to understand
UserForm.tsx 🌥️ ← Manageable
Dashboard.tsx 🌪️ ← Disaster!
- Panic (optional), then Refactor.
💡 Quick Wins
- Click the status bar to open the full interactive report
- Use the weather filter buttons (🌪️ Disaster, ⚡ Storm) to find problem areas
- Sort by "Health Score" to prioritize refactoring work
- Export to CSV to track progress over time
🤝 Philosophy
Code Weather believes:
- Readability is a feature.
- If it looks complex, it is complex.
- The best time to refactor is now.
Made with ❤️ (and clean code) by ChadByte
Make your codebase a sunny place to live.
