雷动三千 VSCode 工具集

远程资源管理器（SFTP / FTP / FTPS）

扩展侧边栏提供 远程资源 视图，支持远程目录浏览、文件预览、上传、下载、新建目录、重命名和删除。默认读取当前工作区的 .vscode/sftp.json，配置既可以是单个对象，也可以是多个配置组成的数组：

[
    {
        "name": "ku",
        "host": "192.168.31.211",
        "protocol": "sftp",
        "port": 22,
        "username": "root",
        "password": "111111",
        "remotePath": "/Data/code2/bbtyun/ku.bbtyun.com",
        "uploadOnSave": true
    },
    {
        "name": "ftp-site",
        "host": "192.168.31.212",
        "protocol": "ftp",
        "port": 21,
        "username": "deploy",
        "password": "password",
        "remotePath": "/public_html",
        "uploadOnSave": false
    }
]

需要读取多个 JSON 文件时，在工作区设置中配置 leidong-tools.remoteConfigFiles。保存文件时，本地相对工作区的路径会映射到 remotePath；多个配置启用 uploadOnSave 时，可在连接节点上选择“选择保存自动上传目标”。

底部状态栏会显示连接、上传和下载进度；点击状态项可打开“远程资源”输出面板，查看连接、上传下载及错误日志。默认不输出 SSH 数据包等底层噪声；排查协议问题时可临时启用 leidong-tools.remoteVerboseProtocolLogging。FTP 的 PASS 密码会在详细日志中自动隐藏。

同一配置会复用已建立的连接，操作按顺序排队，不会每次保存都重新握手。连接默认空闲 60 秒后关闭，可通过 leidong-tools.remoteConnectionIdleTimeout 调整；连接异常时会释放，并在下次操作自动重连。

状态栏按“空闲 → Loading → 成功 → 1 秒后空闲”切换。连续保存会进行 300ms 防抖；上传期间再次保存时，只追加最后一次变更，不堆积重复版本。

远程目录按需展开并分页渲染，默认每批 200 项，目录结果短期缓存 30 秒；文件较多时使用“加载更多”继续显示。可通过 leidong-tools.remoteDirectoryPageSize 调整每批数量。

存在多个 uploadOnSave: true 配置时，执行“选择保存自动上传目标”可多选一个或多个服务器；全选即可保存后同时上传到全部配置，清空选择则关闭该工作区的自动上传。

• protocol: 支持 sftp、ssh、ftp、ftps。
• SFTP/SSH 支持 privateKey（相对工作区或绝对路径）和可选的 passphrase。
• FTPS 默认使用显式 TLS；设置 secure: "implicit" 使用隐式 TLS（默认端口 990）。自签名证书可设置 rejectUnauthorized: false。
• FTP/FTPS 使用被动模式，普通 FTP 不加密用户名、密码和文件内容，公网连接建议使用 SFTP 或 FTPS。

远程资源目录支持右键分别选择“上传文件”或“上传文件夹”；VS Code 本地资源管理器也会根据右键目标显示对应上传命令。

上传过滤设置：

• leidong-tools.remoteUploadExcludedExtensions：按扩展名排除，例如 map、log、tmp。
• leidong-tools.remoteUploadExcludeRegex：使用正则匹配工作区相对路径，例如 (^|/)node_modules/、\\.min\\.js$。规则同时作用于手动上传、文件夹递归上传和保存自动上传。

专为 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 点个 ⭐}