雷动三千 VSCode 工具集

专为 Vue 2 CDN / 非工程化项目打造的智能开发体验

核心亮点 · 功能速览 · 配置项 · 快捷键 · 更新日志

💡 解决什么问题？

在传统的 CDN 引入 Vue 2 项目中（搭配 PHP / Layui / 原生 HTML），你写的代码大概长这样：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: { userName: '' },
  methods: {
    handleClick() { /* 几千行之后... */ }
  }
})
</script>

痛点：没有 .vue 单文件组件 → 没有跳转 → 没有提示 → 没有高亮 → 只能全局搜索 😩

这个插件就是为了解决这些问题。

✨ 核心亮点

console.log('file.js:10 xxx:', xxx)

📦 功能速览

1. 🔍 Vue 2 智能跳转

从 HTML 模板中的变量名，一键跳到 JS 中的定义。

<div @click="handleClick">{{ userName }}</div>
<!--         ↑ F12 跳转        ↑ F12 跳转     -->

2. 📝 JS 模板字符串 HTML 增强

在 template: \...`` 内写 HTML 就像在 .html 文件中一样。

const myComponent = {
  props: { title: String },
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } },
  template: `
    <div class="card">
      <!--  ↑ 完整 HTML 语法高亮 -->
      <h1>{{ title }}</h1>
      <!--       ↑ F12 跳转到 props -->
      <button @click="increment">{{ count }}</button>
      <!--           ↑ 自动补全 methods      ↑ F12 跳转到 data -->
    </div>
  `
}

• 语法高亮 — TextMate Grammar 注入，反引号内原生 HTML 着色
• Emmet — div.card>h1+p + Tab 直接展开
• 智能提示 — v-if=" @click=" {{ }} 内自动提示组件成员
• 定义跳转 — 模板内的 props / data / methods 变量直接 F12

3. ⚡ .log 智能日志补全

输入变量名 + .log，自动生成带文件名和行号的日志语句。

userName.log    →  console.log('index.js:42 userName:', userName)
userName.err    →  console.error('index.js:42 userName:', userName)
userName.warn   →  console.warn('index.js:42 userName:', userName)
'hello'.log     →  console.log('hello')

• 优先级高于内置补全，触发即预选
• 支持链式属性：obj.prop.log
• 支持字符串字面量：'text'.log
• 灵感来源：jaluik/dot-log (MIT)

4. 👁️ HTML → JS 文件监听

编辑 HTML 并保存，自动将内容同步到 JS 文件中的指定变量。

my-project/
  └── dev/
      ├── index.html   ← 编辑这个
      └── index.js     ← 自动更新 var html = '...'

• 右键文件夹 → 「启动 HTML→JS 文件监听」
• 变量名可配置（html / dom / 自定义正则）
• 支持多项目批量监听
• 侧边栏面板可视化管理（暂停 / 恢复 / 停止）
• 详细文档：docs/file-watch-usage.md

5. 🗜️ 多行代码压缩

选中代码 → 右键 → 「Compress Multiple Lines」

支持 HTML / JS / CSS / JSON，自动移除注释和空行。

6. 🔧 更多小工具

⌨️ 快捷键

⚙️ 配置项

在 VSCode 设置中搜索 leidong-tools：

{
  // 自定义脚本查找路径（多个模式会合并索引）
  "leidong-tools.devScriptPatterns": [
    "${dir}/js/${base}.dev.js",
    "${dir}/scripts/${base}.js"
  ],
  // 关闭调试日志（生产环境推荐）
  "leidong-tools.indexLogging": false,
  // 文件监听使用 dom 变量名
  "leidong-tools.watchHtmlVariableName": "dom"
}

🛠️ 命令面板

按 Ctrl+Shift+P，输入「雷动三千」或命令名称：

🏗️ 项目结构

src/
├── parsers/       # Babel AST 解析 · Vue 索引构建
├── finders/       # 定义查找 · 模板变量索引
├── providers/     # 跳转 / 悬停 / 补全 Provider
├── helpers/       # 模板字符串检测 · Vue 辅助
├── managers/      # 文件监听 · 索引生命周期
├── cache/         # LRU 缓存
├── monitoring/    # 性能监控 (@monitor 装饰器)
├── tools/         # 日志 · 压缩 · 注释
├── core/          # 命令注册 · Provider 注册 · 配置
└── errors/        # 统一错误处理

🔧 技术栈

📌 已知限制

• 仅支持 Vue 2 Options API（不支持 Composition API / Vue 3）
• 不支持 .vue 单文件组件的复杂场景
• PHP / Layui 混合模板中严重语法错误可能影响解析精度

🤝 致谢

• jaluik/dot-log — .log 补全灵感 (MIT)
• Babel — AST 解析
• VSCode Extension API

📄 License

MIT © 2025 雷动三千 (KuCai)

💬 反馈与交流

• 🐛 Bug 反馈 / 功能建议：GitHub Issues
• 📧 邮件联系：siriforever.ltd@gmail.com
• 🌟 本扩展还在持续维护更新中, 如果你有更好的建议，欢迎提 Issue 或 PR！

_{如果对你有帮助，欢迎在 GitHub 点个 ⭐}