json-edit

JSON 格式化与补全 — ZTools 插件，自动修复常见 JSON 语法问题并高亮标注补全处。

这是一个使用 Vue 3 + Vite + TypeScript 构建的 ZTools 插件。

✨ 功能特性

JSON 格式化（主功能）

• 触发指令：格式化JSON / json
• 匹配指令：选中文本 → 格式化JSON（over 类型，自动带入内容）
• 实时预览：输入后 debounce 220ms 自动格式化合法 JSON；超过 200KB 需手动点「格式化」
• 格式化：仅美化合法 JSON（含整段去转义），不改脏数据
• 补全：点击「补全」才修复单引号、尾逗号、缺括号、缺值等，补全处以背景色 + 下划线标注
• 复制：一键复制当前内容到剪贴板

📁 项目结构

.
├── public/
│   ├── logo.png              # 插件图标
│   ├── plugin.json           # 插件配置文件
│   └── preload/              # Preload 脚本目录
│       ├── package.json
│       └── services.js
├── src/
│   ├── main.ts
│   ├── main.css
│   ├── App.vue
│   ├── env.d.ts
│   └── JsonFormat/           # JSON 格式化功能
│       ├── index.vue
│       ├── editorSetup.ts
│       ├── repairAndFormat.ts
│       └── types.ts
├── index.html
├── vite.config.js
├── tsconfig.json
├── package.json
└── README.md

🚀 快速开始

安装依赖

npm install

开发模式

npm run dev

开发服务器将在 http://localhost:5173 启动。ZTools 会自动加载开发版本。

运行测试

npm test

构建生产版本

npm run build

构建产物将输出到 dist/ 目录。

📖 开发指南

1. 修改插件配置

编辑 public/plugin.json 文件：

{
  "name": "你的插件名称",
  "description": "插件描述",
  "author": "作者名称",
  "version": "1.0.0",
  "features": [
    // 添加你的功能配置
  ]
}

2. 创建新功能

步骤 1: 创建 Vue 组件

在 src/ 目录下创建新的功能组件：

<!-- src/MyFeature/index.vue -->
<template>
  <div class="my-feature">
    <h1>{{ title }}</h1>
    <!-- 你的组件内容 -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('我的新功能')
</script>

<style scoped>
.my-feature {
  padding: 20px;
}
</style>

步骤 2: 注册路由

在 src/App.vue 中按 action.code 挂载对应页面（当前仅 JsonFormat）。

步骤 3: 配置功能

在 plugin.json 中添加功能配置：

{
  "code": "myfeature",
  "explain": "我的新功能",
  "icon": "logo.png",
  "cmds": ["触发指令"]
}

3. 使用 ZTools API

<script setup lang="ts">
// 隐藏主窗口
window.ztools.hideMainWindow()

// 显示通知
window.ztools.showNotification('操作成功')

// 更多 API 请参考官方文档
</script>

🎨 样式开发

使用 CSS 变量

ZTools 提供了一套 CSS 变量用于主题适配：

.my-component {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

暗色模式支持

@media (prefers-color-scheme: dark) {
  .my-component {
    /* 暗色模式样式 */
  }
}

📦 构建与发布

1. 构建插件

npm run build

2. 测试构建产物

将 dist/ 目录中的所有文件复制到 ZTools 插件目录进行测试。

3. 发布到插件市场

1. 确保 plugin.json 中的信息完整准确
2. 准备好插件截图和详细说明
3. 访问 ZTools 插件市场提交插件

📚 相关资源

• ZTools 官方文档
• ZTools API 文档
• Vue 3 文档
• Vite 文档

❓ 常见问题

Q: 如何调试插件？

A: 使用 npm run dev 启动开发服务器，在插件界面中点击插件头像图标，在弹出的菜单中选择"打开开发者工具"进行调试。

Q: 如何访问 Node.js 能力？

A: 通过 public/preload/services.js 文件扩展服务，然后在组件中使用 window.services 调用。

Q: 插件图标不显示？

A: 确保 public/logo.png 文件存在，且在 plugin.json 中正确配置了 logo 字段。

Q: 如何处理大文件上传？

A: 建议使用 Node.js 流式处理，在 preload 脚本中实现文件分块处理逻辑。

📄 开源协议

MIT License

---

祝你开发愉快！ 🎉