序言

在进行嵌入式 GUI 开发(如使用 Rust 和 Slint)时,通常会面临以下技术挑战:

  • 资源限制:嵌入式设备性能有限,编译速度慢且存储空间不足,不适合直接作为开发环境。
  • 环境隔离:为了保持本地开发环境的整洁,通常使用 PVE/WSL/Docker 等虚拟化平台部署独立的 Linux 容器进行开发。

VSCode Remote - SSH 提供了便捷的远程开发体验,实现了 “本地编码,云端编译”。然而,Slint 的 “实时预览” (Live Preview) 功能依赖于图形界面显示。虽然配合 SSH X11 转发 可以将远程窗口投射至本地,但 VSCode 的插件机制存在一定的环境隔离,Slint 插件启动的预览进程往往无法正确获取 DISPLAY 环境变量,导致预览窗口无法显示。

本文介绍一种通过 LSP (Language Server Protocol) 代理脚本注入环境变量的方法,以解决该问题。


准备工作

安装 slint-lsp

VSCode 的 Slint 插件默认不包含语言服务器二进制文件,且不会自动安装。我们需要在远程环境中手动安装它。请确保已安装 Rust 工具链:

bash
cargo install slint-lsp

安装完成后,slint-lsp 通常位于 ~/.cargo/bin/ 目录下。

TIP

提示:即便是本地开发(非远程),有时 VSCode 插件也无法自动定位 slint-lsp。此时同样建议在 VSCode 设置中手动指定 slint.lspBinaryPath 的绝对路径,以确保插件正常工作。

问题分析

在 SSH 终端中手动运行 cargo run 时,Shell 会自动继承 SSH 会话中的 DISPLAY 环境变量(例如 localhost:10.0),因此常规 GUI 程序可以正常通过 X11 转发显示。

然而,VSCode 的 Slint 插件是在后台启动 slint-lsp(语言服务器)进程的。该过程并不总是能继承 SSH Shell 会话中的完整环境变量。这导致当用户点击 "Show Preview" 时,LSP 进程因无法定位显示设备而启动失败。

解决方案:LSP 代理脚本

Slint 插件允许用户自定义 LSP 可执行文件的路径。利用这一特性,我们可以编写一个中间脚本(Wrapper Script)作为代理。在该脚本中手动注入必要的环境变量,然后再调用实际的 LSP 二进制文件。

1. 创建代理脚本

在远程服务器的项目目录或用户目录下创建一个脚本文件,例如 /root/slint_test/.vscode/slint-lsp-proxy.sh

bash
#!/bin/bash

# 1. 配置区域设置 (Locale)
# Slint 依赖 UTF-8 环境,强制指定以避免编码错误
# 需确保系统已生成对应 locale (Debian/Ubuntu: sudo dpkg-reconfigure locales)
export LANG=zh_CN.UTF-8
# 或者使用通用的 C.UTF-8
# export LANG=C.UTF-8

# 2. 注入 X11 显示变量
# 此处需填入 SSH X11 转发的 DISPLAY 地址
# SSH 自动转发通常为 localhost:10.0,具体值可通过在终端执行 echo $DISPLAY 获取
export DISPLAY=localhost:10.0

# 3. 图形后端配置 (可选)
# 强制 winit 使用 X11 后端,避免因尝试连接 Wayland 而失败
export WINIT_UNIX_BACKEND=x11

# 4. 启动实际的 LSP
# 需替换为服务器上 cargo 安装的 slint-lsp 实际路径
exec /root/.cargo/bin/slint-lsp "$@"

注意DISPLAY 的值可能会随会话变化。在固定 IP 的开发环境中,将其硬编码在脚本中较为稳定。

2. 赋予执行权限

需给予脚本执行权限,否则 VSCode 无法调用:

bash
chmod +x /root/slint_test/.vscode/slint-lsp-proxy.sh

3. 配置 VSCode

编辑项目的 .vscode/settings.json(或全局 User Settings),将 Slint 插件的 LSP 路径指向上述脚本:

json
{
  "slint.lspBinaryPath": "/root/slint_test/.vscode/slint-lsp-proxy.sh"
}

验证结果

  1. 确保本地电脑的 X Server(如 VcXsrv)已启动。
  2. Reload VSCode 窗口以重启 LSP 服务。
  3. 打开任意 .slint 文件。
  4. 点击编辑器右上角的 Show Preview 按钮。
  5. Slint 的预览窗口应能通过 SSH 隧道正常显示在本地桌面上。
成功预览效果图

值得留意的是官方视乎准备实现真正的远程预览

总结

通过 Shell 脚本封装 LSP 启动命令,可以有效绕过 VSCode 插件的环境隔离限制。该方法具有一定的通用性,对于其他依赖特定环境变量(如 LD_LIBRARY_PATH 或特定 SDK 路径)的 LSP 服务应该也同样适用。

//posts/linux/VSCode_Remote_X11_Slint.html