Koda.js
A powerful VS Code extension for real-time JavaScript evaluation and inline code execution. Experience immediate feedback as you write JavaScript code with live results displayed directly in your editor.
🚀 Features
- Live Evaluation: See JavaScript results instantly as you type
- Inline Results: Code outputs appear right next to your expressions
- Time Travel Debugging: Step through execution history and inspect variable changes
- Error Highlighting: Syntax and runtime errors highlighted with clear diagnostics
- Smart Parsing: Advanced AST-based parsing for accurate code analysis
- Zero Setup: Works out of the box with no configuration required
- Safe Execution: Sandboxed evaluation environment with timeout protection
📦 Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X
)
- Search for "Koda.js"
- Click Install
Quick Start
- Open any JavaScript file
- Press
Ctrl+Shift+K
(or Cmd+Shift+K
on Mac)
- Start typing JavaScript code and see results instantly!
🎯 Usage
Live Evaluation
let name = "Koda"; // → undefined
let greeting = `Hello, ${name}!`; // → "Hello, Koda!"
console.log(greeting); // → Hello, Koda!
// Math operations
let result = 42 * 1.5; // → 63
Math.sqrt(144); // → 12
// Array operations
let numbers = [1, 2, 3, 4, 5]; // → [1, 2, 3, 4, 5]
numbers.map(x => x * 2); // → [2, 4, 6, 8, 10]
numbers.filter(x => x > 3); // → [4, 5]
// Object operations
let user = { name: "Alice", age: 30 }; // → {name: "Alice", age: 30}
user.name.toUpperCase(); // → "ALICE"
Time Travel Debugging
Koda.js includes powerful time travel debugging capabilities that let you step through your code's execution history and inspect how variables change over time.
Using Time Travel Debugger
- Enable Time Travel: Use the command
Koda.js: Toggle Time Travel
or press the toggle button in the Time Travel panel
- Open Time Travel Panel: The panel automatically opens when time travel is enabled
- Execute Code: Run your JavaScript code normally - each expression execution is recorded
- Navigate History: Use the navigation controls to step through execution history
Navigation Controls
- Step Back (⬅): Go to the previous execution step
- Step Forward (➡): Go to the next execution step
- Timeline: Click any step in the timeline to jump directly to that point
- Clear History: Remove all recorded execution steps
Features
- Variable Tracking: See how variables change at each execution step
- Expression Highlighting: The corresponding code is highlighted when navigating steps
- Error Inspection: Review errors that occurred during execution
- Timeline View: Visual timeline of all execution steps with timestamps
// Example: Time travel debugging in action
let count = 0; // Step 1: count = 0
count++; // Step 2: count = 1
count *= 2; // Step 3: count = 2
let result = count + 10; // Step 4: result = 12, count = 2
// Navigate back through steps to see how variables evolved
Commands
Command |
Shortcut |
Description |
Koda.js: Start Live Evaluation |
Ctrl+Shift+K |
Enable real-time code evaluation |
Koda.js: Stop Live Evaluation |
- |
Disable live evaluation |
Koda.js: Evaluate Selection |
- |
Evaluate only selected code |
Koda.js: Clear All Results |
- |
Remove all inline results |
Koda.js: Toggle Time Travel |
- |
Enable/disable time travel debugging |
Koda.js: Open Time Travel Panel |
- |
Show the time travel debugging panel |
Settings
Configure Koda.js through VS Code settings:
{
"jsEvaluator.liveEvaluation.enabled": true,
"jsEvaluator.evaluationDelay": 500,
"jsEvaluator.maxResultLength": 100,
"jsEvaluator.showInlineResults": true,
"jsEvaluator.showHoverDetails": true,
"jsEvaluator.executionTimeout": 3000
}
🛠️ Development
Prerequisites
- Node.js 16+
- VS Code 1.74+
- TypeScript 4.9+
Setup
git clone https://github.com/asp2131/codeecho.git
cd codeecho
npm install
npm run compile
Scripts
npm run compile # Compile TypeScript
npm run watch # Watch for changes
npm run package # Package extension
npm run publish # Publish to marketplace
Architecture
src/
├── extension.ts # Main extension entry
├── evaluator/
│ ├── engine.ts # Safe evaluation engine
│ └── parser.ts # AST parsing & analysis
├── decorations/
│ └── resultDecorator.ts # Inline result display
└── utils/ # Utility functions
🤝 Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
)
- Commit your changes (
git commit -m 'Add amazing feature'
)
- Push to the branch (
git push origin feature/amazing-feature
)
- Open a Pull Request
📄 License
MIT License - see LICENSE file for details.
🐛 Support
🗺️ Roadmap
- [x] Real-time JavaScript evaluation
- [x] Inline result display
- [x] Error highlighting and diagnostics
- [x] Expression parsing and evaluation
- [x] Safe execution environment
- [x] Time travel debugging with execution history
- [ ] TypeScript support
- [ ] Multi-file evaluation
- [ ] Custom evaluation contexts
- [ ] Performance optimizations
- [ ] Advanced debugging features
Koda.js - Making JavaScript development faster and more interactive! ⚡