H5 Offset Helper

在 H5 开发中，UI 可能给出 1600×720 而非 1440×720 的设计稿，水平定位属性需要从设计值减去固定偏移（默认 80px）。此扩展在你输入值时提供“原值-偏移”的补全，回车替换；Hover 展示计算过程。支持：

• CSS/LESS/SCSS/JS/TS/JSX/TSX/HTML
• SCSS mixin 参数（如 @include pa($left: 120px, $top: 0)）
• 预设快速切换（如 1600→1440 80px）
• 偏移/属性/单位/启用状态可配置

快速开始

1. 安装依赖
   • npm install
2. 构建
   • npm run compile
3. 调试
   • 在 VS Code 中按 F5 启动“扩展开发主机”
4. 试用
   • CSS: left: 120px; → 出现补全“应用偏移: 120px - 80px = 40px”，回车替换
   • SCSS: @include pa($left: 120px, $top: 0); 光标在 120 → 同样补全
5. 配置
   • 设置搜索 H5 Offset Helper 修改 enabled/offset/props/units/scssMixins/scssParams/presets

配置项

• h5OffsetHelper.enabled: 是否启用，默认 true
• h5OffsetHelper.offset: 偏移量（px），默认 80
• h5OffsetHelper.props: 参与计算的属性（kebab），默认 ["left","right","margin-left","margin-right","padding-left","padding-right"]
• h5OffsetHelper.units: 单位白名单，默认 ["px"]
• h5OffsetHelper.scssMixins: 需要处理的 mixin 名，默认 ["pa"]
• h5OffsetHelper.scssParams: 需要处理的 mixin 参数名，默认 ["$left","$right","$margin-left","$margin-right","$padding-left","$padding-right"]
• h5OffsetHelper.presets: 偏移预设数组，默认含 1600→1440 (80px) 和 关闭偏移 (0)

命令

• H5 Offset Helper: 启用/停用
• H5 Offset Helper: 选择预设（从 presets 中选择并应用）
• H5 Offset Helper: 设置偏移（输入数字）

打包与发布

• 打包 VSIX：npm run package（产物位于根目录）
• 本地安装：命令面板 → “Extensions: Install from VSIX...”
• 发布：
  1. https://marketplace.visualstudio.com/ 创建 Publisher 并获取 PAT（Marketplace: Acquire/Manage/Publish）
  2. 登录：npx vsce login your-publisher
  3. 发布：npm run publish 或 npx vsce publish（每次需递增 version）

说明

• 当前采用轻量正则解析，适合常见样式与 mixin 实参；对复杂表达式会跳过（后续可用 AST 增强）
• 仅对 units 白名单内单位生效（默认仅 px），避免误改非像素值