First release of vscode-router-file plug-in

preface

I have seen antfu’s issue about vscode:// protocol to vscode team for a long time.

Until two days ago, I saw the slidevJS project example, which gave me a lot of inspiration.

I found that it is actually possible to use vscode protocal (vscode://file/ file path: line number) to get vscode to view the source file. This gave me the inspiration to develop a plug-in for VS code-router-file.

Vscode ://file is supported by VScode 1.43.0

Vue-devtools is already supported, which I personally find troublesome.

What is vscode-router-file?

It is a vue plug-in that can be double-click in the browser to prompt vscode to open the current routing source file.

Gif demo effect:

Vscode – the router – file principle

Vscode – the router – file tutorial

Step 1: Install a webpack widget: yarn add virtual-module-cwd

Install yarn add@kummy /vscode-router-file

If the above 👆 steps are completed, as shown in 👇 below, it is ready to use.

Github demo: github.com/lisiyizu/vs…

You can select always allow…

Tips: At present, this scheme can only run in the project development environment.

If you like it, you can like 👍👍👍 to support it.

The resources

Github.com/microsoft/v…

Github.com/microsoft/v…

Github.com/microsoft/v…

Cloud.tencent.com/developer/a…

Github.com/privatenumb…

Answer questions 🤔️?

Vue – devTools is already supported. Why do you need to develop VS code-router-file?

Vscode-router-file is a quick and easy way to remind VScode to open the current routing source file. Vue-devtools to invoke VSCode to edit the routing file for the current page, you need to open vue-DevTools layer by clicking, then click to find and select the routing component, and finally click to enter VScode to edit the routing file. It takes a few more steps to complete. Vscode-router-file Does not need to open vue-devtools. Double-click vscode-router-file on the page to enter editing.