功能区代码块一直不能优雅折叠？2026年，我终于用这个 VS Code 插件解决了

简介

沉浸编码工具集合，帮助你更专注地组织代码结构、管理常用操作并扩展编辑器能力。

官网说明页：
zeroanon.com/others/z-co...

安装后，你可以直接获得：

区块模板快速插入
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

当一个文件逐渐变大，问题往往不是"写不下去"，而是：

找不到逻辑边界
折叠之后仍然难定位
团队区块风格不一致
临时对象想转成类型时还得手工改

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

支持两种输出形式：

type
interface

支持的输入示例：

ts 复制代码

const data = {
  id: 1,
  name: "Tom",
};

ts 复制代码

let payload = {
  list: [{ id: 1, title: "A" }],
};

ts 复制代码

export default {
  user: {
    id: 1,
    nickname: "Tom",
  },
};

json 复制代码

{
  "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`	扩展激活后是否自动打开设置页

可选主题色：

primary
secondary
tertiary
warm
sky
mint
coral
peach
rose
lilac

适用场景

z-code-tools 适合这些工作流：

大型单文件组件整理
组件模板区块拆分
JavaScript / TypeScript 长文件结构维护
CSS / SCSS / LESS 样式区域划分
接口返回结构快速生成 TypeScript 类型
团队统一代码区块风格

问题反馈

如果你在使用过程中遇到问题，或者有好的建议，欢迎提交到下方评论区 z-code-tools-help 或私人微信。

License

MIT

功能区代码块一直不能优雅折叠？2026年，我终于用这个 VS Code 插件解决了

简介

演示预览

代码片段演示

快捷键生成演示

JSON 转 TS 演示

为什么用 z-code-tools

功能一览

快速上手

插入区块

生成 TypeScript 类型

区块类型

编辑器体验

JSON / JavaScript 转 TypeScript

命令

默认快捷键

Snippets

扩展设置

适用场景

更多工具与网站

个人网站

Horizon-Hop 浏览器插件

问题反馈

License