https://github.com/ran-codes/code-organizer-vscode
VS Code extension for navigating large files using lightweight comment syntax to create instant table-of-contents navigation. Supports multiple programming languages.
https://github.com/ran-codes/code-organizer-vscode
code-organization developer-tools navigation outline productivity vscode-extension
Last synced: about 2 months ago
JSON representation
VS Code extension for navigating large files using lightweight comment syntax to create instant table-of-contents navigation. Supports multiple programming languages.
- Host: GitHub
- URL: https://github.com/ran-codes/code-organizer-vscode
- Owner: ran-codes
- License: mit
- Created: 2025-07-16T18:30:21.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-10-28T15:25:30.000Z (5 months ago)
- Last Synced: 2025-10-28T15:29:46.338Z (5 months ago)
- Topics: code-organization, developer-tools, navigation, outline, productivity, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=ran-codes.code-organizer
- Size: 3.08 MB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Code Organizer
Code section navigation for VS Code
Organize and navigate large files with simple comment patterns
## Features
Transform your code files into organized, navigable documents with a table of contents-like structure. Create sections using simple comments, then use VS Code's built-in Outline panel to view and instantly jump to any section with a single click.
- **Simple syntax**: `# Section Name ----`
- **Table of contents experience**: Comments become navigable outline entries
- **Hierarchical nesting**: `##`, `###`, `####` for multi-level organization
- **Multi-language support**: Works with any comment style including JSX `{/* // Section ---- */}`
- **Lightweight & fast**: Only responds to simple comments, no complex parsing
- **VS Code integration**: Seamless outline view, breadcrumbs, and Go to Symbol
- **Zero configuration**: Works immediately
## Quick Start
**To use:**
1. Install the extension
2. Open any code file (or create a new one)
3. Add comment sections ending with `----` (4 or more dashes) to trigger code organization
4. Check the **Outline** panel in VS Code's Explorer sidebar
5. Click any section to jump to it instantly
**Tip**: Use Command Palette (Ctrl+Shift+P / Cmd+Shift+P) → `Code Organizer: Show Code Organizer` to quickly open the view
## Language Support & Examples
| Language | Example | Nesting |
|----------|---------|---------|
| Python, R, Shell | `# Section ----` | `##`, `###`, `####` |
| JavaScript, TypeScript, C++, Java, Go, Rust | `// Section ----` | `////`, `//////`, `////////` |
| React JSX, TSX | `{/* // Section ---- */}` | `{/* //// */}`, `{/* ////// */}` |
| SQL, PostgreSQL | `-- Section ----` | `----`, `------`, `--------` |
**Works with:** Python • JavaScript • TypeScript • **React/JSX** • Java • C# • C++ • Go • Rust • Swift • PHP • SQL • R • Shell • and more...
### Python Example
```python
# 1. Configuration ----
DATABASE_URL = "localhost"
API_KEY = "secret"
## 1.1 Database Settings ----
def connect():
return db.connect(DATABASE_URL)
### 1.1.1 Connection Pool ----
def create_pool():
return ConnectionPool()
## 1.2 API Settings ----
def setup_api():
return API(API_KEY)
# 2. Main Application ----
def run():
db = connect()
api = setup_api()
```
### React/JSX Example
```jsx
{/* // 1. Component Setup ---- */}
import React, { useState, useEffect } from 'react';
function TodoApp() {
{/* // 1.1 State Management ---- */}
const [todos, setTodos] = useState([]);
const [filter, setFilter] = useState('all');
{/* //// 1.1.1 Todo Operations ---- */}
const addTodo = (text) => {
setTodos([...todos, { id: Date.now(), text, done: false }]);
};
{/* // 2. Render Logic ---- */}
return (
{/* // 2.1 Header Section ---- */}
Todo List
{/* // 2.2 Main Content ---- */}
);
}
```
### JavaScript Example
```javascript
// 1. App Configuration ----
const config = {
apiUrl: 'https://api.example.com',
timeout: 5000
};
//// 1.1 Helper Functions ----
function getData() {
return fetch(config.apiUrl);
}
function processData(data) {
return data.map(item => item.value);
}
// 2. Main Application ----
class App {
constructor() {
this.data = [];
}
//// 2.1 Event Handlers ----
handleClick(event) {
console.log('Clicked:', event.target);
}
}
```
### SQL Example
```sql
-- 1. Database Setup ----
CREATE DATABASE myapp;
USE myapp;
---- 1.1 Tables ----
CREATE TABLE users (
id INT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(255)
);
------ 1.1.1 Indexes ----
CREATE INDEX idx_user_email ON users(email);
---- 1.2 Stored Procedures ----
DELIMITER $$
CREATE PROCEDURE GetUser(IN user_id INT)
BEGIN
SELECT * FROM users WHERE id = user_id;
END$$
DELIMITER ;
-- 2. Sample Data ----
INSERT INTO users VALUES (1, 'John Doe', 'john@example.com');
```
## Why Use This Extension?
### The Problem
- **Large files are hard to navigate** - scrolling through 1000+ line files
- **VS Code's outline only shows functions/classes** - not logical code sections
- **No consistent organization** across different programming languages
- **Lost context** when jumping between different parts of complex files
### Our Solution
Simple, universal comment patterns that work everywhere with instant VS Code integration.
Perfect for polyglot developers working across multiple programming languages.
### Comparison with Alternatives
| Feature | **Code Organizer** | Bookmarks | Better Comments | Region Folding |
|---------|----------------------------|-----------|-----------------|----------------|
| Automatic structure detection | ✅ | ❌ | ❌ | ❌ |
| Hierarchical organization | ✅ | ❌ | ❌ | ⚠️ |
| Multi-language support | ✅ | ✅ | ✅ | ⚠️ |
| Outline integration | ✅ | ❌ | ❌ | ❌ |
| Zero configuration | ✅ | ❌ | ❌ | ❌ |
| Comment-based | ✅ | ❌ | ✅ | ⚠️ |
## Installation
**VS Code Marketplace:** Open Extensions (Ctrl+Shift+X) → Search "Code Organizer" → Install
**Command Line:**
```bash
code --install-extension ran-codes.code-organizer-vscode
```
---
## Release Notes
See [CHANGELOG.md](CHANGELOG.md) for detailed release information.
### 0.1.0 - Latest
- **🆕 Custom Activity Bar View**: Dedicated Code Organizer tab with custom icon
- **🆕 Editor-Outline Sync**: Auto-scroll outline view as you navigate through code
- **🆕 "Show Code Organizer" Command**: Quick access via Command Palette
- **🆕 High Resolution Icon**: Professional hexagon design for marketplace
- Enhanced TreeView with caching for reliable navigation
- Improved section highlighting with visual decorations
### 0.0.5
- **🆕 Markdown & Quarto Support**: Native header detection for `.md` and `.qmd` files
- Smart code chunk handling - ignores headers inside fenced code blocks
- Language-specific parsing for markdown documents
- Perfect for data science workflows in Posit/VSCode
### 0.0.4
- **Cursor Compatibility**: Downgraded VSCode engine to ^1.99.0 for broader editor support
### 0.0.3
- **🆕 JSX/TSX Support**: Added React JSX comment syntax `{/* // Section ---- */}`
- Enhanced regex pattern to handle whitespace variations in JSX comments
- Improved language support for React and TypeScript React developers
- Comprehensive test coverage for JSX comment detection
### 0.0.1 - Initial Release
- Support for `#`, `//`, and `--` comment styles
- Hierarchical section nesting up to 4 levels
- VS Code outline integration
- Multi-language support
- Zero configuration setup
## License
MIT License - see [LICENSE](LICENSE) file for details.
---
Inspired by RStudio's Code Sections • Built with ❤️ for the VS Code community