远程开发下 Vue 组件定位到文件：Vue Devtools + vscode-remote使用

当遇到一个新的前端项目时，看页面、找组件是很耗时耗力的一件事情。Vue Devtools 作为前端开发核心工具，不仅能直观查看页面组件层级结构，更支持选中组件后直接跳转至 IDE 对应文件 —— 这一便捷功能在 VS Code Remote SSH 远程开发场景下，

可通过 vscode://vscode-remote/ssh-remote+<服务器名>/<远程绝对路径>:<行号> 协议实现无缝适配。

前面有一篇文章也利用了这个协议

Allure 用例详情 点击自动跳转 VS Code，省去检索步骤

借助该 VS Code 远程协议，无需手动在远程服务器目录中逐层查找，只需在 Vue Devtools 中选中目标组件，即可自动触发 VS Code 打开对应远程服务器上的 Vue 文件，并精准定位到组件所在行号。这一方案彻底解决了远程开发中组件定位效率低的痛点，打通了 “页面组件可视化查看” 与 “远程文件快速编辑” 的链路

下面是具体实现

在项目根目录或服务根目录写vscode-remote-opener.sh

#!/bin/bash

# 参数形如：/home/xxxxfrontend/src/App.vue:12:3
TARGET="$1"

FILE=$(echo"$TARGET" | sed 's/\:[0-9]*:.*//')
LINE=$(echo"$TARGET" | sed 's/^[^:]*://' | awk -F':''{print $1}')

# 远程主机的名称
REMOTE_HOST="172-20-25-160"

URL="vscode://vscode-remote/ssh-remote+$REMOTE_HOST$FILE:$LINE"
echo"Opening: $URL"
/usr/bin/xdg-open "$URL" 2>/dev/null || true

然后加执行权限

chmod +x ~/.vscode-remote-opener.sh

在项目根目录执行

export VUE_EDITOR="$HOME/.vscode-remote-opener.sh"

或者简便点 写入 .bashrc 或 .zshrc都行

echo 'export VUE_EDITOR="$HOME/.vscode-remote-opener.sh"' >> ~/.bashrc

最后一步，重启项目

yarn serve

在浏览器打开 Vue Devtools → Components 点一个组件右上角的 "…” → “Open in editor” 即可打开远端文件啦

#vscode #前端 #vue