前言
很早之前就看过antfu大佬给vscode团队提过关于vscode://协议的issue。
直到前2天看了slidevjs项目示例，给了我很大的启发。
我发现目前真的可以通过vscode protocal 协议方式（vscode://file/文件路径:行号），去唤起vscode查看源文件了。这也就给了我去开发 vscode-router-file 的插件灵感。
通过查阅发现：vscode 1.43.0 就已经支持 vscode://file
其实 vue-devtools 早就支持了，我个人觉得比较麻烦。
vscode-router-file 是什么?
它是一个vue插件，我们可以在浏览器里通过双击的形式去唤起vscode打开当前路由源文件。
Gif演示效果：
vscode-router-file 原理
vscode-router-file 教程
第一步，安装一个webpack小插件： yarn add virtual-module-cwd
第二步， 安装 yarn add @kummy/vscode-router-file
如果完成以上👆步骤，出现下图👇所示，证明可以使用了。
Github 演示：github.com/lisiyizu/vs…
可以勾选 “始终允许···”
温馨提示：目前该方案只能运行在项目开发环境。
如果觉得还不错，可以点赞👍👍👍支持一下。
参考资料
cloud.tencent.com/developer/a…
解答疑惑🤔️？
1. 有人在评论问其实 vue-devtools 早就已经支持了，为啥你还要开发 vscode-router-file，是不是闲的无聊？
其实 vscode-router-file 就是为了快速方便的去唤起vscode 打开当前路由源文件。而vue-devtools 如果要针对当前页面路由文件唤起vscode编辑，你需要去打开 vue-devtools 层层点击，然后点击找到并且选中路由组件，最后点击才能进入vscode编辑路由文件。需要多走几步才能完成。vscode-router-file 无需打开 vue-devtools 工具，在页面双击就可以进入编辑。
