背景

code-inspector-plugin 是一个 Vite/Webpack 插件，
按住 Alt 点击页面元素可以直接跳转到对应的 Vue/React 源码文件。

项目运行在 WSL（Windows Subsystem for Linux） 中，编辑器是 Windsurf（基于 VS Code 的 AI IDE）。
安装并配置好插件后，点击元素时控制台持续报错：

Could not open ProjectList.vue in the editor.
The editor process exited with an error: (code 2).
To set up the editor integration, add something like CODE_EDITOR=code to the
.env.local file in your project folder...

排查过程

1. 配置 editor

按照文档在 vite.config.ts 中加入：

import { codeInspectorPlugin } from 'code-inspector-plugin'

export default defineConfig({
  plugins: [
    vue(),
    codeInspectorPlugin({ bundler: 'vite', editor: 'windsurf' }),
  ],
})

重启后问题依旧。

2. 确认 windsurf CLI 可用

which windsurf
# /home/user/.windsurf-server/bin/<hash>/bin/remote-cli/windsurf

windsurf --version   # exit 0 ✓
windsurf -g /path/to/file:1:1  # exit 0 ✓

# Node.js 进程也能找到它
node -e "const {spawnSync}=require('child_process'); \
  console.log(spawnSync('windsurf',['--version']).status)"
# 0 ✓

CLI 明明好用，为什么插件还是失败？

3. 翻源码找根因

code-inspector-plugin 底层依赖 launch-ide 包来打开编辑器。
梳理 launch-ide/dist/index.js 中的 ae() 函数逻辑（伪代码）：

ae(editor='windsurf'):
  1. 读 .env.local 中的 CODE_EDITOR 环境变量 → 无
  2. 用 editor 名查内置 map → 找到 linux 对应的 binary 列表 ["windsurf"]
     将其保存到 o，但还不是最终结果
  3. 执行 `ps -eo comm` 获取正在运行的进程列表
  4. 遍历进程列表，找到与 o 中 binary 名匹配的进程
     → 如果找到，返回该进程的可执行路径
  5. 遍历结束仍未找到 → 返回 [null]
  
最终 C = null → spawn(null, args) → exit code 2

根本原因：WSL 里 ps 只能看到 Linux 进程。
Windsurf 是 Windows 应用，即使通过 Remote-WSL 连接，
它的主进程依然是 Windows 进程，不会出现在 Linux 的进程列表中。
因此插件的自动检测步骤始终失败，最终用 null 去 spawn 进程。

4. 为什么 VS Code 通常没问题

VS Code 装了 Remote-WSL 扩展后，Code Server 以 Linux 进程运行在 WSL 内，
ps 可以看到 code 进程，所以自动检测能成功。
Windsurf 目前的远程模式与此不同，服务端进程不暴露给 Linux。

解决方案

绕过「进程列表检测」的关键是：让插件直接拿到 binary 的绝对路径。

查看 ae() 源码可知，当 .env.local 中 CODE_EDITOR 的值不是已知编辑器名时，
函数会 直接返回原始字符串，跳过 ps 查找：

if (a) {              // a = CODE_EDITOR 的值
  const r = k(a);    // 查内置 map
  if (r) o = r;
  else return [a];   // ← 不在 map 中 → 直接返回绝对路径，跳过 ps！
}

同时，ne(absolutePath) 会取 basename（仍为 windsurf），
所以参数格式 -g file:line:col 依然正确。

步骤

Step 1：创建稳定的 wrapper 脚本（自动找最新版 windsurf server binary，升级后无需修改）

mkdir -p ~/.local/bin
cat > ~/.local/bin/windsurf << 'EOF'
#!/bin/bash
REAL=$(ls -dt ~/.windsurf-server/bin/*/bin/remote-cli/windsurf 2>/dev/null | head -1)
[ -z "$REAL" ] && { echo "windsurf remote-cli not found" >&2; exit 1; }
exec "$REAL" "$@"
EOF
chmod +x ~/.local/bin/windsurf

验证：

~/.local/bin/windsurf --version  # 应输出版本号

Step 2：在项目根目录手动创建 .env.local（该文件通常已被 .gitignore 排除，需本地自行创建）

CODE_EDITOR=/home/<你的用户名>/.local/bin/windsurf

Step 3：重启 dev server

npm run dev

现在按住 Alt 点击页面元素，即可跳转到 Windsurf 对应的源码位置。

总结

环境	原因	是否需要此方案
Linux 原生 + Windsurf	Windsurf 进程在 ps 中可见	不需要
WSL + Windsurf	Windsurf 是 Windows 进程，ps 看不到	需要
WSL + VS Code	Code Server 以 Linux 进程运行	通常不需要
WSL + Cursor	同 Windsurf，视安装方式而定	可能需要

核心思路：使用绝对路径绕过进程检测，wrapper 脚本保证路径稳定性。