# vscode-jsonl-preview

**Repository Path**: goo/vscode-jsonl-preview

## Basic Information

- **Project Name**: vscode-jsonl-preview
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-03
- **Last Updated**: 2026-07-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSONL 预览 VSCode 扩展

[简体中文](https://gitee.com/goo/vscode-jsonl-preview/blob/main/README.md) | [English](https://gitee.com/goo/vscode-jsonl-preview/blob/main/README.zh-CN.md)

![JSONL Preview Icon](https://gitee.com/goo/vscode-jsonl-preview/raw/main/images/icon.png)

一个用于预览 JSONL 文件的 VSCode 扩展，支持导航和同步功能。

## 功能特性

- **侧边栏预览**：单击编辑器标题栏中的图标即可在侧边栏打开预览
- **双重预览模式**：可选择侧边栏预览（用于并排查看）或编辑器组预览
- **导航面板**：通过按钮和键盘快捷键在 JSONL 行间导航
- **位置同步**：在编辑器中点击可更新预览，在预览中导航可滚动编辑器
- **JSON 格式化**：使用内置渲染器实现美观的 JSON 渲染，支持展开/折叠功能
- **空行处理**：智能处理 JSONL 文件中的空行
- **复制 JSON**：复制当前 JSON 行到剪贴板
- **主题集成**：自动适配 VSCode 主题颜色
- **多语言支持**：支持英文和中文界面

## 使用方法

### 快速开始（推荐）
1. 打开一个 JSONL 文件（.jsonl 扩展名）
2. 单击编辑器标题栏中的 $(split-horizontal) 图标在侧边栏打开预览
3. 预览面板将在侧边栏打开，显示当前行的 JSON 内容

### 其他方法
- **命令面板**：使用命令面板（Cmd+Shift+P / Ctrl+Shift+P）并搜索：
  - "在侧边栏打开 JSONL 预览" - 在侧边栏打开预览
  - "打开 JSONL 预览" - 在编辑器组打开预览
- **键盘快捷键**：按 `Cmd+Shift+J`（Mac）或 `Ctrl+Shift+J`（Windows/Linux）在编辑器组打开预览

### 导航控制

- **首页/末页**：导航到第一个/最后一个非空行
- **上一行/下一行**：导航到上一个/下一个非空行
- **跳转输入**：输入行号并点击"跳转"或按 Enter 键
- **复制 JSON**：复制当前 JSON 行到剪贴板

### 键盘快捷键（在预览面板中）

- **左箭头**：上一行
- **右箭头**：下一行
- **Home**：第一行
- **End**：最后一行
- **Ctrl/Cmd + C**：复制 JSON
- **Enter**：同步预览位置到编辑器

## 安装

### 从源代码安装

1. 克隆此仓库
2. 运行 `npm install`
3. 运行 `npm run compile`
4. 按 F5 在扩展开发主机中开始调试

### 构建分发版本

```bash
npm install -g @vscode/vsce
vsce package
```

## 开发

### 项目结构

```
├── src/
│   ├── extension.ts          # 扩展入口点
│   └── previewPanel.ts       # Webview 面板实现
├── media/
│   ├── style.css            # Webview 样式（带主题覆盖）
│   ├── main.js              # Webview JavaScript
│   └── json-beautiful-render.js # 官方 json-beautiful-render 库
├── package.json             # 扩展清单
└── tsconfig.json           # TypeScript 配置
```

### 添加 JSONL 语言支持

要启用 JSONL 文件检测，您需要配置 VSCode 将 `.jsonl` 文件识别为 JSONL：

1. 打开 VSCode 设置（JSON）
2. 添加：
```json
"files.associations": {
    "*.jsonl": "jsonl"
}
```

## 多语言支持

JSONL 预览支持英文和中文界面。扩展会自动检测您的 VSCode 显示语言并显示相应的界面。

### 支持的语言
- 英文（默认）
- 简体中文

## 许可证

MIT