z-code-tools 沉浸编码工具集合，帮助你更专注地组织代码结构、管理常用操作并扩展编辑器能力。
官网说明页：
https://zeroanon.com/others/z-code-tools-help
安装后，你可以直接获得：
- 区块模板快速插入
S / E 与 #region / #endregion 双格式支持- 编辑器圆点提示、文本高亮、概览标尺定位
- 区块异常提示与折叠
- JSON / JS 转
type / interface
- 活动栏设置面板与状态栏入口
- 常用区块 snippets
演示预览
代码片段演示
演示内容：通过代码片段快速插入区块模板，支持通用、HTML、CSS、React JSX，以及 S / E 和 #region / #endregion 两种区块风格。
完整视频：YouTube - 代码片段演示
快捷键生成演示
演示内容：通过快捷键快速选择区块类型、输入区块名称，并自动生成对应注释模板。
完整视频：YouTube - 快捷键生成演示
JSON 转 TS 演示
演示内容：将 JSON 或 JavaScript 对象代码快速转换为 TypeScript 的 type 或 interface。
完整视频：YouTube - JSON 转 TS 演示
当一个文件逐渐变大，问题通常不是“写不下去”，而是：
- 找不到逻辑边界
- 折叠之后仍然难定位
- 团队区块风格不一致
- 临时对象想转成类型时还得手工改
z-code-tools 把这些高频小动作收成了统一工作流，让结构整理和类型生成都更直接。
功能一览
| 功能 |
说明 |
| 区块模板插入 |
一键插入成对区块注释并包裹选中内容 |
| 双格式区块支持 |
同时支持 S / E 和 #region / #endregion |
| 原生折叠 |
区块自动注册为可折叠区域 |
| 装饰显示 |
圆点、文字高亮、概览标尺同步显示 |
| 异常提示 |
缺失开始或结束标记时给出高亮与 hover 反馈 |
| JSON / JS 转 TS |
将对象字面量快速转为 type 或 interface |
| 设置面板 |
在活动栏统一管理开关、主题色与常用操作 |
| 状态栏入口 |
右下角快速打开设置面板 |
| Snippets |
常用区块模板可直接通过片段前缀插入 |
快速上手
插入区块
- 在编辑器里选中一段代码
- 执行命令
z-code-tools: 插入功能区块注释
- 选择区块类型
- 输入区块名称
扩展会自动生成对应注释模板，并将当前选中内容包裹进去。
生成 TypeScript 类型
- 执行命令
z-code-tools: json转ts类型
- 选择生成
type 或 interface
- 粘贴 JSON 或 JavaScript 对象代码
扩展会自动规范化输入内容并插入生成结果。
区块类型
当前支持以下区块类型：
通用注释：S / E 区块通用注释：#region 区块CSS 注释：S / E 区块CSS 注释：#region 区块HTML 注释：S / E 区块HTML 注释：#region 区块React JSX 注释：S / E 区块React JSX 注释：#region 区块
编辑器体验
开启装饰后，扩展会在编辑器中显示：
- 区块起始位置的圆点标识
S 名称 / E 名称 / #region 名称 文本高亮- 概览标尺中的区块定位提示
- 区块异常的错误高亮与悬停说明
当前支持识别：
- 块注释形式的区块标记
- 行注释形式的
#region 区块
- HTML 注释形式的区块标记
- React JSX 注释形式的区块标记
- 带装饰星号或不带装饰星号的区块标记
异常场景包括：
JSON / JavaScript 转 TypeScript
支持两种输出形式：
支持的输入示例：
const data = {
id: 1,
name: "Tom",
};
let payload = {
list: [{ id: 1, title: "A" }],
};
export default {
user: {
id: 1,
nickname: "Tom",
},
};
{
"success": true,
"items": [
{
"id": 1
}
]
}
处理流程：
- 选择
type 或 interface
- 粘贴 JSON 或 JavaScript 对象代码
- 自动解析并规范化为标准 JSON
- 推导嵌套对象、数组、联合类型和命名子类型
- 将结果插入当前编辑器
命令
| 命令 ID |
显示名称 |
说明 |
z-code-tools.insertRegionBlock |
z-code-tools: 插入功能区块注释 |
交互式插入区块模板 |
z-code-tools.openSettingsPanel |
z-code-tools: 打开设置页 |
打开活动栏设置面板 |
z-code-tools.insertTransType |
z-code-tools: json转ts类型 |
将 JSON / JS 对象转换为 TypeScript 类型 |
默认快捷键
| 功能 |
Windows / Linux |
macOS |
| 插入功能区块注释 |
Ctrl+Alt+Z |
Cmd+Alt+Z |
| 打开设置页 |
Ctrl+Alt+O |
Cmd+Alt+O |
| JSON 转 TS 类型 |
Ctrl+Alt+T |
Cmd+Alt+T |
Snippets
| 片段前缀 |
说明 |
zcode |
通用 S / E 区块注释模板 |
zcode-region |
通用 #region 区块注释模板 |
zcode-html |
HTML S / E 区块注释模板 |
zcode-html-region |
HTML #region 区块注释模板 |
zcode-css |
CSS S / E 区块注释模板 |
zcode-css-region |
CSS #region 区块注释模板 |
zcode-react-dom |
React JSX S / E 区块注释模板 |
zcode-react-dom-region |
React JSX #region 区块注释模板 |
扩展设置
| 配置项 |
类型 |
默认值 |
说明 |
z-code-tools.enableDecorations |
boolean |
true |
是否启用区块装饰高亮 |
z-code-tools.accentTheme |
string |
primary |
区块圆点与开始/结束标记使用的主题色 |
z-code-tools.showRightBadge |
boolean |
true |
是否显示区块圆点标识与概览标尺定位 |
z-code-tools.autoRevealSettings |
boolean |
true |
扩展激活后是否自动打开设置页 |
可选主题色
primarysecondarytertiarywarmskymintcoralpeachroselilac
适用场景
z-code-tools 适合这些工作流：
- 大型 Vue 单文件组件整理
- React 组件模板区块拆分
- JavaScript / TypeScript 长文件结构维护
- CSS / SCSS / LESS 样式区域划分
- 接口返回结构快速生成 TypeScript 类型
- 团队统一代码区块风格
更多工具与网站
个人网站
如果你想继续看看我正在做的其他项目、文章和工具，可以访问我的个人网站：
https://zeroanon.com/
Horizon-Hop 浏览器插件
如果你希望把一些高频小工具留在浏览器里完成，也可以看看我做的另一款浏览器插件 Horizon-Hop。
它是一套轻量但很实用的浏览器工具工作台，主要覆盖这些场景：
- 当前网页二维码生成
- 二维码工坊与分享海报
- JSON 工具箱
- 图片压缩
- 变量命名助手
- 表格结构整理
- 书签搜索与功能面板
它更适合处理网页、文档、接口数据、图片素材和日常开发辅助场景，和 z-code-tools 在 VS Code 内整理代码结构的方向刚好互补。
详细介绍可以查看：
Horizon-Hop 使用帮助
安装Horizon-Hop
问题反馈
如果你在使用过程中遇到问题，或者有好的建议，欢迎提交到下方评论区 z-code-tools-help 或 私人微信。
License
MIT
