hzwx-theme-tool

HZWX 设计变量（Design Token）智能提示插件。让你在写 var(--hzwx-*) 时看得见颜色、看得懂语义、打得快。

能力

支持的文件类型

css / scss / sass / less / postcss / vue / svelte / html / astro / javascript(react) / typescript(react)

可在设置里通过 hzwxTheme.languages 收窄。

数据来源

变量快照内置在扩展里（src/data/tokens.json），运行时零文件依赖。 快照由脚本从设计包解析生成：

npm run gen          # 默认读 /Users/shawei/_work/_hzwx/hzwx-design/packages/style/rootVar.scss
npm run gen -- /abs/path/to/rootVar.scss

脚本会顺着 @use './var.scss' 把 SCSS 变量一起解析，并对 #{$color-brand} 这类插值做递归求值，因此快照里存的是最终色值而不是 #{$...}。

设计包更新颜色后：npm run gen → npm run package → 重装 vsix。

中文描述的三个优先级

1. 配置覆盖：settings 里的 hzwxTheme.descriptions（最高）
2. 自定义 JSON：工作区 .hzwx-theme/colorDescriptions.zh.json，或由 hzwxTheme.descriptionsFile 指定
3. SCSS 注释：rootVar.scss / var.scss 里变量上方的 // 注释
4. 命名规则自动推断（兜底）

生成第 2 项的内容：命令面板执行 HZWX 设计变量：导出中文描述 JSON。

--hzwx-color-other-1 ~ 9 这类无法从命名推断用途的变量，默认描述带「补充色板，具体用途待补充」，建议导出 JSON 后改成真实语义。

开发

npm install
npm run build      # esbuild 打包到 dist/extension.js
npm run watch      # 增量构建
npm run typecheck  # tsc --noEmit

按 F5 启动 Extension Host 调试。

安装

npm run package       # 产出 hzwx-theme-tool.vsix
npm run install:local # 打包并安装到本机 VS Code

或手动：VS Code → 扩展 → ... → 从 VSIX 安装。

发布

两个市场各有一个脚本，用法对称（都支持 --bump=patch|minor|major、--dry-run、--yes、--skip-checks）：

npm run publish:ovsx        # → open-vsx.org（Cursor / VSCodium / Windsurf 等）
npm run publish:vsce        # → Visual Studio Marketplace（VS Code 自带市场）
npm run publish:ovsx:patch  # 升一个 patch 再发布
npm run publish:vsce:dry    # 只打包 + 校验，不上传

Token 存放

脚本按以下顺序取 token，找到即用（都不要提交到 git）：

.ovsx-token / .vsce-token / *.vsix 已在 .gitignore 与 .vscodeignore 中排除。

首次拿到 VS Marketplace 的 PAT

1. 用 Microsoft 账号登录 https://marketplace.visualstudio.com/manage
2. 创建 publisher，ID 填 hzwx（创建后不可改）
3. 打开它绑定的 Azure DevOps 组织 → User Settings → Personal Access Tokens
4. 新建 PAT：Organization 选 All accessible organizations，Scopes 勾 Marketplace › Manage（Read & manage）
5. echo '<pat>' > .vsce-token，然后 npm run publish:vsce

PAT 最长一年，过期后重新生成即可；换机器只要带 .vsce-token 或设 VSCE_PAT 就能发。

配置项