 
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. The editor auto-scrolls and highlights the moved section. Drag & drop disabled on read-only files (e.g., viewing git commit history).
- Clean Headings: See your document structure at a glance with clean headings or symbol names.
- Bidirectional Sync: Click a symbol to jump to that location. Move your cursor, and the tree highlights the current symbol.
- Copy Labels: Select one or more outline items and press
Ctrl+C (Cmd+C on Mac) or right-click and choose Copy to copy their labels to the clipboard — one label per line, in tree order.
- Expand/Collapse All: Quickly expand or collapse all nested nodes in the tree view with custom toolbar buttons or vscode commands.
- 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. Outline auto-refreshes once symbols become available. Some languages require additional a language server extension to provide symbols.
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
- Select one or more symbols and press
Ctrl+C (Cmd+C) to copy their labels to the clipboard
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
Settings
| Setting |
Default |
Description |
outlineEclipsed.highlightDuration |
1500 |
Duration in milliseconds (ms) to highlight moved sections. Minimum: 100 ms. Maximum: 5000 ms. |
outlineEclipsed.logLevel |
"info" |
Controls the verbosity of Outline Eclipsed log output. One of: off, error, warn, info, debug, trace. |
Roadmap
See Roadmap.
License
MIT
| |
