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 工具，在頁面雙擊就能夠進入編輯。