 
Outline Eclipsed
Outline Eclipsed: An outline view for VS Code that lets you drag and drop to reorganize your document structure.
🪐 A VS Code extension that provides an interactive outline tree view for multiple programming languages. Inspired by the Eclipse IDE, Outline Eclipsed lets you reorder sections by dragging and dropping symbols.
💡 Reorganizing long documents is tedious. Instead of cutting and pasting text blocks, just drag symbols in the tree view. Nested sections move together automatically. The editor highlights and scrolls to show exactly what moved. You stay focused on structure, not on selecting text ranges.
⏩ Install from the VS Code Marketplace and open any supported file. The "Outline Eclipsed" view appears in the Explorer sidebar. Click symbols to navigate. Drag them to reorganize.
Demo
Features
- Drag & Drop Reordering: Drag symbols to reorder sections in Markdown, YAML, JSON, HTML, CSS, and XML files. Nested items move with their parent automatically.
- Bidirectional Sync: Click a symbol to jump to that location. Move your cursor, and the tree highlights the current symbol.
- Visual Feedback: After dragging, the editor auto-scrolls and highlights the moved section for 3 seconds.
- Real-Time Updates: The tree refreshes automatically as you edit the document.
- Hierarchical View: See your document structure at a glance with expandable/collapsible nested symbols.
- Rich Information Display: Tree items show values for constants and data keys, with detailed tooltips including symbol type and line information.
- Multi-Language Support: Outline viewing works with any language that provides document symbols (TypeScript, JavaScript, Python, C++, Java, and more). Drag & drop enabled for data/markup formats.
- Graceful Language Server Activation: Outline auto-refreshes when symbols become available; shows a short status message if symbols aren't ready yet.
- Read-Only File Protection: Drag & drop disabled on read-only files (e.g., viewing git commit history). Shows clear warning with lock icon when file cannot be edited.
Installation
# Via VS Code Marketplace
ext install douglashellinger.outline-eclipsed
Or search for "Outline Eclipsed" in the Extensions view (Ctrl+Shift+X).
Usage
- Open any supported file (markdown, TypeScript, Python, etc.)
- Find "Outline Eclipsed" in the Explorer sidebar
- Click any symbol to navigate to that location
- Drag and drop symbols to reorganize sections
- Watch the editor highlight and scroll to show the moved content
Language Support
Drag & Drop Enabled
| Format |
Language IDs |
Extension Required |
| Markdown |
markdown |
None |
| YAML |
yaml |
Red Hat YAML |
| JSON |
json, jsonc |
None |
| HTML |
html |
None |
| CSS |
css, scss, less |
None |
| XML |
xml |
Red Hat XML |
View-Only Outline
These languages show an outline for navigation, but drag & drop is disabled to preserve comments, decorators, and non-symbol code:
- ✅ TypeScript/JavaScript — Classes, functions, methods, properties
- ✅ Python — Classes, functions, methods
- ✅ Java — Classes, methods, fields
- ✅ C/C++ — Classes, functions, structs
- ✅ Any language with VS Code symbol provider — Generic viewing support
Development
# Clone and install dependencies
git clone https://github.com/doughgle/outline-eclipsed.git
cd outline-eclipsed
npm install
# Compile TypeScript
npm run compile
# Watch mode (auto-compile on save)
npm run watch
# Run tests
npm test
Manual Testing
Press F5 to launch the Extension Development Host, then open test-fixtures/sample.md. Test the following:
- Navigation: Click headings to jump to sections
- Selection Sync: Move cursor in editor, verify tree highlights current heading
- Drag & Drop: Drag a heading to reorder sections
- Visual Feedback: Verify editor auto-scrolls and highlights moved section
- Real-Time Updates: Edit document, verify tree refreshes
- ✅ PI-0–7: Markdown outline, nested drag & drop, multi-select, enhanced highlights
- ✅ PI-8: Multi-language outline viewing (JavaScript, TypeScript, Python) — drag & drop deferred
- ✅ PI-9: Rich tree item descriptions and tooltips — line ranges and symbol information
- ✅ PI-10: Read-only file protection — drag and drop disabled on git history files and other read-only documents
- ✅ PI-11: Drag & drop for data/markup formats (JSON, HTML, CSS, XML)
- 🔲 PI-12: Configuration options
- 🔲 PI-13: Show outline for markdown preview when focused
- 🔲 PI-14: Additional markdown symbols (code blocks, quotes)
License
MIT
| |
