WXML Language Server Protocol 插件

一个为微信小程序 WXML 文件提供智能补全和类型推断的 VSCode/Cursor 插件。

功能特性

• 🎯 智能补全：在 WXML 文件的 {{}} 模板语法中提供变量补全
• 🔍 类型推断：从同目录下的 TypeScript 文件中提取 data 和 properties 的类型信息
• 📝 悬停提示：显示变量的类型信息和文档
• 🚀 高性能：基于 Rust 实现的 LSP 服务器，响应快速

技术架构

• 插件端：TypeScript + VSCode Extension API
• LSP 服务器：Rust + tower-lsp
• 类型分析：SWC (Speedy Web Compiler) 用于解析 TypeScript

安装

前置要求

• Node.js >= 16.x
• Rust >= 1.70
• VSCode 或 Cursor >= 1.75.0

构建步骤

1. 克隆仓库

git clone <repository-url>
cd wxml-lsp-extension

2. 安装 Node 依赖

npm install

3. 构建 Rust LSP 服务器

cd lsp-server
cargo build --release
cd ..

4. 编译 TypeScript

npm run compile

5. 调试或打包

调试模式：按 F5 在 VSCode 中启动扩展开发主机

打包发布：

npm install -g vsce
vsce package

使用方法

基本用法

1. 在微信小程序项目中创建 index.ts 文件：

// index.ts
Page({
  data: {
    userName: 'John Doe',
    userAge: 30,
    isActive: true,
    userInfo: {
      email: 'john@example.com',
      phone: '1234567890'
    },
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ]
  },
  
  onLoad() {
    // ...
  }
})

2. 在同目录下创建 index.wxml 文件：

<!-- index.wxml -->
<view class="container">
  <!-- 输入 {{ 后会自动提示 userName, userAge 等变量 -->
  <text>{{userName}}</text>
  
  <!-- 支持属性访问补全 -->
  <text>{{userInfo.email}}</text>
  
  <!-- 支持循环变量 -->
  <view wx:for="{{items}}" wx:for-item="item">
    <text>{{item.name}}</text>
  </view>
</view>

3. 在 {{}} 内输入时会自动触发补全提示

Component 示例

// component.ts
Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    count: {
      type: Number,
      value: 0
    },
    config: {
      type: Object,
      value: {}
    }
  },
  
  data: {
    internalState: true
  }
})

<!-- component.wxml -->
<view>
  <text>{{title}}</text>
  <text>{{count}}</text>
  <text>{{internalState}}</text>
</view>

支持的功能

✅ 已实现

• 识别 {{}} 双花括号内的变量
• 从 TypeScript 文件的 data 中提取变量类型
• 从 TypeScript 文件的 properties 中提取变量类型
• 对象属性访问补全（如 user.name）
• 基本类型推断（string, number, boolean, object, array）
• 悬停显示类型信息
• 内置循环变量补全（item, index）

🚧 计划中

• 更精确的 TypeScript 类型解析
• 支持接口和类型别名
• 支持泛型类型
• 函数返回值类型推断
• 跨文件类型引用
• 方法调用补全
• 诊断和错误提示
• 重命名重构

项目结构

wxml-lsp-extension/
├── src/                          # TypeScript 插件源码
│   └── extension.ts             # 插件入口
├── lsp-server/                  # Rust LSP 服务器
│   ├── src/
│   │   ├── main.rs             # LSP 服务器主程序
│   │   ├── parser.rs           # WXML 解析器
│   │   ├── wxml_parser.rs      # WXML 特定语法解析
│   │   ├── ts_analyzer.rs      # TypeScript 类型分析
│   │   └── completion.rs       # 补全功能实现
│   └── Cargo.toml              # Rust 依赖配置
├── package.json                 # Node.js 项目配置
├── tsconfig.json               # TypeScript 配置
└── README.md                   # 项目文档

开发

调试 LSP 服务器

1. 编译 debug 版本：

cd lsp-server
cargo build

2. 在 VSCode 中按 F5 启动调试

3. 查看 LSP 通信日志：

   • 打开 VSCode 输出面板
   • 选择 "WXML Language Server"

运行测试

# Rust 测试
cd lsp-server
cargo test

# TypeScript 测试
npm test

配置

在 VSCode 的 settings.json 中可以配置：

{
  "wxmlLsp.trace.server": "verbose"  // 启用详细日志
}

故障排查

LSP 服务器未启动

1. 检查 Rust 编译是否成功
2. 查看输出面板的错误信息
3. 尝试运行命令 "WXML LSP: Restart"

补全不工作

1. 确保 .wxml 和 .ts 文件在同一目录
2. 确保 TypeScript 文件语法正确
3. 检查是否在 {{}} 内触发补全

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License

安装

安装到 VSCode code --install-extension wxml-lsp-0.1.0.vsix

安装到 Cursor cursor --install-extension wxml-lsp-0.1.0.vsix

或者直接在当前目录运行 code --install-extension ./wxml-lsp-0.1.0.vsix

相关资源

• LSP 协议规范
• tower-lsp
• SWC
• 微信小程序文档