vscode-router-file 插件首发

前言

很早以前就看过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…

能够勾选 “始终容许···”

舒适提示：目前该方案只能运行在项目开发环境。

若是以为还不错，能够点赞👍👍👍支持一下。

参考资料

github.com/microsoft/v…

github.com/microsoft/v…

github.com/microsoft/v…

cloud.tencent.com/developer/a…

github.com/privatenumb…

解答疑惑🤔️？

1. 有人在评论问其实 vue-devtools 早就已经支持了，为啥你还要开发 vscode-router-file，是否是闲的无聊？

其实 vscode-router-file 就是为了快速方便的去唤起vscode 打开当前路由源文件。而vue-devtools 若是要针对当前页面路由文件唤起vscode编辑，你须要去打开 vue-devtools 层层点击，而后点击找到而且选中路由组件，最后点击才能进入vscode编辑路由文件。须要多走几步才能完成。vscode-router-file 无需打开 vue-devtools 工具，在页面双击就能够进入编辑。