如何通过命令行在VSCode Remote WSL环境中打开WSL文件？

由于无法控制vite-plugin-vue-devtools或vite-plugin-vue-inspector调用的code命令参数，我们可以通过在WSL中创建自定义code脚本的方式，强制让VSCode以Remote WSL模式打开文件：

• 步骤1：创建自定义code脚本

  1. 先创建存放脚本的目录（如果不存在）：

     mkdir -p ~/bin
     

  2. 创建并赋予执行权限的code脚本：

     touch ~/bin/code && chmod +x ~/bin/code
     

  3. 编辑该脚本，填入以下内容：

     #!/bin/bash
     # 获取当前WSL发行版名称
     DISTRO_NAME=$(grep -E "^ID=" /etc/os-release | cut -d= -f2)
     # 调用Windows端VSCode，指定Remote WSL环境
     /mnt/c/Program\ Files/Microsoft\ VS\ Code/bin/code.exe --remote=wsl+$DISTRO_NAME "$@"
     

     注：如果你的VSCode安装在Program Files (x86)目录下，需将路径改为/mnt/c/Program\ Files\ \(x86\)/Microsoft\ VS\ Code/bin/code.exe

• 步骤2：让系统优先使用自定义脚本
  将脚本所在目录添加到环境变量PATH最前端，确保优先调用我们的脚本：

  1. 编辑shell配置文件（bash用户编辑~/.bashrc，zsh用户编辑~/.zshrc）：

     echo 'export PATH="$HOME/bin:$PATH"' >> ~/.bashrc
     

  2. 重新加载配置生效：

     source ~/.bashrc
     

• 步骤3：测试验证
  在WSL中执行原命令：

  code -r -g /path/to/file.vue
  

  此时VSCode会自动以Remote WSL模式打开目标文件，路径兼容性问题也会解决。

如果有多个WSL发行版，希望指定固定环境，可将脚本中的DISTRO_NAME替换为具体发行版名称（通过wsl -l命令查看），比如DISTRO_NAME="Ubuntu-22.04"

内容的提问来源于stack exchange，提问作者rozsazoltan