JSONL Preview VSCode Extension

简体中文 | English

A VSCode extension for previewing JSONL files with navigation and synchronization features.

Features

• Sidebar Preview: Open preview in sidebar with a single click on the icon
• Dual Preview Modes: Choose between sidebar preview (for side-by-side viewing) or editor group preview
• Navigation Panel: Navigate through JSONL lines with buttons and keyboard shortcuts
• Position Synchronization: Click in editor to update preview, navigate in preview to scroll editor
• JSON Formatting: Beautiful JSON rendering with expand/collapse functionality using built-in renderer
• Empty Line Handling: Smart handling of empty lines in JSONL files
• Copy JSON: Copy current JSON line to clipboard
• Theme Integration: Automatically adapts to VSCode theme colors
• Multi-language Support: English and Chinese interface support

Usage

Quick Start (Recommended)

1. Open a JSONL file (.jsonl extension)
2. Click the $(split-horizontal) icon in the editor title bar to open preview in sidebar
3. The preview panel will open in the sidebar showing the current line's JSON content

Alternative Methods

• Command Palette: Use the command palette (Cmd+Shift+P / Ctrl+Shift+P) and search for:
  • "Open JSONL Preview in Sidebar" - Open preview in sidebar
  • "Open JSONL Preview" - Open preview in editor group
• Keyboard Shortcut: Press Cmd+Shift+J (Mac) or Ctrl+Shift+J (Windows/Linux) to open preview in editor group

Navigation Controls

• First/Last: Navigate to first/last non-empty line
• Previous/Next: Navigate to previous/next non-empty line
• Jump Input: Enter a line number and click "Go" or press Enter
• Copy JSON: Copy the current JSON line to clipboard

Keyboard Shortcuts (in preview panel)

• Left Arrow: Previous line
• Right Arrow: Next line
• Home: First line
• End: Last line
• Ctrl/Cmd + C: Copy JSON
• Enter: Sync preview position to editor

Installation

From Source

1. Clone this repository
2. Run npm install
3. Run npm run compile
4. Press F5 to start debugging in Extension Development Host

Building for Distribution

npm install -g @vscode/vsce
vsce package

Development

Project Structure

├── src/
│   ├── extension.ts          # Extension entry point
│   └── previewPanel.ts       # Webview panel implementation
├── media/
│   ├── style.css            # Webview styles (with theme overrides)
│   ├── main.js              # Webview JavaScript
│   └── json-beautiful-render.js # Official json-beautiful-render library
├── package.json             # Extension manifest
└── tsconfig.json           # TypeScript configuration

Adding JSONL Language Support

To enable JSONL file detection, you need to configure VSCode to recognize .jsonl files as JSONL:

1. Open VSCode settings (JSON)
2. Add:

"files.associations": {
    "*.jsonl": "jsonl"
}

Multi-language Support

JSONL Preview supports both English and Chinese interfaces. The extension automatically detects your VS Code display language and shows the appropriate interface.

Supported Languages

• English (default)
• Simplified Chinese (简体中文)

License

MIT